Wie binde ich ein TabControl mithilfe der MVVM-Datenbindung an eine Sammlung von ViewModels?

MVVM-Datenbindung: Verwenden Sie die ViewModel-Sammlung, um TabControl zu binden

In der MVVM-Architektur (Model-View-ViewModel) sollte ViewModel UI-Elemente nicht direkt erstellen. Stattdessen sollte es das Datenmodell verfügbar machen und Bindungen für die Ansichten bereitstellen. Um ein TabControl an eine ViewModel-Sammlung zu binden, ist ein anderer Ansatz erforderlich.

Tab-Seitenmodell erstellen

Implementieren Sie eine Modellklasse, die jede Registerkarte darstellt, einschließlich Eigenschaften für Titel und Inhalt. Zum Beispiel:

<code class="language-csharp">public sealed class TabItem
{
    public string Header { get; set; }
    public string Content { get; set; }
}</code>

ViewModel enthält ObservableCollection

Erstellen Sie eine ViewModel-Eigenschaft für die ObservableCollection von TabItem-Objekten. Füllen Sie diese Sammlung im Konstruktor mit anfänglichen Tabulatoren:

<code class="language-csharp">public sealed class ViewModel
{
    public ObservableCollection<TabItem> Tabs { get; set; }
    public ViewModel()
    {
        Tabs = new ObservableCollection<TabItem>();
        Tabs.Add(new TabItem { Header = "One", Content = "One's content" });
        Tabs.Add(new TabItem { Header = "Two", Content = "Two's content" });
    }
}</code>

Bindung in XAML

Setzen Sie im XAML-Fenster die ItemsSource des TabControl auf die Tabs-Eigenschaft im ViewModel:

<code class="language-xml"><Window ... x:Class="WpfApplication12.MainWindow">
    <Window.DataContext>
        <viewmodel:ViewModel xmlns:viewmodel="clr-namespace:WpfApplication12"/>
    </Window.DataContext>
    <TabControl ... ItemsSource="{Binding Tabs}"/>
</Window></code>

Datenvorlage für Tab-Inhalte

Um in jeder Registerkarte unterschiedliche Inhalte anzuzeigen, verwenden Sie die Datenvorlage der ContentTemplate-Eigenschaft des TabControl:

<code class="language-xml"><TabControl ...>
    <TabControl.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <myusercontrol:MyUserControl xmlns:myusercontrol="clr-namespace:WpfApplication12"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl></code>

Mit diesem Ansatz können Sie dynamisch ein TabControl erstellen und es an eine ViewModel-Sammlung binden und dabei die MVVM-Prinzipien beibehalten.

Das obige ist der detaillierte Inhalt vonWie binde ich ein TabControl mithilfe der MVVM-Datenbindung an eine Sammlung von ViewModels?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!