通过 UserControls 进行 WPF 数据绑定

Question

我想从主窗口的 DataContext 中绑定属性，上面你可以看到我的 UserControls 和模型。所以我想将 Model.ID.Label1 和 Model.ID.Label2 属性绑定到 main_id/card_1/top 和 main_id/card_1/bottom 控件。我希望这很清楚。如果我启用 ref_lbl 标签它将显示“lbl1”，card_2 仍在使用硬编码文本，但 card_1 将为空白。我应该修改什么来修复 card_1 上的绑定？

我有一个 ID UserControl，它包含另一个 UserControl。

XAML：

<UserControl x:Class="stack.ID"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:Controls="clr-namespace:stack.Controls"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Label Name="ref_lbl" Grid.Row="0" Content="{Binding Label1}" Visibility="Collapsed" />
    <Controls:Card x:Name="card_1" Grid.Row="0" TopLabel="{Binding Label1}" BottomLabel="{Binding Label2}" />
    <Controls:Card x:Name="card_2" Grid.Row="1" TopLabel="Text 1" BottomLabel="Text 2" />
</Grid>

代码隐藏：默认，自动生成

这里是 Card UserControl。

XAML：

<UserControl x:Class="stack.Controls.Card"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300" DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Label Grid.Row="0" FontSize="20" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding TopLabel}" />
    <Label Grid.Row="1" FontSize="20" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding BottomLabel}" />
</Grid>

代码背后：

namespace stack.Controls
{
    public partial class Card : UserControl
    {
        public static readonly DependencyProperty TopLabelProperty = DependencyProperty.Register("TopLabel", typeof(string), typeof(Card), new PropertyMetadata(default(string)));
        public static readonly DependencyProperty BottomLabelProperty = DependencyProperty.Register("BottomLabel", typeof(string), typeof(Card), new PropertyMetadata(default(string)));
        public Card()
        {
            InitializeComponent();
        }
        public string TopLabel
        {
            get
            {
                return (string)GetValue(TopLabelProperty);
            }
            set
            {
                SetValue(TopLabelProperty, value);
            }
        }
        public string BottomLabel
        {
            get
            {
                return (string)GetValue(BottomLabelProperty);
            }
            set
            {
                SetValue(BottomLabelProperty, value);
            }
        }
    }
}

这是我的主窗口。

XAML：

<Window x:Class="stack.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:stack"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <local:Model />
</Window.DataContext>
<Grid>
    <local:ID x:Name="main_id" DataContext="{Binding ID}" />
</Grid>

代码隐藏：默认，自动生成

我也有两个模型。

namespace stack
{
    public class IDModel
    {
        private string label1 = "lbl1";
        private string label2 = "lbl2";
        public string Label1
        {
            get
            {
                return label1;
            }
            set
            {
                label1 = value;
            }
        }
        public string Label2
        {
            get
            {
                return label2;
            }
            set
            {
                label2 = value;
            }
        }
    }
    public class Model
    {
        private IDModel id = new IDModel();
        public IDModel ID
        {
            get
            {
                return id;
            }
            set
            {
                id = value;
            }
        }
    }
}

Answer 1

删除

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

来自Card 的 XAML。

它防止从它的父ID控件继承DataContext，这在你编写时是必要的

<Controls:Card ... TopLabel="{Binding Label1}" />

改为在Card 的XAML 中编写Content 绑定，如下所示：

<Label ... Content="{Binding TopLabel,
    RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" />