Adding additional items when using ItemsSource

Question

In the project I am creating, I have a TabControl in which I want to display a range of tabs through an ItemsSource . I also need to have several "overview" tabs at the beginning of the TabControl that cannot be located in the ItemsSource .

What is the best way to achieve this, the only way I can think of is to have my overview tabs in my XAML and just add tab items manually through code instead of using ItemSource , this is the best way to go about it.

Answer 1

You can use CompositeCollection ( MSDN ) to do the following:

 <Window.Resources> <CollectionViewSource x:Key="ExistingTabs" Source="{Binding ExistingTabs}"/> </Window.Resources> <TabControl> <TabControl.ItemsSource> <CompositeCollection> <TabItem>SpecialItem</TabItem> <CollectionContainer Collection="{Binding Source={StaticResource ExistingTabs}}"/> </CompositeCollection> </TabControl.ItemsSource> </TabControl> 

Answer 2

For those who find a way to use HeaderTemplate / ContentTemplate with CollectionContainer:

First add a type property to the ViewModel

 public Type Type { get { return this.GetType(); } } 

Use Style.Triggers to set the HeaderTemplate / ContentTemplate for the dynamic tabs identified by the Type property.

 <Window x:Class="TabDemo.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:TabDemo" xmlns:vm="clr-namespace:TabDemo.ViewModel" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525" d:DataContext="{d:DesignInstance vm:TabViewModel}"> <Window.Resources> <CollectionViewSource x:Key="ExistingTabs" Source="{Binding ExistingTabs}"/> <DataTemplate x:Key="TemplateForTheHeader" DataType="{x:Type vm:TabViewModel}"> <TextBlock Text="{Binding Title}"/> </DataTemplate> <DataTemplate x:Key="TemplateForTheContent" DataType="{x:Type vm:TabViewModel}"> <DockPanel> <DataGrid ItemsSource="{Binding Data}"></DataGrid> </DockPanel> </DataTemplate> <Style x:Key="TabItemStyle" TargetType="TabItem"> <Style.Triggers> <DataTrigger Binding="{Binding Path=Type}" Value="{x:Type vm:TabViewModel}"> <Setter Property="HeaderTemplate" Value="{StaticResource TemplateForTheHeader}" /> <Setter Property="ContentTemplate" Value="{StaticResource TemplateForTheContent}" /> </DataTrigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <TabControl Grid.Row="1" ItemContainerStyle="{StaticResource TabItemStyle}"> <TabControl.ItemsSource> <CompositeCollection> <TabItem Header="Fixed Header"> <TabItem.Content> <TextBlock Text="Fixed Content"/> </TabItem.Content> </TabItem> <CollectionContainer Collection="{Binding Source={StaticResource ExistingTabs}}"/> </CompositeCollection> </TabControl.ItemsSource> </TabControl> </Grid> </Window> 

Link Anderson Imes answer: fooobar.com/questions/857509 / ...

Answer 3

You can use CompositeCollection. How to add a common item to a ComboBox associated with a collection in WPF .

 <TabControl> <TabControl.ItemsSource> <CompositeCollection> <TabItem Header="extra tab item"> //Not bound <TextBox>something</TextBox> </TabItem> <CollectionContainer x:Name="cc"/> </CompositeCollection> </TabControl.ItemsSource> </TabControl> 

Code behind:

 cc.Collection=yourObservableCollection 

Answer 4

Unfortunately, you cannot combine the ItemsSource binding with explicitly added item collection objects. Thus, you have two options: either add fixed items and then items from the linked list manually to the Items collection, or associate the ItemsSource with a collection that contains both a set of fixed objects and related items in the collection. In any case, the biggest problem is probably related to updating when your data changes - make sure that the necessary items are deleted / added and the user interface is updated correctly.