UserControl 的 DataContext

Question

我正在创建一个UserControl 我想使用这样的东西：

<controls:ColorWithText Color="Red" Text="Red color" />

到目前为止，我已经实现了类似的控件：

<UserControl x:Class="Namespace.ColorWithText" Name="ThisControl">
    <StackPanel Orientation="Horizontal" >
        <Border Width="15" Height="15" Background="{Binding Color, ElementName=ThisControl}" />
        <TextBlock Text="{Binding Text, ElementName=ThisControl}" />
    </StackPanel>
</UserControl>

其中Color 和Text 是代码中定义的控件的依赖属性。这可行，但似乎没有必要每次都指定ElementName。

另一个有效的选项是使用

<UserControl x:Class=… DataContext="{Binding ElementName=ThisControl}" Name="ThisControl">

并没有指定ElementNames，但这对我来说似乎也不是一个干净的解决方案。

我有两个问题：

1. 为什么<UserControl DataContext="{RelativeSource Self}"> 不起作用？
2. 执行此类操作的最佳方法是什么？

Answer 1

我知道这个问题已经得到解答，但没有任何解释能说明DataContext 及其工作原理。这个链接在这方面做得很好。

EVERYTHING YOU WANTED TO KNOW ABOUT DATABINDING IN WPF, SILVERLIGHT AND WP7 (PART TWO)

回答您的问题 #1

为什么<UserControl DataContext="{RelativeSource Self}"> 不起作用？

这是上述链接的摘要。 DataContext 不应在 UserControl 元素级别设置为 Self。这是因为它破坏了DataContext 的继承。如果您确实将其设置为 self 并且将此控件放置在 Window 或其他控件上，它将不会继承 Windows DataContext。

DataContext 被继承到 XAML 的所有较低元素和 UserControls 的所有 XAML，除非它在某处被覆盖。通过将UserControl DataContext 设置为自身，这将覆盖DataContext 并破坏继承。相反，将其嵌套在 XAML 中的一个元素深处，在您的情况下为 StackPanel。将DataContext绑定放在这里，绑定到UserControl。这会保留继承。

有关此内容的详细说明，另请参阅下面的此链接。

A SIMPLE PATTERN FOR CREATING RE-USEABLE USERCONTROLS IN WPF / SILVERLIGHT

回答您的问题 #2
做这种事情的最佳方法是什么？

参见下面的代码示例。

<UserControl x:Class="Namespace.ColorWithText" Name="ThisControl">
    <StackPanel Orientation="Horizontal" DataContext="{Binding ElementName=ThisControl}">
        <Border Width="15" Height="15" Background="{Binding Color" />
        <TextBlock Text="{Binding Text}" />
    </StackPanel>
</UserControl>

请注意，执行此操作后，您将不需要在每个绑定上使用 ElementName。

Answer 2

为什么不能使用<UserControl DataContext="{RelativeSource Self}">？

这就是你将如何使用控件

<Grid DataContext="{StaticResource ViewModel}">
    <!-- Here we'd expect this control to be bound to -->
    <!-- ColorToUse on our ViewModel resource          -->
    <controls:ColorWithText Color="{Binding ColorToUse}" />
</Grid>

现在，因为我们在控件中硬编码了数据上下文，它会尝试在 ColorWithText 对象而不是您的 ViewModel 上查找 ColorToUse 属性，这显然会失败。

这就是你不能在用户控件上设置 DataContext 的原因。感谢Brandur 让我明白这一点。

做这种事情的最佳方法是什么？

相反，您应该在控件的第一个子 UI 元素中设置 DataContext。

在你的情况下，你想要

<StackPanel 
  DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
  Orientation="Horizontal" >

现在您有了一个引用控件的 DataContext，因此您可以使用相对绑定访问该控件的任何属性。

Answer 3

您应该使用

{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=Color}

对于数据绑定相关的疑问，请始终参考此表。
http://www.nbdtech.com/Blog/archive/2009/02/02/wpf-xaml-data-binding-cheat-sheet.aspx

Answer 4

第一个，试试：

<UserControl DataContext="{Binding RelativeSource={RelativeSource Self}}">

对于第二个问题，我认为使用ElementName 或AncestorBinding 是绑定UserControl 属性的最佳方式。

Answer 5

您可以在构造函数本身中将 datacontext 设置为 self。

public ColorWithText()
{
 InitializeComponent();
 DataContext = this;
}

现在你可以简单地说

<UserControl x:Class="Namespace.ColorWithText" Name="ThisControl">
    <StackPanel Orientation="Horizontal" >
        <Border Width="15" Height="15" Background="{Binding Color}" />
        <TextBlock Text="{Binding Text}" />
    </StackPanel>
</UserControl>