WPF DataTemplate和Binding [英] WPF DataTemplate and Binding

问题描述

我通过 MSDN代码继续了解MVVC我有一个问题。

在.xaml中，他们有一个显示在屏幕上的命令列表。

 < Border 
 Grid.Column =0
 Style ={StaticResource MainBorderStyle}
宽度=170
> ; 
< HeaderedContentControl 
 Content ={Binding Path = Commands}
 ContentTemplate ={StaticResource CommandsTemplate}
标题=控制面板
样式= {StaticResource MainHCCStyle}
 /> 
< / Border> 
  

从这里，我明白DataContext已设置（此处未显示），它将显示集合的命令。我不明白的是CommandsTemplate，您可以在下面看到：

 < DataTemplate x：Key =CommandsTemplate> 
< ItemsControl IsTabStop =FalseItemsSource ={Binding}Margin =6,2> 
< ItemsControl.ItemTemplate> 
< DataTemplate> 
< TextBlock Margin =2,6> pou 
< Hyperlink Command ={Binding Path = Command}> 
< TextBlock Text ={Binding Path = DisplayName}/> 
< / Hyperlink> 
< / TextBlock> 
< / DataTemplate> 
< /ItemsControl.ItemTemplate> 
< / ItemsControl> 
< / DataTemplate> 
  

如何创建绑定？这个代码如何告诉从集合中的对象检查属性Command和DisplayName？是来自ItemsSource吗？如果是，我不明白为什么只有在{Binding}。任何人都可以解释一下DataTemplate绑定是如何从ContentTemplate工作的？

解决方案

正如你所说，DataContext设置为ViewModel类，所以您在XAML中提到的控件将能够访问该ViewModel的公共属性。

例如：

  private ObservableCollection< Commander> commands = new ObservableCollection< Commander>（）; 
 
 public ObservableCollection< Commander>命令{
 get {return commands; } 
 set {commands = value; } 
} 
  

Commander类的结构。

  public class Commander {
 public ICommand Command {get;组; } 
 public string DisplayName {get;组; $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ 
 
 
 
 
该属性可以从XAML访问。 
 
 
 
您可以想象HeaderedContentControl是一个容器。该HeaderedContentControl的内容是一个DataTemplateCommandsTemplate，它具有ItemsControl，并且它绑定到VM的Commands属性。 
 
 
 
 Content ={Binding Path = Commands}
 
 
 
然后，您可以使用命令绑定ItemControl但是ItemControl位于绑定到Commands的内容中。所以你不需要再次指定路径。您可以使用
  ItemsSource ={Binding}而不是ItemsSource ={Binding Commands}。 
  
在ItemControl内部有两个文本块，因此它们与Commands ObservableCollection的Commander类处于同一级别。这就是为什么你可以直接访问Text ={Binding Path = DisplayName}的原因。 
 
 
 
希望有帮助。 
 
I continue my understanding of MVVC with the code of MSDN and I have a question.

In the .xaml they have a list of commands displayed to the screen.
   <Border 
    Grid.Column="0" 
    Style="{StaticResource MainBorderStyle}"
    Width="170"
    >
    <HeaderedContentControl
      Content="{Binding Path=Commands}"
      ContentTemplate="{StaticResource CommandsTemplate}"
      Header="Control Panel"
      Style="{StaticResource MainHCCStyle}"
      />
  </Border>
From here, I understand that the DataContext is set (not shown here) and it will display the collection of Commands. What I do not understand is the CommandsTemplate that you can see below:
<DataTemplate x:Key="CommandsTemplate">
<ItemsControl IsTabStop="False" ItemsSource="{Binding}" Margin="6,2">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <TextBlock Margin="2,6">pou
        <Hyperlink Command="{Binding Path=Command}">
          <TextBlock Text="{Binding Path=DisplayName}" />
        </Hyperlink>
      </TextBlock>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
How does the binding is created? How this code tell to check the property Command and DisplayName from the object inside the collection? Is it from the ItemsSource? If yes, I do not understand why it's only at {Binding}. Anyone can explain me please how the DataTemplate binding work from a ContentTemplate?
解决方案
As you said, the DataContext is set to the ViewModel class so the control that you mentioned in XAML will be able to access the public properties of that ViewModel. 

For example: 
private ObservableCollection<Commander> commands = new ObservableCollection<Commander>();

    public ObservableCollection<Commander> Commands {
        get { return commands; }
        set { commands = value; }
    }
The structure of Commander class. 
public class Commander {
    public ICommand Command { get; set; }
    public string DisplayName { get; set; }
}
That VM has the property called Commands which might be ObservableCollection. This property can be accessible from XAML. 

You can imagine that HeaderedContentControl is a container. The content of that HeaderedContentControl is a DataTemplate "CommandsTemplate" that has a ItemsControl and it bind to the Commands property of VM. 

Content="{Binding Path=Commands}"

And then, you can to bind ItemControl with Commands again but that ItemControl is inside the content that bind to Commands. So you don't need to specify the path again. You can just use 
 ItemsSource="{Binding}" instead of ItemsSource="{Binding Commands}".
Two textblocks are inside ItemControl so they are at the same level as Commander class of Commands ObservableCollection. That's why you can access Text="{Binding Path=DisplayName}" directly. 

Hope it helps. 

                        
这篇关于WPF DataTemplate和Binding的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！