Question

在使用XAML时，在TabItem中放置UserControl非常基本。

<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，Headers，Background颜色等，我将如何以编程方式填充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"
        });
    }
}

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

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

以编程方式在TabItem中加载UserControl

1 个答案: