Bagaimana untuk Mengikat TabControl ke Koleksi ViewModels menggunakan MVVM Data Binding?

Pengikatan data MVVM: Gunakan koleksi ViewModel untuk mengikat TabControl

Dalam seni bina MVVM (Model-View-ViewModel), ViewModel tidak seharusnya mencipta elemen UI secara langsung. Sebaliknya, ia harus mendedahkan model data dan menyediakan pengikatan untuk pandangan. Untuk mengikat TabControl ke koleksi ViewModel, pendekatan berbeza diperlukan.

Buat mockup halaman tab

Laksanakan kelas model yang mewakili setiap halaman tab, termasuk sifat untuk tajuk dan kandungan. Contohnya:

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

ViewModel yang mengandungi ObservableCollection

Buat sifat ViewModel untuk ObservableCollection objek TabItem. Dalam pembina, isikan koleksi ini dengan tab awal:

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

Mengikat dalam XAML

Dalam tetingkap XAML, tetapkan ItemsSource TabControl kepada sifat Tab dalam 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>

Templat data untuk kandungan tab

Untuk memaparkan kandungan berbeza dalam setiap tab, gunakan templat data sifat ContentTemplate 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>

Dengan pendekatan ini anda boleh mencipta TabControl secara dinamik dan mengikatnya pada koleksi ViewModel sambil mengekalkan prinsip MVVM.

Atas ialah kandungan terperinci Bagaimana untuk Mengikat TabControl ke Koleksi ViewModels menggunakan MVVM Data Binding?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!