如何重用 WPF 用户控件但更改绑定属性？答案

【问题标题】：How can I reuse a WPF user control but change a bound property?如何重用 WPF 用户控件但更改绑定属性？
【发布时间】：2017-10-08 14:00:16
【问题描述】：

我有一个 WPF 用户控件，它使用我的视图模型中的属性进行绑定。我现在想使用具有相同视图模型的该用户控件的两个实例，但覆盖其中一个中的绑定。

代码如下所示

用户控制

<UserControl x:Class="TestWpfApp.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:TestWpfApp">
    <Grid>
        <DockPanel>
            <Label Margin="10" Content="{Binding MyLabel}"/>
            <Button Margin="10" Content="{Binding MyButton}"/>
        </DockPanel>
    </Grid>
</UserControl>

主视图

<Window x:Class="TestWpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TestWpfApp"
        Title="MainWindow" Height="150" Width="525">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Grid>
        <DockPanel>
            <local:UserControl1 DockPanel.Dock="Top" x:Name="UserControl1"/>
            <!--In this instance of UserControl1, I want the Label to bind to the MyNewLabel-->
            <local:UserControl1 DockPanel.Dock="Top" x:Name="UserControl2"/>
        </DockPanel>
    </Grid>
</Window>

视图模型

public class ViewModel
{
    public string MyLabel => "Label1";
    public string MyButton => "Button1";
    public string MyNewLabel => "Label2";
}

在UserControl1 的第二个实例中，我希望将标签绑定到不同的属性。我尝试将该属性设置为用户控件上的资源，然后在主视图中覆盖它，但我无法让它工作。

实际上，我正在使用 DevExpress 控件和 POCO 视图模型，如果这样可以让事情变得更容易的话。

【问题讨论】：

标签： c# wpf xaml mvvm devexpress

【解决方案1】：

创建自定义控件时 - 将自定义控件内部的控件绑定到外部数据上下文提供的任意属性并不是一个好主意。不仅您遇到了像现在这样的问题，该控件的用户也不知道他应该为该控件提供哪些数据上下文和哪些属性才能工作。仅查看 UserControl 的源代码可能会发现它需要具有属性MyLabel 和MyButton 的数据上下文。相反 - 通过在控件本身上引入依赖属性来使控件自包含：

public partial class UserControl1 : UserControl {
    public UserControl1() {
        InitializeComponent();
    }

    public string Text
    {
        get { return (string) GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(UserControl1), new PropertyMetadata(null));

    public string ButtonText
    {
        get { return (string) GetValue(ButtonTextProperty); }
        set { SetValue(ButtonTextProperty, value); }
    }

    public static readonly DependencyProperty ButtonTextProperty =
        DependencyProperty.Register("ButtonText", typeof(string), typeof(UserControl1), new PropertyMetadata(null));
}

并绑定到这些属性：

<UserControl x:Class="WpfApplication1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                          
             x:Name="self">
    <Grid>
        <DockPanel>
            <Label Margin="10"
                   Content="{Binding Text, ElementName=self}" />
            <Button Margin="10"
                    Content="{Binding ButtonText, ElementName=self}" />
        </DockPanel>
    </Grid>
</UserControl>

然后在主窗口中 - 将这些依赖属性绑定到您的模型：

<Window.DataContext>
    <my:ViewModel />
</Window.DataContext>
<Grid>
    <DockPanel>
        <my:UserControl1 DockPanel.Dock="Top"
                            x:Name="UserControl1" Text="{Binding MyLabel}" ButtonText="{Binding MyButton}" />
        <!--In this instance of UserControl1, I want the Label to bind to the MyNewLabel-->
        <my:UserControl1 DockPanel.Dock="Top"
                         x:Name="UserControl2"
                         Text="{Binding MyNewLabel}"
                         ButtonText="{Binding MyButton}" />
    </DockPanel>
</Grid>

【讨论】：