以編程方式在TabItem中加載UserControl

Question

使用XAML時，將UserControl放在TabItem內是非常基本的。

<TabControl>
    <TabItem>
        <local:MyUserControl/>
    </TabItem>
</TabControl>

但是說我想使用ViewModel加載UserControl。 我將如何處理？ 例如

<TabControl ItemsSource="{Binding TabCollection}">
    <TabItem Header="{Binding Header}"
             Source="{Binding MyUserControl}"> <!-- Source is obviously not a property of TabItem-->
                                               <!-- I'm just using it in this context as an example. Like how a 'Frame' would work -->
    </TabItem>
</TabControl>

假設我的ViewModel有一個ObservableCollection，我用它來填充不同的Tabs，標題，背景色等等，我該如何以編程方式在TabItem中填充視圖？

例如，以下是ViewModel的基本示例：

public class TabViewModel
{
    // 'TabModel' is a simple class that acts as a Model for this class (TabViewModel)
    // All it does is store strings, integers, etc. as properties
    // i.e: the fields 'Header' and 'MyUserControl' in the below method are both strings declared in 'TabModel'
    public ObservableCollection<TabModel> TabCollection { get; set; }

    public TabViewModel()
    {
        TabCollection = new ObservableCollection<TabModel>();
        PopulateTabCollection();
    }

    private void PopulateTabCollection()
    {
        TabCollection.Add(new TabModel()
        {
            Header = "FirstUserControl",
            MyUserControl = "Views/MyFirstUserControl.xaml"
        });

        TabCollection.Add(new TabModel()
        {
            Header = "SecondUserControl",
            MyUserControl = "Views/MySecondUserControl.xaml"
        });
    }
}

因此，我需要做的是通過數據綁定在每個選項卡中顯示不同的視圖。 我什至不確定這是否可能。 但是如果是這樣，請教我。

Answer 1

您可以使用DataTemplates實現此目的。 請參考以下代碼。

<Window.Resources>
    <DataTemplate DataType="{x:Type local:PersonVm}">
        <local:Person/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:DeptVm}">
        <local:Department/>
    </DataTemplate>
</Window.Resources>
<Grid>
    <TabControl ItemsSource="{Binding TabCollection}" SelectedIndex="0">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding TabName}"/>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <ContentControl  Content="{Binding }"/>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Grid>


public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new TabViewModel();
        }
    }

    public class TabViewModel
    {
        public ObservableCollection<object> TabCollection { get; set; }

        public TabViewModel()
        {
            TabCollection = new ObservableCollection<object>();
            PopulateTabCollection();
        }

        private void PopulateTabCollection()
        {
            TabCollection.Add(new PersonVm()
            {
                PersonName = "FirstUserControl",
                Address = "Address",
                TabName = "Person Tab"
            });

            TabCollection.Add(new DeptVm()
            {
                DeptName = "SecondUserControl",
                TabName = "DeptTab"
            });
        }
    }

    public class PersonVm
    {
        public string PersonName { get; set; }
        public string Address { get; set; }
        public string TabName { get; set; }

    }

    public class DeptVm
    {
        public string DeptName { get; set; }
        public string TabName { get; set; }
    }