将包装的视图模型绑定到 TabControl

Question

我一直在尝试自动填充我的 TabControl，并且一直在查看这个，尽管它没有完全涵盖包装的 VM，我无法弄明白。

我的 MainViewModel

public class MainActionViewModel : ViewModelBase
{
    private readonly IDialogService dialogService;

    public ObservableCollection<ViewVM> Views { get; set; }

    public MainActionViewModel(IDialogService dialogService)
    {
        this.dialogService = dialogService;

        ObservableCollection<ViewVM> views = new ObservableCollection<ViewVM>
        {
            new ViewVM{ ViewDisplay="Inspections", ViewType = typeof(InspectionsView), ViewModelType = typeof(InspectionsViewModel)},
            new ViewVM{ ViewDisplay="Defects", ViewType = typeof(SecurityView), ViewModelType = typeof(SecurityViewModel)},
            new ViewVM{ ViewDisplay="Planned Works", ViewType = typeof(SecurityView), ViewModelType = typeof(SecurityViewModel)},
            new ViewVM{ ViewDisplay="Security", ViewType = typeof(SecurityView), ViewModelType = typeof(SecurityViewModel)}
        };
        Views = views;
        RaisePropertyChanged("Views");
    }
}

我的主视图

<Window x:Class="AptAction.MainAction"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:AptAction"
      mc:Ignorable="d" 
      d:DesignHeight="500" d:DesignWidth="700"
      Title="AptAction">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TabControl Grid.Row="1"  ItemsSource="{Binding Views}" SelectedIndex="0">
            <TabControl.Resources>
                <DataTemplate DataType="{x:Type local:InspectionsViewModel}">
                    <local:InspectionsView/>
                </DataTemplate>
                <DataTemplate DataType="{x:Type local:SecurityViewModel}">
                    <local:SecurityView/>
                </DataTemplate>
            </TabControl.Resources>
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ViewDisplay}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
        </TabControl>
        <TextBlock x:Name="UIMessage" Text="" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,8,0" Foreground="{StaticResource DarkBrightBrush}"/>
        <ContentControl x:Name="Holder" Grid.Row="2" />
    </Grid>
</Window>

TabItems 的内容是显示描述 LibsView.ViewVM，我需要什么 change/add 才能使其正确显示实际视图？

Answer 1

您应该将 InspectionsViewModel 和 SecurityViewModel 的实例添加到您的 ObservableCollection 而不是向其添加 ViewVM 对象。

创建一个公共基础 class（或接口），InspectionsViewModel 和 SecurityViewModel 都从中继承并将集合类型更改为 ObservableCollection<BaseType>:

public MainActionViewModel()
{
    ObservableCollection<BaseType> views = new ObservableCollection<BaseType>
            {
                new InspectionsViewModel(),
                new SecurityViewModel()
            };
    Views = views;
}

您也可以使用 ObservableCollection<object>，因为您的两个 class 已经隐式继承自 object。

将包装的视图模型绑定到 TabControl

Binding wrapped viewmodels to TabControl

c#

wpf

xaml

tabcontrol

mvvm