通过用户控件进行WPF数据绑定

本文关键字：WPF 数据绑定 控件 用户 | 更新日期: 2023-09-27 17:54:51

我想从主窗口的DataContext绑定属性，上面你可以看到我的UserControls和models。我想绑定model。id。标签1和型号idLabel2属性到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;
            }
        }
    }
}

通过用户控件进行WPF数据绑定

删除

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

from the Card 's XAML.

它防止从它的父控件ID继承DataContext，这在您编写

时是必要的
<Controls:Card ... TopLabel="{Binding Label1}" />

在Card的XAML中这样写Content绑定:

<Label ... Content="{Binding TopLabel,
    RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" />
相关文章：