c# - Windows Phone 8 usercontrol imagebutton 具有不同状态的不同图像

Question

我是 Windows Phone 8 开发的新手(您可以说是知识渊博的菜鸟正在寻找答案)，我正在寻求有关以下问题的帮助:

我有用户控件 - 更具体地说是一个包含图像和文本的按钮。我希望该按钮具有以下属性:

• ContentImageNormal - 启用按钮时显示的图像
• ContentImageDisabled - 这将是禁用按钮时显示的图像

我现在拥有的是用户控件添加到我的项目中的文件夹 UserControls 中，我可以使用它。我为它创建了一个样式并更改了禁用按钮的背景等。

我想知道什么:

• 如何更改代码隐藏和其他所需内容，以便我可以在下面根据需要使用它？

(我将在我的程序中使用该按钮六次，我想将此用户控件用作它的一种模板 - 准备它，所以我只需为两种状态指定 ImageSources，其余的将由它完成)

所需用法示例:

<UserControls:MainPageButton ContentText="Log In" ContentImageNormal="/ImagePathOrResourceETC.png" ContentImageDisabled="/ImagePathOrResourceETC.png"/>

我有 XAML:

    <UserControl x:Class="ProjectNameSpace.UserControls.MainPageButton">
        <Grid x:Name="LayoutRoot">
            <Button >
                <Button.Content>
                    <Grid>
                        ...omitted...
                        <Image x:Name="ContentImageHolder" ... />
                        <TextBlock x:Name="ContentTextBlock"  .../>
                    </Grid>
                </Button.Content>
            </Button>
        </Grid>
    </UserControl>

我目前拥有的 C# 代码隐藏:

...usings omitted...
public partial class MainPageButton : UserControl
{
    ...constructor and text setting omitted for brevity...
    public ImageSource ContentImage
    {
        get
        {
            return ContentImageHolder.Source;
        }
        set
        {
            ContentImageHolder.Source = value;
        }
    }
}
}

Answer 1

创建起来非常简单(好吧，这对我来说是这样，因为我有很多关于大部分困难内容的代码片段)，所以这里它是一个自定义 UserControl。

首先，使用您的图像创建用户控件。是的。

<UserControl x:Class="CustomImageControl.Controls.ThreeWay"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" >
    <Image
        x:Name="derpImage" />
</UserControl>

特别努力，那里。

接下来，您必须在代码隐藏中执行以下操作。首先，为代表您拥有的任何状态的每种类型的图像创建 DependencyProperties。在我的示例中，出于空间原因，我省略了 InactiveImage 和 DerpImage 属性。您可以看到 ActiveImage 是如何工作的。接下来，您为控件的状态创建一个 DependencyProperty。在这个例子中，我有一个 State 枚举来定义它，但你可以做任何你想做的事。在更改时，我会检查新值并根据需要更改图像。很简单。

public partial class ThreeWay : UserControl
{
    #region ActiveImage
    public static readonly DependencyProperty ActiveImageProperty =
        DependencyProperty.Register(
            "ActiveImage",
            typeof(ImageSource),
            typeof(ThreeWay),
            new UIPropertyMetadata());

    public ImageSource ActiveImage
    {
        get { return (ImageSource)GetValue(ActiveImageProperty); }
        set { SetValue(ActiveImageProperty, value); }
    }
    #endregion

    //InactiveImage and DerpImage snipped to keep this short

    #region ImageState
    public static readonly DependencyProperty ImageStateProperty =
        DependencyProperty.Register(
            "ImageState",
            typeof(State),
            typeof(ThreeWay),
            new UIPropertyMetadata(State.Derp, OnImageStatePropertyChanged));

    private static void OnImageStatePropertyChanged(
        DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        (d as ThreeWay).OnImageStateChanged(
          e.OldValue as State, e.NewValue as State);
    }

    private void OnImageStateChanged(State oldValue, State newValue)
    {
        switch(newValue)
        {
            case State.Active:
                this.derpImage.Source = ActiveImage;
                break;
            case State.Inactive:
                this.derpImage.Source = InactiveImage;
                break;
            case State.Derp:
                this.derpImage.Source = DerpImage;
                break;
        }
    }

    public State ImageState
    {
        get { return (State)GetValue(ImageStateProperty); }
        set { SetValue(ImageStateProperty, value); }
    }
    #endregion

    public ThreeWay()
    {
        InitializeComponent();
    }

    public enum State
    {
        Active,
        Inactive,
        Derp
    }
}

就是这样。你会像这样使用它:

<cc:ThreeWay xmlns:cc="clr-namespace:CustomImageControl.Controls"
             ActiveImage="active.png"
             InactiveImage="inactive.png"
             DerpImage="derp.jpg"
             ImageState="{Binding State}" />

这假定 DataContext 是一个实例，它具有一个名为 State 的属性，类型为 ThreeWay.State。如果不是，可以使用自定义转换器在任何类型(可空 bool 值？)之间转换为正确的类型。