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