How can I get a close button on a templated TabItem in WPF?

Question

I have a TabControl where the TabItems are DataTemplated. The template seems to work correctly, in that the usercontrol I want to show in the TabItem is showing correctly.

What I am not sure of is how to get a "x" to show up in the TabItem so I can close each tab, since they are dynamically generated through a template.

Being fairly new to WPF, I am starting to pick up on many of the concepts, but the TabControl gave me a lot of trouble, so I may very well have the template workable, but not maintainable.

This is what I have, and I would like to be able to close each TabControl. I will also need to be able to fire a custom event when that TabControl is closed.

<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. It is an excellent solution for your question.

WPF Apps With The 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 have to derive your own tab control. google search reveals many results, many of them with source so you dont have to re-create the wheel.

Answer 3

Josh Smith wrote an article for MSDN Magazine with a working example of tab items that have close buttons. The code is based on the MVVM pattern, but you should be able to extract the relevant pieces from the tab item control template.

I don't have an OpenID login so I couldn't post the URL directly. Google search for "josh smith mvvm demo app".

Answer 4

Just ran into that one. I'm doing MVVM but it would be very simular to use form events. In any event I used the ItemContainerStyle parameter and point it to a style with a datatype qualifier like so:

  <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}"/>

Answer 5

Not to hijack the thread, but you might want to consider how ugly things look when every tab has a close button. If you'd instead prefer a single close button (a la Visual Studio) integrated into the TabControl itself, you can take a look at this blog post I did, which does that as part of the sample (but is not the focus of the post).