选择选项卡项目后在选项卡项目内显示用户控件视图

Question

我创建了几个UserControl视图，现在我想在单击选项卡项目时显示相应的视图。因此，一个选项卡项将获得一种视图。我想在MVVM中执行此操作，但不知道如何操作。

[请看下面的代码，并给我一些有关如何实现的建议：

MainView（仅具有TabControl）：

...
<TabControl Name="pnlFormButtons" 
                Margin="25"                     
                Background="Black"
                SelectedItem="{Binding SelTab}"
                >
        <TabItem Name="tabInventurartikel" Header="Inventurartikel hinzufügen"
                 Background="BlanchedAlmond" Foreground="Black"
                 FontFamily="Verdana"
                 BorderBrush="Black"
                 >
        </TabItem>
        <TabItem Name="tabSonderartikel" Header="Sonderartikel hinzufügen"
                 Background="BlanchedAlmond" Foreground="Black"
                 FontFamily="Verdana"
                 BorderBrush="Black"
                 BorderThickness="2">
        </TabItem>
        <TabItem Name="tabAnlegen" Header="Lieferschein anlegen"
                 Background="BlanchedAlmond" Foreground="Black"
                 FontFamily="Verdana"
                 BorderBrush="Black"
                 BorderThickness="2"
                 IsEnabled="False">
        </TabItem>
        <TabItem Name="tabDrucken" Header="Lieferschein drucken"
                 Background="BlanchedAlmond" Foreground="Black"
                 FontFamily="Verdana"
                 BorderBrush="Black"
                 BorderThickness="2"
                 IsEnabled="False">
        </TabItem>

        <TabItem Name="tabHilfeseite" Header="Hilfeseite aufrufen"
                 Background="BlanchedAlmond" Foreground="Black"
                 FontFamily="Verdana"
                 BorderBrush="Black"
                 BorderThickness="2"
                 IsEnabled="False">
        </TabItem>
        <TabItem Name="tabFehlerMelden" Header="Fehler bzw. Bug melden"
                 Background="BlanchedAlmond" Foreground="Black"
                 FontFamily="Verdana"
                 BorderBrush="Black"
                 BorderThickness="2"
                 IsEnabled="False">
        </TabItem>

    </TabControl>
...

MainViewModel（仅相关代码）：

...
    //Binding Property SelTab - It binds to the selected tab item
        private string _selTab;
                public string SelTab
                {
                    get { return _selTab; }
                    set 
                    {
                        _selTab = value;
                        OnPropertyChanged("SelTab"); //INotifyPropertyChanged
                        GetSelTab(); //check which tab item is selected and display the corresponding view
                    }
                }
            public void GetSelTab()
                {
                    UserControl usc = null; //initialize user control object
                    switch(SelTab) //which tab item is selected?
                    {
                        case "tabInventurartikel": // = TabControl.SelectedItem
                            usc = new Inventurartikel(); //Initialize (Show) Inventurartikel.xaml
                            SelTab.Content = usc; //Here I don't know how to actually show the view in the tab item because SelectedItem.Content does not exist...
                            break;
                        case "tabSonderartikel":
                            usc = new neuerArtikel(); //same problem here...
                            break;
                        default:
                            break;
                    }
                }
...

注意：

选项卡项目的视图基本上只是用户控制表单，当选择相应的选项卡项目时，我想在选项卡项目内显示它们。我不应该将它们发布在这里，因为我想将重点放在实际问题上尽可能简单和清楚。非常感谢您的帮助！

Answer 1

最简单的解决方案是将选项卡控件的项目源绑定到视图模型列表。然后，如果您添加/删除视图模型，则会相应地添加/删除选项卡。

主窗口xaml：

<Grid>
        <Grid.Resources>
            <DataTemplate x:Key="CustomHeaderTemplate">
                <Label Content="{Binding TabName}" />
            </DataTemplate>
        </Grid.Resources>

        <TabControl x:Name="tbCtrl" ItemsSource="{Binding Items}" Loaded="tbCtrl_Loaded" SelectionChanged="tbCtrl_SelectionChanged" ItemTemplate="{StaticResource CustomHeaderTemplate}">
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <uc:DeviceTab/>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
</Grid>

重要的是绑定ItemSource。

制表符控件视图模型：

class TabControlViewModel
{
    public ObservableCollection<ItemViewModel> Items { get; } = new ObservableCollection<ItemViewModel>();
}

在Loaded事件后面显示制表控制代码。在这里，您可以添加视图模型，并且选项卡控件会相应地设置选项卡：

private void tbCtrl_Loaded(object sender, RoutedEventArgs e)
{
    var tabControlViewModel = new TabControlViewModel();
    tabControlViewModel.Items.Add(new ItemViewModel());
    DataContext = tabControlViewModel;
    tbCtrl.SelectedIndex = 0;
}

仅在所有选项卡都相同的情况下才有效。如果每个选项卡都需要不同的用户控件，则还有一个解决方案。在这种情况下，您需要为选项卡项目的内容指定数据模板。基本上，您可以告诉它根据视图模型的类型来加载用户控件。不幸的是，我不知道该怎么做，但是我已经看到了一些例子。我知道这不是您需要的确切答案，但希望对您有帮助！