Question

我是Windows Phone 8开发的新手（你可以说知情的noob寻找答案），我正在寻找以下问题的帮助：

我有 usercontrol - 更具体地说是按钮，其中包含图片和文字。我希望该按钮具有以下属性：

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

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

我想知道什么：

如何更改代码隐藏和其他所需内容，以便我可以按照以下要求使用它？

（我将在我的程序中使用该按钮六次，我想使用此usercontrol作为它的一种模板 - 准备它，所以我只为这两种状态指定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？）转换为正确的类型。

Answer 2

一月，

对于你的问题，你只是遗漏了一件事。

在UserControl中，你必须像这样创建DependencyProperties：

 public static readonly DependencyProperty ContentImageNormalProperty =

            DependencyProperty.Register("ContentImageNormal",

                typeof(ImageSource ),

                typeof(MainPageButton));

然后你的财产应该是这样的：

     public string ContentImageNormal{ get { return (ImageSource)this.GetValue(ContentImageNormalProperty); } 
set { this.SetValue(ContentImageNormalProperty, value); } }

为您要设置的每个媒体资源执行此操作...

请参阅此示例：http://stevenhollidge.blogspot.pt/2012/03/dependency-properties-in-user-control.html

我希望这会对你有所帮助。

此致塞尔吉奥·蒙泰罗

Answer 3

看起来你真正想做的是创建一个CustomControl而不是UserControl。所以我将创建一个继承自Button的自定义Control，并使用按钮可视状态在两个图像之间切换。这是一个实现：在ThemeS / Generic.xaml中添加此样式

<Style  TargetType="ButtonWithImage">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="Padding" Value="10,5,10,6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="enablebleImage">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="disableImage">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <Grid>
                                <Image x:Name="disableImage" Source="{TemplateBinding EnableImageSource}" Visibility="Collapsed"/>
                                <Image x:Name="enablebleImage"  Source="{TemplateBinding DisableImageSource}"/>
                              <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

并定义以下类：

public class ButtonWithImage :Button
{
    public static readonly DependencyProperty DisableImageSourceProperty =
        DependencyProperty.Register("DisableImageSource", typeof (ImageSource), typeof (ButtonWithImage), new PropertyMetadata(default(ImageSource)));

    public ImageSource DisableImageSource
    {
        get { return (ImageSource) GetValue(DisableImageSourceProperty); }
        set { SetValue(DisableImageSourceProperty, value); }
    }

    public static readonly DependencyProperty EnableImageSourceProperty =
        DependencyProperty.Register("EnableImageSource", typeof (ImageSource), typeof (ButtonWithImage), new PropertyMetadata(default(ImageSource)));

    public ImageSource EnableImageSource
    {
        get { return (ImageSource) GetValue(EnableImageSourceProperty); }
        set { SetValue(EnableImageSourceProperty, value); }
    }


    public ButtonWithImage()
    {
        this.DefaultStyleKey = typeof (Button);

    }
}

Answer 4

您可以对Image和Text进行简单的绑定。

对于你的例子：

<Button name="buttonTest">
                <Button.Content>
                    <Grid>
                        ...omitted...
                        <Image x:Name="ContentImageHolder" Source="{Binding ElementName=buttonTest, Path=IsEnabled, Converter ={StaticResource convertButton}}" Grid.Row="0" />
                        <TextBlock x:Name="ContentTextBlock"  Text="My Sample Text" Grid.Row="1" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" Foreground="{StaticResource PhoneForegroundBrush}" TextAlignment="Center"/>
                    </Grid>

然后你会创建一个转换器，它将接收值为True或False（启用与否），然后在每个状态下返回所需的图像。

您的转换器可能类似

  public class ButtonImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {


            if((bool) value)
return  CreateImage("pack://application:,,,/ButtonEnabled.ico"); // url should be correct
else  return  CreateImage("pack://application:,,,/ButtonDisable.ico");

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }

        /// <summary>
        /// Method to create an image to bind to icons in treeview
        /// </summary>
        /// <param name="uriToImage">uri to image in folder.</param>
        /// <returns>a bitmap image to bind to image source in tree view</returns>
        private BitmapImage CreateImage(string uriToImage)
        {
            if (!string.IsNullOrEmpty(uriToImage))
            {
                BitmapImage genericBitmap = new BitmapImage();
                genericBitmap.BeginInit();
                genericBitmap.UriSource = new Uri(uriToImage);
                genericBitmap.EndInit();
                return genericBitmap;
            }

            return null;

        }
    }

对于Text，如果它依赖于任何属性，您也可以这样做。

Windows Phone 8用户控件图像按钮，具有不同状态的不同图像

4 个答案: