How can I get the TabItem template close button in WPF?

Question

I have a TabControl , where is TabItem DataTemplat ed. The template seems to work correctly since the user control that I want to show in TabItem is displayed correctly.

I'm not sure how to get the "x" to display in the TabItem so that I can close each tab, as they are dynamically generated through the template.

Being fairly new to WPF, I am starting to understand many concepts, but TabControl given me a lot of trouble, so I can work very well with a template, but not a supported one.

This is what I have, and I would like to be able to close each TabControl . I should also be able to fire a custom event when TabControl closes.

 <UserControl x:Class="Russound.Windows.UI.UserControls.CallLog.CaseReaderWpf" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:CallLog="clr-namespace:Russound.Windows.UI.UserControls.CallLog" Height="637" Width="505"> <UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/Russound.Windows;component/UI/RussoundDictionary.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </UserControl.Resources> <TabControl x:Name="tabCases" > <TabControl.ItemTemplate> <DataTemplate DataType="{x:Type TabItem}"> <StackPanel> <TextBlock Text="{Binding Path=Id}" /> </StackPanel> </DataTemplate> </TabControl.ItemTemplate> <TabControl.ContentTemplate> <DataTemplate DataType="{x:Type TabItem}"> <CallLog:CaseReadOnlyDisplay DataContext="{Binding}" /> </DataTemplate> </TabControl.ContentTemplate> </TabControl> </UserControl> 

Answer 1

Check out this MSDN article by Josh Smith. This is a great solution for your question.

WPF Applications with Model-View-ViewModel Design Pattern

http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

 <!-- This template explains how to render a tab item with a close button. --> <DataTemplate x:Key="ClosableTabItemTemplate"> <DockPanel Width="120"> <Button Command="{Binding Path=CloseCommand}" Content="X" Cursor="Hand" DockPanel.Dock="Right" Focusable="False" FontFamily="Courier" FontSize="9" FontWeight="Bold" Margin="0,1,0,0" Padding="0" VerticalContentAlignment="Bottom" Width="16" Height="16" /> <ContentPresenter Content="{Binding Path=DisplayName}" VerticalAlignment="Center" /> </DockPanel> </DataTemplate> <!-- This template explains how to render the 'Workspace' content area in the main window. --> <DataTemplate x:Key="WorkspacesTemplate"> <TabControl IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding}" ItemTemplate="{StaticResource ClosableTabItemTemplate}" Margin="4" /> </DataTemplate> 

Answer 2

You will need to get your own tab control. google search shows a lot of results, many of them with a source, so you do not need to recreate the wheel.

Answer 3

Josh Smith wrote an article for MSDN magazine with a working example of tab elements that have close buttons. The code is based on the MVVM template, but you should be able to retrieve the appropriate elements from the tab control template.

I do not have an OpenID login, so I cannot publish the URL directly. Google search for "josh smith mvvm demo application".

Answer 4

Not for capturing a stream, but you might think how ugly things look when each tab has a close button. If you prefer the one close button (a la Visual Studio) built into TabControl , you can take a look at this blog post. I did it as part of the sample (but not the focus of the post).

Answer 5

Just ran into this. I am doing MVVM, but it would be very feigning to use form events. In any case, I used the ItemContainerStyle parameter and pointed it to a style with such a data type qualifier:

  <Style x:Key="TabHeader" TargetType="TabItem"> <Setter Property="FieldLayoutSettings"> <Setter.Value> <StackPanel Orientation="Horizontial"> <TextBlock Text="{Binding HeaderText}"/> <!-- MVVM style --> <Button Content="X" Command="{Binding [ICommandHere]}" /> <!--or... Forms style --> <Button Content="X" Click="EventHandlerHere" /> </StackPanel> </Setter.Value> </Setter> </Style> <TabControl ItemsSource="{Binding Workspaces}" ItemContainerStyle="{StaticResource TabHeader}"/>