Показать пользовательский элемент управления Просмотр внутри элемента вкладки, когда выбран элемент вкладки

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;
}

Это работает, только если все вкладки одинаковы. Существует также решение, если вам нужны разные пользовательские элементы управления для каждой вкладки. В этом случае вам необходимо указать шаблон данных для содержимого элемента вкладки. По сути, вы можете сказать ему загружать пользовательские элементы управления в зависимости от типа модели представления. К сожалению, я не знаю, как это сделать, но я видел примеры для этого. Я знаю, что это не точный ответ, который вам нужен, но я надеюсь, что это поможет!