如何正确绑定到 MVVM 框架中用户控件的依赖属性

Question

我一直找不到一个干净、简单的示例来说明如何正确在 MVVM 框架内使用具有 DependencyProperty 的 WPF 实现用户控件。每当我为用户控件分配DataContext 时，下面的代码都会失败。

我正在尝试：

1. 从调用 ItemsControl 设置DependencyProperty，然后
2. 使 DependencyProperty 的值可用于被调用用户控件的 ViewModel。

我还有很多东西要学，真诚感谢任何帮助。

这是最顶层用户控件中的ItemsControl，它使用DependencyProperty TextInControl 调用InkStringView 用户控件（来自另一个问题的示例）。

<ItemsControl ItemsSource="{Binding Strings}" x:Name="self" >

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>


    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <DataTemplate.Resources>
                <Style TargetType="v:InkStringView">
                    <Setter Property="FontSize" Value="25"/>
                    <Setter Property="HorizontalAlignment" Value="Left"/>
                </Style>
            </DataTemplate.Resources>

            <v:InkStringView TextInControl="{Binding text, ElementName=self}"  />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这是带有DependencyProperty 的InkStringView 用户控件。

XAML：

<UserControl x:Class="Nova5.UI.Views.Ink.InkStringView"
         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" 
         x:Name="mainInkStringView"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>   
            <RowDefinition/>
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Text="{Binding TextInControl, ElementName=mainInkStringView}" />
        <TextBlock Grid.Row="1" Text="I am row 1" />
    </Grid>
</UserControl>

代码隐藏文件：

namespace Nova5.UI.Views.Ink
{
    public partial class InkStringView : UserControl
    {
        public InkStringView()
        {
            InitializeComponent();
            this.DataContext = new InkStringViewModel();   <--THIS PREVENTS CORRECT BINDING, WHAT
        }                                                   --ELSE TO DO?????

        public String TextInControl
        {
            get { return (String)GetValue(TextInControlProperty); }
            set { SetValue(TextInControlProperty, value); }
        }

        public static readonly DependencyProperty TextInControlProperty =
            DependencyProperty.Register("TextInControl", typeof(String), typeof(InkStringView));

    }
}

Answer 1

这是您永远不应该直接从UserControl 本身设置DataContext 的众多原因之一。

当你这样做时，你不能再使用任何其他 DataContext，因为 UserControl 的 DataContext 被硬编码为只有 UserControl 可以访问的实例，这违背了 WPF 的最大优势之一拥有独立的 UI 和数据层。

在 WPF 中使用UserControls 主要有两种方式

1. 一个独立的UserControl 可以在任何地方使用，而不需要特定的DataContext。

   这种类型的UserControl 通常会为它需要的任何值公开DependencyProperties，并且会像这样使用：

   <v:InkStringView TextInControl="{Binding SomeValue}" />
   

   我能想到的典型示例是任何通​​用的东西，例如 Calendar 控件或 Popup 控件。

2. UserControl 仅用于特定的 Model 或 ViewModel。

   这些UserControls 对我来说更为常见，并且可能是您正在寻找的。我将如何使用这样的 UserControl 的示例如下：

   <v:InkStringView DataContext="{Binding MyInkStringViewModelProperty}" />
   

   或者更频繁地，它将与隐式DataTemplate 一起使用。隐式 DataTemplate 是带有 DataType 而没有 Key 的 DataTemplate，并且 WPF 将在任何时候想要呈现指定类型的对象时自动使用此模板。

   <Window.Resources>
       <DataTemplate DataType="{x:Type m:InkStringViewModel}">
           <v:InkStringView />
       </DataTemplate>
   <Window.Resources>
   
   <!-- Binding to a single ViewModel -->
   <ContentPresenter Content="{Binding MyInkStringViewModelProperty}" />
   
   <!-- Binding to a collection of ViewModels -->
   <ItemsControl ItemsSource="{Binding MyCollectionOfInkStringViewModels}" />
   

   使用此方法时不需要ContentPresenter.ItemTemplate 或ItemsControl.ItemTemplate。

不要把这两种方法混在一起，效果不好:)

---

但无论如何，更详细地解释您的具体问题

当您像这样创建用户控件时

