UWP绑定到依赖项属性

Question

我已经使用Template Studio创建了UWP项目，并且正在尝试实现自定义控件。

看起来是这样的：

.xaml.cs

 public sealed partial class MyButton : UserControl
    {
        public MyButton()
        {
            InitializeComponent();
        }

        public ImageSource Icon
        {
            get => (ImageSource)GetValue(s_iconProperty);
            set => SetValue(s_iconProperty, value);
        }

        public ImageSource Pointer
        {
            get => (ImageSource)GetValue(s_pointerProperty);
            set => SetValue(s_pointerProperty, value);
        }

        public static readonly DependencyProperty s_iconProperty =
          DependencyProperty.Register("Icon", typeof(ImageSource), typeof(MyButton), null);

        public static readonly DependencyProperty s_pointerProperty =
         DependencyProperty.Register("Pointer", typeof(ImageSource), typeof(MyButton), null);
    } 

.xaml

<UserControl
    x:Class="...Main.Components.MyButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:...Main.Components"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" Width="755.357">
    <Button Margin="0,1,1,-1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid HorizontalAlignment="Stretch" Margin="-375,-152,-375,-148" Width="750" Height="300" VerticalAlignment="Stretch">
            <Image HorizontalAlignment="Left" Height="100" Margin="39,105,0,0" VerticalAlignment="Top" Width="100" Source="{?!?!?!}"/>
            <TextBlock HorizontalAlignment="Left" Margin="160,126,0,0" Text="TextBlock" TextWrapping="Wrap" VerticalAlignment="Top" Height="70" Width="403"/>
            <Image HorizontalAlignment="Left" Height="100" Margin="602,121,0,0" VerticalAlignment="Top" Width="100"/>
        </Grid>
    </Button>
</UserControl>

基本上，它在网格内有两个图像，我想将其绑定到我的dependecy属性，Icon和Pointer。

在控件的设计器中，我看不到依赖项属性，但可以在具有自定义按钮的页面的设计器中看到它们。

我已经按照本教程进行了操作，并尝试执行以下操作：https : //social.technet.microsoft.com/wiki/contents/articles/32795.uwp-creating-user-control.aspx，但是当我单击第一个时image->自定义控件设计器中的源代码，“创建数据绑定”选项甚至不可用-已禁用。

我试图像这样设置数据绑定：

<Image HorizontalAlignment="Left" Height="100" Margin="39,105,0,0" VerticalAlignment="Top" Width="100" Source="{Binding Icon}"/>

但是我意识到这可能不是正确的语法。

我如何绑定到这些依赖项属性，有没有简单的方法？

我已经使用“添加新项...用户控件”创建了控件。

Answer 1

I have tried to set the data binding like this: <Image HorizontalAlignment="Left" Height="100" Margin="39,105,0,0" VerticalAlignment="Top" Width="100" Source="{Binding Icon}"/>

This way you set the data binding in the XAML of the user control is correct. But you didn't set the DataContext for the binding. Without the data source the binding will not work. Just set the Datacontext inside your user control it will work. Code as follows:

public MyButton()
{
    InitializeComponent();
    (this.Content as FrameworkElement).DataContext = this;
}

public ImageSource Icon
{
    get => (ImageSource)GetValue(s_iconProperty);
    set => SetValue(s_iconProperty, value);
}

Then you can use the user control to set the image source, for example:

<local:MyButton
    Width="600"
    Height="800"
    Icon="Assets/A.jpg" />

More details about binding inside user control you could reference this article.