带有 CustomControl 的 VisualState Setter 不起作用答案

【问题标题】：VisualState Setter with CustomControl not working带有 CustomControl 的 VisualState Setter 不起作用
【发布时间】：2016-05-04 03:22:36
【问题描述】：

我有一个 UserControl，它包含一个按钮和一个图像控件以及一个像这样的属性：

 public sealed partial class ImageButton : UserControl
        {
            public ImageSource Source { get { return Image.Source; } set { Image.Source = value; } }
        }

在 XAML 中设置 ImageSource 可以正常工作，如下所示：

<views:ImageButton x:Name="MyButton" Source="../Assets/image.jpg"/>

但是当我尝试在 VisualStateManager 中设置它时，它会破坏完整的状态：

<Setter Target="MyButton.Source" Value="../Assets/image.jpg"/>

像往常一样，Windows 不会输出任何（有用的）错误消息，所以我不知道这里出了什么问题。有人可以帮忙吗？

【问题讨论】：

标签： win-universal-app windows-10 visualstatemanager imagesource

【解决方案1】：

好的，我自己发现了：你需要将 Source Property 注册为 DependencyProperty

public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source",
            typeof (ImageSource), typeof (ImageButton), new PropertyMetadata(string.Empty, OnPropertyChanged));

private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
            {
                ((ImageButton) d).Source = (ImageSource) e.NewValue;
            }

【讨论】：

【解决方案2】：

你应该使用依赖属性。以下是一个详细说明的示例解决方案：

用户控制

<UserControl
x:Class="TestApps.ImageButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApps"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400" x:Name="MyControl">

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Image Source="{Binding ElementName=MyControl, Path=Source, Mode=OneWay}"/>
    <Button Content="{Binding ElementName=MyControl, Path=ButtonContent, Mode=OneWay}" 
            Grid.Row="1" Height="50" HorizontalAlignment="Center"/>
</Grid>
</UserControl>

后面的用户控制代码

public sealed partial class ImageButton : UserControl
{
    public ImageButton()
    {
        this.InitializeComponent();
    }

    public string Source
    {
        get { return (string)GetValue(SourceProperty); }
        set { SetValue(SourceProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Source.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty SourceProperty =
        DependencyProperty.Register("Source", typeof(string), typeof(ImageButton), new PropertyMetadata(default(string)));

    public string ButtonContent
    {
        get { return (string)GetValue(ButtonContentProperty); }
        set { SetValue(ButtonContentProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Source.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ButtonContentProperty =
        DependencyProperty.Register("ButtonContent", typeof(string), typeof(ImageButton), new PropertyMetadata(default(string)));
}

父 XAML

<StackPanel Margin="100,10,10,10">
        <local:ImageButton Source="../Assets/SplashScreen.scale-200.png" ButtonContent="Test Button!"/>
    </StackPanel>

输出

【讨论】：