以编程方式在 TabItem 中加载 UserControl [英] Load UserControl in TabItem programmatically

问题描述

在使用 XAML 时，将 UserControl 放在 TabItem 中是非常基本的.

Placing a UserControl inside a TabItem is pretty basic when using XAML.

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

但是说我想使用 ViewModel 加载 UserControl.我该怎么做?例如

But say I want to load the UserControl using the ViewModel. How would I go about that? For instance

<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 用于填充不同的选项卡、标题、背景颜色等，我将如何以编程方式在 TabItem 中填充视图?

Assuming My ViewModel has an ObservableCollection that I use to populate the different Tabs, Headers, Background colour and so on, how would I populate a view in the TabItem programmatically?

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

For instance, Below is a basic sample of the 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"
        });
    }
}

所以我需要做的是通过数据绑定在每个 Tab 中显示不同的视图.我什至不确定这是否可能.但如果是，请教教我.

So what I need to do is display a different view in each Tab through databinding. I'm not even sure if this is even possible. But if it is, kindly educate me.

推荐答案

您可以使用 DataTemplates 实现此目的.参考下面的代码.

You can achieve this using DataTemplates. Refer the below code.

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

这篇关于以编程方式在 TabItem 中加载 UserControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！