UWP 绑定到依赖属性答案

【问题标题】：UWP bind to dependency propertyUWP 绑定到依赖属性
【发布时间】：2018-05-21 15:50:48
【问题描述】：

我已经使用模板工作室创建了一个 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>

基本上，它在一个网格中有两个图像，我想将它们绑定到我的依赖属性 Icon 和 Pointer。

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

我已经按照这个教程，并尝试做同样的事情：https://social.technet.microsoft.com/wiki/contents/articles/32795.uwp-creating-user-control.aspx，但是当我点击我的第一张图片时——>自定义控件设计器中的源，“创建数据绑定”选项甚至不可用——它被禁用了。

我尝试过这样设置数据绑定：

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

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

如何绑定这些依赖属性，有简单的方法吗？

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

【问题讨论】：

标签： c# uwp

【解决方案1】：

我尝试这样设置数据绑定： <Image HorizontalAlignment="Left" Height="100" Margin="39,105,0,0" VerticalAlignment="Top" Width="100" Source="{Binding Icon}"/>

这种方式你在用户控件的 XAML 中设置数据绑定是正确的。但是您没有为绑定设置DataContext。没有数据源，绑定将无法工作。只需在您的用户控件中设置Datacontext 即可。代码如下：

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

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

然后可以使用用户控件设置图片来源，例如：

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

有关用户控件内部绑定的更多详细信息，您可以参考this article。

【讨论】：