WPF绑定到视图和viewmodel的属性上。

Question

这本来是一个关于Teleriks TabbedWindow控件的问题，但它实际上是一个通用的问题。在一个ItemTemplate中，我如何绑定到 两者 视图模型的视图和属性

下面，我的数据源是一个视图的列表（即UserControls）。我想让View呈现在ContentControl中，并在头部呈现viewmodel的一些属性。

<telerik:RadTabbedWindow x:Class="Porter.Application.Views.MainWindow"
        ...
        ItemsSource="{Binding Tabs2}">
        
    <telerik:RadTabbedWindow.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DataContext.TabHeader}" />
        </DataTemplate>
    </telerik:RadTabbedWindow.ItemTemplate>
    <telerik:RadTabbedWindow.ContentTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding}" />
        </DataTemplate>
    </telerik:RadTabbedWindow.ContentTemplate>

</telerik:RadTabbedWindow>

从mm8回答后的更新结果

<telerik:RadTabbedWindow
     ItemsSource="{Binding Tabs2}" <!--list of ViewModels (lets say ViewModelBase.cs)-->
  ...>

<telerik:RadTabbedWindow.Resources>
        <DataTemplate DataType="{x:Type acc:SearchAccountsViewModel}">
            <acc:SearchAccountsView/>
        </DataTemplate> 
        <DataTemplate DataType="{x:Type hello:HelloWorldViewModel}">
            <hello:HelloWorldView/>
        </DataTemplate>

 </telerik:RadTabbedWindow.Resources>

    <telerik:RadTabbedWindow.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding TabHeader}" />
        </DataTemplate>
    </telerik:RadTabbedWindow.ItemTemplate>
    <telerik:RadTabbedWindow.ContentTemplate>
        <DataTemplate >
            <ContentControl Content="{Binding}" />
        </DataTemplate>
    </telerik:RadTabbedWindow.ContentTemplate>

</telerik:RadTabbedWindow>

Answer 1

在 Tab2 属性应该返回一个 IEnumerable<T> 其中类型 T 有一些你在XAML标记中绑定的公共属性。

例如，它可能有一个 TabHeader 属性，您可以将标签页的页眉绑定到 ItemTemplate 像这样。

<telerik:RadTabbedWindow x:Class="Porter.Application.Views.MainWindow"
        ...
        ItemsSource="{Binding Tabs2}">

    <telerik:RadTabbedWindow.ItemTemplate>
        <DataTemplate>
            <TextBlock Text = "{Binding TabHeader}" />
        </ DataTemplate >
    </ telerik:RadTabbedWindow.ItemTemplate>

</telerik:RadTabbedWindow>

The ContentTemplate 只要您定义了一个叫 DataTemplate 为类型 T 范围内 RadTabbedWindow例如，在你的 App.xaml. 在这个模板中，你可以添加你的 UserControl:

<DataTemplate DataType="{x:Type local:YourClass}">
    <local:UserControl1 />
</DataTemplate>

你不应该创建一个 UserControl 视图模型中，并将其添加到 Tabs2. 这就打破了MVVM模式的宗旨，即关注点的分离。视图模型并不能创建视图。

如果你不需要一个隐式的 DataTemplate 在 App.xaml当然，你也可以定义 ContentTemplate inline。

<telerik:RadTabbedWindow x:Class="Porter.Application.Views.MainWindow"
        ...
        ItemsSource="{Binding Tabs2}">

    <telerik:RadTabbedWindow.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding TabHeader}" />
        </DataTemplate>
    </telerik:RadTabbedWindow.ItemTemplate>
    <telerik:RadTabbedWindow.ContentTemplate>
        <DataTemplate>
            <local:UserControl1 />
        </DataTemplate>
    </telerik:RadTabbedWindow.ContentTemplate>

</telerik:RadTabbedWindow>

关键是你要绑定的属性是： T 在两个模板中，并且 T 是一个POCO，而不是某种控制。