WPF 绑定到视图和视图模型的属性

Question

这本来是关于 Teleriks TabbedWindow 控件的问题，但它确实是一个通用的。问题。在 ItemTemplate 中，如何绑定到 both viewmodel

的视图和属性

下面，我的数据源是一个视图列表（即用户控件）。我想在 ContentControl 中显示视图，在 header.

中显示视图模型的一些属性

<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 属性应该 return 一个 IEnumerable<T> 其中类型 T 有一些 public 您绑定到的属性XAML 标记。

例如，它可能有一个 TabHeader 属性，您可以将选项卡的 header 绑定到 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>

如果您在 RadTabbedWindow 的范围内为类型 T 定义了 DataTemplate，例如在您的 App.xaml。您可以在此模板中添加 UserControl:

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

您不应在视图模型中创建 UserControl 并将其添加到 Tabs2。这打破了 MVVM 模式的全部内容，即关注点分离。视图模型不创建视图。

如果您不 have/want 在 App.xaml 中隐含 DataTemplate，您当然也可以定义 ContentTemplate 内联：

<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 而不是某种控件。

WPF 绑定到视图和视图模型的属性

WPF binding to both view and viewmodel´s properties

wpf

xaml

telerik