UserControl 中的绑定问题

Question

我正在尝试实现一些应该非常简单的东西，但我被卡住了。

这是我正在尝试做的事情：一个 UserControl，它只是边框前面的一个 FontAwesome 图标。

这里是我的UCxaml

<UserControl
x:Class="Project.Views.UC.UC_CircledIcons"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Project.Views.UC"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:fa="using:FontAwesome5.UWP"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
d:DesignHeight="200"
d:DesignWidth="200">
<Border Style="{StaticResource BorderStyle1}"  Height="{Binding Height}" Width="{Binding Width}" BorderBrush="{Binding MyColor}" VerticalAlignment="Center" HorizontalAlignment="Center">
    <fa:FontAwesome Foreground="{Binding MyColor}" Icon="{Binding MyIcon}" Height="{Binding Height}" Width="{Binding Width}" FontSize="{Binding MyFontSize}" VerticalAlignment="Center" HorizontalAlignment="Center"></fa:FontAwesome>
</Border>

这是我的 UC 的 cs 代码：

namespace Project.Views.UC
{
    public sealed partial class UC_CircledIcons : UserControl
    {
        public UC_CircledIcons()
        {
            this.InitializeComponent();
            this.Height = 200;
            this.Width = 200;
        }

        /// <summary>
        /// Le font size de l'icon est égal à 2.6 fois sa hauteur
        /// </summary>
        public double MyFontSize
        {
            get
            {
                return (double)GetValue(HeightProperty) / 2.6;
            }
        }

        /// <summary>
        /// Pour setter l'icone FontAwesome du composant via l'enum
        /// </summary>
        public static readonly DependencyProperty IconProperty = DependencyProperty.Register("MyIcon", typeof(EFontAwesomeIcon), typeof(UC_CircledIcons), new PropertyMetadata(default(EFontAwesomeIcon)));
        public EFontAwesomeIcon MyIcon
        {
            get
            {
                return (EFontAwesomeIcon)GetValue(IconProperty);
            }
            set
            {
                SetValue(IconProperty, value);
            }
        }

        /// <summary>
        /// Pour setter la color du border et de l'icone en même temps
        /// </summary>
        public static readonly DependencyProperty ColorProperty = DependencyProperty.Register("MyColor", typeof(string), typeof(UC_CircledIcons), new PropertyMetadata(default(string)));
        public string MyColor
        {
            get {
                return (string)GetValue(ColorProperty);
            }
            set {
                SetValue(ColorProperty, value);
            }
        }
    }
}

如果我像这样在我的 xaml 页面中静态使用我的 UserControls，这工作正常：

<uc:UC_CircledIcons MyColor="#321654" MyIcon="Solid_Check"></uc:UC_CircledIcons>

但我正在尝试动态设置此 UC 的颜色和图标。所以我想使用绑定来实现这一点。像 :

<uc:UC_CircledIcons MyColor="{Binding MainIconColor}" MyIcon="{Binding MainIcon}"></uc:UC_CircledIcons>

就像我通过绑定到我的 ViewModel 的任何属性来处理任何文本块内容一样。但是对于我的 UserControl，这是行不通的。在输出 windows 中，我可以看到绑定错误：

Error: BindingExpression path error: 'MainIcon' property not found on 'Project.Views.UC.UC_CircledIcons'. BindingExpression: Path='MainIcon' DataItem='Project.Views.UC.UC_CircledIcons'; target element is 'Project.Views.UC.UC_CircledIcons' (Name='null'); target property is 'MyIcon' (type 'EFontAwesomeIcon')

而且我认为这是由以下行引起的：

DataContext="{Binding RelativeSource={RelativeSource Self}}"

在我的 UserControl 代码中。似乎 xaml 正在我的 USerControl 定义中寻找一个名为 MainIcon 的属性或者这个属性是我的 ViewModel 的一部分。

我哪里遗漏了什么？有什么办法可以实现我想要做的事情吗？非常感谢您的帮助。

Answer 1

将 DataContext="{Binding RelativeSource={RelativeSource Self}}" 替换为 Name="uc" 并使用 ElementName:

绑定到属性

<Border ... BorderBrush="{Binding MyColor, ElementName=uc}" ... />

然后 UserControl 应按预期继承其 DataContext，但您仍然可以在其 XAML 标记中绑定到控件本身的属性。

UserControl 中的绑定问题

Binding issue in UserControl

uwp

uwp-xaml