Tabcontrol MVVM light 视图模型绑定

Question

我正在使用 Galasoft MVVM Light Framework。

我想要实现的是：

我目前得到的是：

我的所有视图模型都在我的 MainViewModel.cs 中静态声明为实例字段，因此它们在 windows:

之间切换时保持状态

    #region Viewmodels init.
    readonly static InputViewModel _inputViewModel = new InputViewModel();
    [...]
    readonly static LicensesViewModel _licensesViewModel = new LicensesViewModel();
    readonly static PricesViewModel _pricesViewModel = new PricesViewModel();
    #endregion

在我的输入用户控件中，我显示了一个选项卡控件。在每个 tabitem 中，我将一个新的用户控件绑定为 view

<UserControl>
        <DockPanel>
            <TabControl>
                <TabItem Header="Prices">
                    <local:PricesControl DataContext="{x:Type viewModels:PricesViewModel}" />
                </TabItem>
                <TabItem Header="Licenses">
                    <local:LicenseControl DataContext="{x:Type viewModels:LicensesViewModel}" />
                </TabItem>
            </TabControl>
        </DockPanel>
    </UserControl>

但是我无法将视图模型绑定到视图。选项卡控件始终位于输入视图模型的数据上下文中。

非常感谢任何建议！

Answer 1

不要在 MainViewModel 中使用 static 字段，这是一个糟糕的设计决定，会使您的代码不可测试。

改为使用 WPF 强大的数据模板机制。

class MainViewModel : INotifyPropertyChanged
{
    // Note: this is just a sample.
    // You might want to inject the instances via DI
    public IEnumerable<INotifyPropertyChanged> TabItems { get; } =
        new[] { new PricesViewModel(), new LicensesViewModel() };
}

为您的视图模型使用数据模板：

<TabControl ItemsSource="{Binding TabItems}" DisplayMemberPath="PropertyNameForTabHeader">
    <TabControl.Resources>
        <DataTemplate DataType="{x:Type viewModels:PricesViewModel}">
            <local:PricesControl/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type viewModels:LicensesViewModel}">
            <local:LicenseControl/>
        </DataTemplate>
    </TabControl.Resources>
</TabControl>

DisplayMemberPath 属性指定选项卡项视图模型的名称属性用作选项卡的 header。

通过这种方法，您的设计是动态的和可扩展的。

Tabcontrol MVVM light 视图模型绑定

Tabcontrol MVVM light viewmodel binding

c#

wpf

mvvm

mvvm-light