Comment lier un TabControl à une collection de ViewModels à l'aide de la liaison de données MVVM ?

Liaison de données MVVM : utilisez la collection ViewModel pour lier TabControl

Dans l'architecture MVVM (Model-View-ViewModel), ViewModel ne doit pas créer directement d'éléments d'interface utilisateur. Au lieu de cela, il doit exposer le modèle de données et fournir des liaisons pour les vues. Pour lier un TabControl à une collection ViewModel, une approche différente est requise.

Créer une maquette de page à onglet

Implémentez une classe de modèle qui représente chaque page à onglet, y compris les propriétés du titre et du contenu. Par exemple :

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

ViewModel contenant ObservableCollection

Créez une propriété ViewModel pour l'ObservableCollection des objets TabItem. Dans le constructeur, remplissez cette collection avec les onglets initiaux :

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

Liaison en XAML

Dans la fenêtre XAML, définissez ItemsSource du TabControl sur la propriété Tabs dans le 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>

Modèle de données pour le contenu des onglets

Pour afficher un contenu différent dans chaque onglet, utilisez le modèle de données de la propriété ContentTemplate du 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>

Avec cette approche, vous pouvez créer dynamiquement un TabControl et le lier à une collection ViewModel tout en conservant les principes MVVM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!