从ViewModel添加选项卡和TabItem内容

Question

我有一个ViewModel，我试图填充一个TabControl。我想要的是从视图模型中创建选项卡和选项卡项中的所有控件。

现在正确创建选项卡，但是用户控件“CustomList”（从Tab类中的Collection添加）将在每个选项卡中垂直添加并水平拉伸。我想要做的是水平添加CustomLists，它应该垂直拉伸。

我的问题是如何从TabItem中的ViewModel中的Collection中水平添加CustomList并垂直拉伸？

提前致谢。

代码是：

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        xmlns:models="clr-namespace:WpfApplication1.Models"
        xmlns:comps="clr-namespace:WpfApplication1.Components"
        Title="MainWindow" Height="350" Width="525">

    <Window.DataContext>
        <models:ViewModel />
    </Window.DataContext>

    <Grid>
        <TabControl ItemsSource="{Binding Tabs}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Header}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <DockPanel>
                        <!-- this is where user controls are added vertically -->
                    <ItemsControl ItemsSource="{Binding CustomLists}" DockPanel.Dock="Left" />
                    </DockPanel>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

CustomList.xaml

<UserControl x:Class="WpfApplication1.Components.CustomList"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApplication1.Components"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <DockPanel LastChildFill="True">
        <Label DockPanel.Dock="Top" Content="Title" x:Name="title" />
        <ListView x:Name="listView" />
    </DockPanel>
</UserControl>

Tab.cs

namespace WpfApplication1.Models
{
    public class Tab
    {
        public String Header { get; set; }

        public ObservableCollection<CustomList> CustomLists { get; set; } = new ObservableCollection<CustomList>();
    }
}

ViewModel.cs

namespace WpfApplication1.Models
{
    public class ViewModel
    {
        public ObservableCollection<Tab> Tabs { get; set; } = new ObservableCollection<Tab>();

        public ViewModel()
        {
            var tab1 = new Tab();
            tab1.Header = "Tab 1";
            tab1.CustomLists.Add(new Components.CustomList());
            tab1.CustomLists.Add(new Components.CustomList());
            tab1.CustomLists.Add(new Components.CustomList());
            Tabs.Add(tab1);

            var tab2 = new Tab();
            tab2.Header = "Tab 2";
            tab2.CustomLists.Add(new Components.CustomList());
            Tabs.Add(tab2);

            var tab3 = new Tab();
            tab3.Header = "Tab 3";
            tab3.CustomLists.Add(new Components.CustomList());
            tab3.CustomLists.Add(new Components.CustomList());
            Tabs.Add(tab3);
        }
    }
}

---编辑---基于Rachel的评论

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        xmlns:models="clr-namespace:WpfApplication1.Models"
        xmlns:comps="clr-namespace:WpfApplication1.Components"
        Title="MainWindow" Height="350" Width="525">

    <Window.DataContext>
        <models:ViewModel />
    </Window.DataContext>

    <Grid>
        <TabControl ItemsSource="{Binding Tabs}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Header}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <ItemsControl ItemsSource="{Binding CustomLists}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

CustomListControl.xaml

**<UserControl x:Class="WpfApplication1.Components.CustomListControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApplication1.Components"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <DockPanel LastChildFill="True">
        <Label DockPanel.Dock="Top" Content="Title" x:Name="title" />
        <ListView x:Name="listView" Width="300" />
    </DockPanel>
</UserControl>**

CustomList.cs

namespace WpfApplication1.Models
{
    public class CustomList
    {
        public String Title { get; set; }
    }
}

Tab.cs

namespace WpfApplication1.Models
{
    public class Tab
    {
        public String Header { get; set; }

        public ObservableCollection<CustomList> CustomLists { get; set; } = new ObservableCollection<CustomList>();
    }
}

ViewModel.xaml

namespace WpfApplication1.Models
{
    public class ViewModel
    {
        public ObservableCollection<Tab> Tabs { get; set; } = new ObservableCollection<Tab>();

        public ViewModel()
        {
            var tab1 = new Tab();
            tab1.Header = "Tab 1";

            tab1.CustomLists.Add(new CustomList());
            tab1.CustomLists.Add(new CustomList());
            tab1.CustomLists.Add(new CustomList());
            Tabs.Add(tab1);

            var tab2 = new Tab();
            tab2.Header = "Tab 2";
            tab2.CustomLists.Add(new CustomList());
            Tabs.Add(tab2);

            var tab3 = new Tab();
            tab3.Header = "Tab 3";
            tab3.CustomLists.Add(new CustomList());
            tab3.CustomLists.Add(new CustomList());
            Tabs.Add(tab3);
        }
    }
}