具有CustomControl的VisualState Setter无法正常工作

Question

我有一个包含Button和Image Control的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没有（有用的）错误消息，所以我不知道这里有什么问题。有人可以帮忙吗？

Answer 1

好的，自己找到了：你需要将源属性注册为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;
            }

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

输出