1

I have a ViewModel from which I am trying to populate a TabControl. What I want is to create tabs and all the controls in tab items from the view model.

Right now Tabs are created correctly, but the user control "CustomList" (added from Collection in the Tab class) is being added vertically in each tab and is stretched horizontally. What I want to do is to add CustomLists horizontally and it should stretch vertically.

My question is how can I add CustomList from the Collection in ViewModel in TabItem horizontally and stretched vertically?

Thanks in advance.

The code is:

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

---EDIT--- Based on Rachel's comment

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);
        }
    }
}
huber.duber
  • 762
  • 2
  • 7
  • 31
  • You can try to use a WrapControl insite ItemsControl.Template, that way your Items will be added horizontally. [This may help you](http://stackoverflow.com/questions/3131919/wrappanel-as-itempanel-for-itemscontrol) – ltiveron Oct 26 '16 at 20:59
  • You're mixing your data layer with your UI layer, which is usually not something you ever want when working with WPF and/or MVVM. Try separating it, like [this](http://stackoverflow.com/a/9805475/302677). The core of your problem though is the UI control tree... take a look at your application with something like [Snoop](https://snoopwpf.codeplex.com/) to view what objects are actually created in the UI tree, and I think you'll realize the problem. If you really want to keep what you have now, switch the `ItemsPanelTemplate` of your ItemsControl to a StackPanel that is Horizontal. – Rachel Oct 26 '16 at 21:10
  • Thanks for point that out Rachel. You are right that should not happen. I have added new code under --edit--. Now my question is how can I add CustomListControl in StackPanel. – huber.duber Oct 26 '16 at 22:59

0 Answers0