Windows Phone 8 usercontrol imagebutton 不同状态的不同图像

问题描述

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

I'm new to Windows Phone 8 Development (You can say informed noob looking for answers) and I'm looking for help with the following problem:

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

I have usercontrol - more specifically a button containing Image and Text. I would like that button to have following properties:

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

• ContentImageNormal - that would be image that displays when the button is enabled
• ContentImageDisabled - That would be image that is dispalyed when the button is disabled

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

What i have now is usercontrol added in my project in folder UserControls, which I am able to use. I have created a style for it and changed the disabled button's backgeround etc.

我想知道什么:

• 如何更改代码隐藏和其他需要的东西，以便我可以根据需要在下面使用它?

(我将在我的程序中使用该按钮六次，我想使用这个用户控件作为它的一种模板 - 准备它，所以我只为两种状态指定 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;
        }
    }
}
}

推荐答案

这对我来说很简单(嗯，这是给我的，因为我有大量的片段来处理大多数困难的事情)，所以在这里它是一个自定义的用户控件.

This is pretty trivial to whip up (well, it is for me, because i've got tons of snippets for most of the hard stuff), so here it is as a custom UserControl.

首先，使用您的图像创建您的用户控件.耶.

First, create your user control with your image. Yay.

<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 枚举来定义它，但你可以做任何你想做的事情.更改时，我会检查新值并根据需要更改图像.很简单.

Next, in the codebehind you have to do the following things. First, create DependencyProperties for each type of image representing whatever state you have. In my example, I'm omitting the InactiveImage and DerpImage properties for space reasons. You can see how the ActiveImage works. Next, you create a DependencyProperty for the state of the control. In the example I have a State enum that defines this, but you can do whatever you want. On change, I examine the new value and change the image as necessary. Easy.

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
    }
}

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

And that's it. You would use it like this:

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

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

This assumes the DataContext is an instance with a property called State of type ThreeWay.State. If not, a custom converter can be used to convert between whatever (nullable bool?) to the correct type.

这篇关于Windows Phone 8 usercontrol imagebutton 不同状态的不同图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！