<v:InkStringView TextInControl="{Binding text}"  />

你基本上是在说

var vw = new InkStringView()
vw.TextInControl = vw.DataContext.text;

vw.DataContext 未在 XAML 中的任何位置指定，因此它从父项继承，从而导致

vw.DataContext = Strings[x];

所以设置TextInControl = vw.DataContext.text 的绑定是有效的，并且在运行时解析得很好。

但是，当您在 UserControl 构造函数中运行它时

this.DataContext = new InkStringViewModel();

DataContext 设置为一个值，因此不再自动从父级继承。

所以现在运行的代码如下所示：

var vw = new InkStringView()
vw.DataContext = new InkStringViewModel();
vw.TextInControl = vw.DataContext.text;

当然，InkStringViewModel 没有名为 text 的属性，因此绑定在运行时失败。

Answer 2

似乎您正在将父视图的模型与 UC 的模型混合。

这是一个与您的代码匹配的示例：

MainViewModel：

using System.Collections.Generic;

namespace UCItemsControl
{
    public class MyString
    {
        public string text { get; set; }
    }

    public class MainViewModel
    {
        public ObservableCollection<MyString> Strings { get; set; }

        public MainViewModel()
        {
            Strings = new ObservableCollection<MyString>
            {
                new MyString{ text = "First" },
                new MyString{ text = "Second" },
                new MyString{ text = "Third" }
            };
        }
    }
}

使用它的主窗口：

<Window x:Class="UCItemsControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:v="clr-namespace:UCItemsControl"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <v:MainViewModel></v:MainViewModel>
    </Window.DataContext>
    <Grid>
        <ItemsControl 
                ItemsSource="{Binding Strings}" x:Name="self" >

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Vertical" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>


            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <DataTemplate.Resources>
                        <Style TargetType="v:InkStringView">
                            <Setter Property="FontSize" Value="25"/>
                            <Setter Property="HorizontalAlignment" Value="Left"/>
                        </Style>
                    </DataTemplate.Resources>

                    <v:InkStringView TextInControl="{Binding text}"  />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

你的 UC（没有设置 DataContext）：

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

    public String TextInControl
    {
        get { return (String)GetValue(TextInControlProperty); }
        set { SetValue(TextInControlProperty, value); }
    }

    public static readonly DependencyProperty TextInControlProperty =
        DependencyProperty.Register("TextInControl", typeof(String), typeof(InkStringView));
}

（你的 XAML 没问题）

这样我可以得到我猜是预期的结果，一个值列表：

First
I am row 1
Second
I am row 1
Third
I am row 1

Answer 3

你快到了。问题是您正在为您的 UserControl 创建一个 ViewModel。这是一种气味。

从外部看，用户控件的外观和行为应该与任何其他控件一样。您正确地在控件上公开了属性，并将内部控件绑定到这些属性。都对。

您失败的地方是尝试为所有内容创建 ViewModel。所以放弃那个愚蠢的 InkStringViewModel，让使用该控件的人将他们的视图模型绑定到它。

如果您想问“视图模型中的逻辑呢？如果我摆脱它，我将不得不将代码放入代码隐藏中！”我回答：“它是业务逻辑吗？无论如何都不应该嵌入到您的 UserControl 中。而且 MVVM ！= 没有代码隐藏。为您的 UI 逻辑使用代码隐藏。它属于它。”

Answer 4

你需要在这里做两件事（我假设字符串是ObservableCollection<string>）。

1) 从 InkStringView 构造函数中删除 this.DataContext = new InkStringViewModel();。 DataContext 将是 Strings ObservableCollection 的一个元素。

2) 改变

<v:InkStringView TextInControl="{Binding text, ElementName=self}"  />

到

<v:InkStringView TextInControl="{Binding }" />

您拥有的 xaml 正在 ItemsControl 上寻找“文本”属性以将值 TextInControl 绑定到。我使用 DataContext（恰好是一个字符串）将 TextInControl 绑定到的 xaml。如果 Strings 实际上是一个带有 SomeProperty 字符串属性的 ObservableCollection，您希望将其绑定到该属性，然后将其更改为 this。

<v:InkStringView TextInControl="{Binding SomeProperty}" />