wpf 使用 DataTemplate 将 View 连接到 ViewModel

connect View to ViewModel with DataTemplate

提问by Programmer

I'm trying to understand. When I'm connecting View to ViewModel like this:

我试图理解。当我像这样将 View 连接到 ViewModel 时：

    <DataTemplate DataType="{x:Type local:MyViewModel}">
        <local:MyView />
    </DataTemplate>

What does it mean?

这是什么意思？

It looks like the View is set to be the DataTemplate of the ViewModel. BUT the ViewModel doesn't have a Property of DataTemplate. So what exactly is going on in there?

看起来 View 被设置为 ViewModel 的 DataTemplate。但是 ViewModel 没有 DataTemplate 的属性。那么里面到底发生了什么？

A demonstration of the question - How do I do that by code (Connecting the View and ViewModel this specific way. I can't write ViewModel.DataTemplate = View)?

问题的演示 - 我如何通过代码做到这一点（以这种特定方式连接视图和视图模型。我无法编写 ViewModel.DataTemplate = View）？

Thank you.

谢谢你。

回答by Nitin

It means "To whatever control whose Content data is MyViewModel place MyView there". You are not setting DataTemplate of viewmodel (That does not mean anything) you are setting the DataTemplate for the control whose Data is MyViewModel.

它的意思是“对于内容数据为 MyViewModel 的任何控件，将 MyView 放在那里”。您没有设置 viewmodel 的 DataTemplate（这并不意味着什么），而是为数据为 MyViewModel 的控件设置了 DataTemplate。

回答by eran otzap

Take for example an ItemsControl with an Items Source of

以 ItemsControl 为例，其 Items Source 为

ObservableCollection<Employee> Employees  

where each Employee is represented by a DataTemplate for Example :

其中每个 Employee 由一个 DataTemplate 表示，例如：

<DataTemplate TargetType="{x:Type local:Employee}">
       <StackPanel>
           <TextBlock Text="{Binding FirstName}" />
           <TextBlock Text="{Binding LastName}" />
       </StackPanel> 
</DataTemplate>

So in the same manner a MyViewModel.cs such as Employee.cs as a visual representation based on a DataTemplate .

因此，以相同的方式将 MyViewModel.cs（例如 Employee.cs）作为基于 DataTemplate 的可视化表示。

and represented for example as such :

并例如表示为：

 <ContentControl Content="{Binding MyViewModelProperty}" />

回答by BrightShadow

The way how it works is very simple. Your definition of DataTemplateis something like a definition of how a data will look like. In your example the data that you want to represent visually are of type:

它的工作方式非常简单。您对 的定义DataTemplate类似于对数据外观的定义。在您的示例中，您想要直观表示的数据类型为：

DataType="{x:Type local:MyViewModel}"

DataType="{x:Type local:MyViewModel}"

By defining DataTemplatein control, window or other resources, e.g.

通过DataTemplate在控件、窗口或其他资源中定义，例如

<UserControl.Resources> ...your template... <UserControl.Resources>,

<UserControl.Resources> ...your template... <UserControl.Resources>,

you say "Hey, I want that all my data of type local:MyViewModelwill look like this...". Inside the template you define a root control, that will be put in all places where your local:MyViewModelhave been used. Normally when you place local:MyViewModelin Grid, ContentControl or other containers, you will see its string representation like "xxxx.xxxxx.MyViewModel" instead of visual.

你说“嘿，我希望我的所有类型的数据local:MyViewModel都像这样......”。在模板中，您定义了一个根控件，它将放置在您local:MyViewModel使用过的所有位置。通常，当您放置local:MyViewModel在 Grid、ContentControl 或其他容器中时，您会看到它的字符串表示形式，如“xxxx.xxxxx.MyViewModel”，而不是视觉效果。

To to see a graphical representation you must define a DataTemplate. It will replace the string "xxxx.xxxxx.MyViewModel" - representing your data and put there a visual control you defined in the template. Then when it is done, this representation - control from your DataTemplatewill get DataContext property set to your View Model, here it will be local:MyViewModelinstance.

要查看图形表示，您必须定义一个DataTemplate. 它将替换字符串“xxxx.xxxxx.MyViewModel”——代表您的数据，并将您在模板中定义的视觉控件放在那里。然后当它完成时，这个表示 - 来自您的控制DataTemplate将获得 DataContext 属性设置为您的视图模型，这里它将是local:MyViewModel实例。

That will give you a possibility to use binding in your DataTemplate, to bind in you DataTemplate directly to properties from you ViewModel.

这将使您有可能在 DataTemplate 中使用绑定，将 DataTemplate 中的数据直接绑定到 ViewModel 中的属性。

Is that more clear now?

现在更清楚了吗？