How can I use a custom TabItem control when binding data to a TabControl in WPF?

Question

I have a custom control that is derived from TabItem , and I want to bind it to such TabItem to TabControl stock. I would rather avoid creating a new TabControl just for this rare occasion.

This is what I have, and I won’t be able to get the right control for the download. In this case, I want to use the ClosableTabItem control instead of the TabItem control.

 <TabControl x:Name="tabCases" IsSynchronizedWithCurrentItem="True" Controls:ClosableTabItem.TabClose="TabClosed" > <TabControl.ItemTemplate> <DataTemplate DataType="{x:Type Controls:ClosableTabItem}" > <TextBlock Text="{Binding Path=Id}" /> </DataTemplate> </TabControl.ItemTemplate> <TabControl.ContentTemplate> <DataTemplate DataType="{x:Type Entities:Case}"> <CallLog:CaseReadOnlyDisplay DataContext="{Binding}" /> </DataTemplate> </TabControl.ContentTemplate> </TabControl> 

EDIT: This is what I ended up with, instead of trying to bundle a custom control. " CloseCommand " get from the previous question .

  <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}" > <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Border Name="Border" Background="LightGray" BorderBrush="Black" BorderThickness="1" CornerRadius="25,0,0,0" SnapsToDevicePixels="True"> <StackPanel Orientation="Horizontal"> <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="20,1,5,1"/> <Button Command="{Binding Path=CloseCommand}" Cursor="Hand" DockPanel.Dock="Right" Focusable="False" Margin="1,1,5,1" Background="Transparent" BorderThickness="0"> <Image Source="/Russound.Windows;component/Resources/Delete.png" Height="10" /> </Button> </StackPanel> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="FontWeight" Value="Bold" /> <Setter TargetName="Border" Property="Background" Value="LightBlue" /> <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" /> <Setter TargetName="Border" Property="BorderBrush" Value="DarkBlue" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> 

Answer 1

In this case, you do not want to set the DataType for the DataTemplate . The value of the ItemTemplate property ItemTemplate used whenever a new item needs to be added, and in the case of a tab control, it will be used to create a new TabItem . You must declare an instance of your class inside the DataTemplate itself:

 <TabControl x:Name="tabCases" IsSynchronizedWithCurrentItem="True" Controls:ClosableTabItem.TabClose="TabClosed"> <TabControl.ItemTemplate> <DataTemplate> <Controls:ClosableTabItem> <TextBlock Text="{Binding Path=Id}" /> </Controls:ClosableTabItem> </DataTemplate> </TabControl.ItemTemplate> <TabControl.ContentTemplate> <DataTemplate DataType="{x:Type Entities:Case}"> <CallLog:CaseReadOnlyDisplay DataContext="{Binding}" /> </DataTemplate> </TabControl.ContentTemplate> </TabControl> 

This will create a new ClosableTabItem when a new tab is added to the TabControl .

Refresh From your comment, it looks like ItemTemplate controls what is created in TabItem , instead of modifying TabItem itself. To do what you want to do, but for TreeView , you must set the HeaderTemplate . Unfortunately, I do not see the HeaderTemplate TabControl property.

I did a few searches, and this tutorial modifies the contents of the tab headers by adding controls to TabItem.Header . Perhaps you could create a Style for your TabItems that will add the close button that your class is currently adding?

Answer 2

found a way to infer a class from TabControl and override this function, in my case I want the tab controls (when bound) to have CloseableTabItems

 public class CloseableTabControl : TabControl { protected override DependencyObject GetContainerForItemOverride() { return new CloseableTabItem(); } } 

Hth someone

Sam