Button content on Tabitem header disappears

Question

I programmatically add tabitems to a tabcontrol. I have a custom tabItem with two buttons in the header, one to close the tab, the other to do some other functionality (it triggers an ascending or descending sort). The content of close button is a constant, the content of the other button changes based on a boolean value in the tab's datacontext. Only the buttons in the selected tab show in the tab header.

Initially, both buttons will show on the tab created last. The problem I'm experiencing is that as I select tabs, the content of the close button on the newly selected tab will be visible, as it should be, but the content of the bound button is gone (the button is there).

I should point out the content of the problemmatic button is one of two polygons depending on the value of the binding source.

I should also point out that if i click the empty button the appropriate image appears on the tab header.

Adding more confusion is that the tooltip property attached to the button, behaves correctly - it displays the appropriate tooltip text based on the binding source.

The custom TabItem is mostly created from a ResourceDictionary which I've included.

Please help, I admit my wpf knowledge is limited.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TreeView.Helpers">

    <Style x:Key="TabItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle SnapsToDevicePixels="true" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
    <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#EAF6FD" Offset="0.15"/>
        <GradientStop Color="#D9F0FC" Offset=".5"/>
        <GradientStop Color="#BEE6FD" Offset=".5"/>
        <GradientStop Color="#A7D9F5" Offset="1"/>
    </LinearGradientBrush>

    <!--Brushes (for Sort Button -->
    <!--Light brush, to highlight.-->
    <LinearGradientBrush x:Key="lightBrushBack" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#7EFFFFFF" Offset="0"/>
        <GradientStop Color="#03FFFFFF" Offset=".4"/>
        <GradientStop Color="#00030000" Offset=".5"/>
        <GradientStop Color="#0AFFFFFF" Offset=".55"/>
        <GradientStop Color="#7EFFFFFF" Offset="1"/>
    </LinearGradientBrush>

    <!--Normal brush, little darker than light brush.-->
    <LinearGradientBrush x:Key="normalBrushBack" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#7EF0F0F0" Offset="0"/>
        <GradientStop Color="#03FFFFFF" Offset=".4"/>
        <GradientStop Color="#00030000" Offset=".5"/>
        <GradientStop Color="#0AFFFFFF" Offset=".55"/>
        <GradientStop Color="#3EFFFFFF" Offset="1"/>
    </LinearGradientBrush>

    <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
    <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
    <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
    <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
    <Style TargetType="{x:Type local:CloseableTabItem}" >
        <Style.Resources>
            <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#F3F3F3" Offset="0"/>
                <GradientStop Color="#EBEBEB" Offset="0.5"/>
                <GradientStop Color="#DDDDDD" Offset="0.5"/>
                <GradientStop Color="#CDCDCD" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ButtonOverBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFFAFAFA" Offset="0"/>
                <GradientStop Color="#FFE0E0E3" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ButtonPressedBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFE0E0E2" Offset="0"/>
                <GradientStop Color="#FFF8F8F8" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF969696"/>
            <local:VisibilityConverter x:Key="converter" />
            <Style x:Key="CloseableTabItemButtonStyle" TargetType="{x:Type Button}">
                <Setter Property="Visibility" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}, Path=IsSelected, Converter={StaticResource converter}}"/>
                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Padding" Value="4"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid>
                                <Border SnapsToDevicePixels="true" x:Name="Chrome" 
                                        Background="{TemplateBinding Background}" 
                                        BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}" 
                                        CornerRadius="2" Opacity="0" />
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                  Margin="{TemplateBinding Padding}" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                                  RecognizesAccessKey="True"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Opacity" TargetName="Chrome" Value="1"/>
                                    <Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter Property="Opacity" TargetName="Chrome" Value="1"/>
                                    <Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="#ADADAD"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="SortableButtonStyle" TargetType="{x:Type Button}">
                <Setter Property="Visibility" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}, Path=IsSelected, Converter={StaticResource converter}}"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="OverridesDefaultStyle" Value="True"/>

            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="4"/>

            <Setter Property="Content">
                <Setter.Value>
                    <Polygon Points="1,1 4,7.5 7.5,1" Stroke="Black" Fill="Black" />
                </Setter.Value>
            </Setter>

            <Setter Property="ToolTip" Value="Sort the Tree Descending" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border SnapsToDevicePixels="true" x:Name="Chrome" 
                                    Background="{TemplateBinding Background}" 
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    CornerRadius="2" Opacity="0" />
                            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              Margin="{TemplateBinding Padding}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                              RecognizesAccessKey="True"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Opacity" TargetName="Chrome" Value="1"/>
                                <Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Opacity" TargetName="Chrome" Value="1"/>
                                <Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="#ADADAD"/>
                            </Trigger>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}, Path=DataContext.SortDirectionIsAscending}" Value="false">
                                <Setter Property="Content">
                                    <Setter.Value>
                                        <Polygon Points="1,8 4,1.5 7.5,8" Stroke="Black" Fill="Black" />
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="ToolTip" Value="Sort the Tree Ascending" />
                            </DataTrigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Style.Resources>
    <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Padding" Value="6,1,6,1"/>
    <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CloseableTabItem}">
                <Grid SnapsToDevicePixels="true">
                    <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" >
                        <DockPanel x:Name="ContentPanel">
                            <Grid DockPanel.Dock="Right">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>

                                <Button Grid.Column="0" x:Name="PART_Sort" 
                                    HorizontalAlignment="Center" 
                                    Margin="3,0,3,0" 
                                    VerticalAlignment="Center" 
                                    Width="16" 
                                    Height="16" 
                                    Style="{DynamicResource SortableButtonStyle}"

                                    Command="{Binding SortTabCommand}" 
                                    CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">


                                </Button>

                                <Button Grid.Column="1" x:Name="PART_Close" 
                                    HorizontalAlignment="Center" 
                                    Margin="3,0,3,0" 
                                    VerticalAlignment="Center" 
                                    Width="16" 
                                    Height="16" 

                                    Style="{DynamicResource CloseableTabItemButtonStyle}" 
                                    ToolTip="Close Tab"
                                    Command="{Binding CloseTabCommand}" 
                                    CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">


                                <Path x:Name="Path" 
                                      Stretch="Fill" 
                                      StrokeThickness="0.5" 
                                      Stroke="#FF333333" 
                                      Fill="#FF969696" 
                                      Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z " 
                                      HorizontalAlignment="Stretch" 
                                      VerticalAlignment="Stretch"/>
                            </Button>
                            </Grid>
                            <ContentPresenter x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
                        </DockPanel>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" SourceName="PART_Close" Value="True">
                        <Setter Property="Fill" TargetName="Path" Value="#FFB83C3D"/>
                    </Trigger>
                    <Trigger Property="IsPressed" SourceName="PART_Close" Value="True">
                        <Setter Property="Fill" TargetName="Path" Value="#FF9D0000"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" SourceName="PART_Sort" Value="True">
                        <Setter Property="Fill" TargetName="Path" Value="#FFB83C3D"/>
                    </Trigger>
                    <Trigger Property="IsPressed" SourceName="PART_Sort" Value="True">
                        <Setter Property="Fill" TargetName="Path" Value="#FF9D0000"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Panel.ZIndex" Value="1"/>
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="false"/>
                            <Condition Property="IsMouseOver" Value="true"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
                    </MultiTrigger>
                    <Trigger Property="TabStripPlacement" Value="Bottom">
                        <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
                    </Trigger>
                    <Trigger Property="TabStripPlacement" Value="Left">
                        <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
                    </Trigger>
                    <Trigger Property="TabStripPlacement" Value="Right">
                        <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="TabStripPlacement" Value="Top"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Margin" Value="-2,-2,-2,-1"/>
                        <Setter Property="Margin" TargetName="ContentPanel" Value="0,0,0,1"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="TabStripPlacement" Value="Bottom"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Margin" Value="-2,-1,-2,-2"/>
                        <Setter Property="Margin" TargetName="ContentPanel" Value="0,1,0,0"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="TabStripPlacement" Value="Left"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Margin" Value="-2,-2,-1,-2"/>
                        <Setter Property="Margin" TargetName="ContentPanel" Value="0,0,1,0"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="TabStripPlacement" Value="Right"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Margin" Value="-1,-2,-2,-2"/>
                        <Setter Property="Margin" TargetName="ContentPanel" Value="1,0,0,0"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>


                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

</ResourceDictionary>

I programmatically add tabitems to a tabcontrol - Wrong. Please learn MVVM before you ever write a single line of code in WPF. — Federico Berasategui
HighCore, there is no code-behind in any of the views, other than the initialization. Customer wanted a popup window in which to select criteria. Criteria is used to create the data context for a treeview. There can be multiple tabs/treeviews. The treeview resides on a tab. The tabcontrol is on the main form. I pass a reference of the parent to the popup's viewmodel so I can access the Tabcontrol object. It was the only way I could think of doing it. All of this is done with views and viewmodels. — user1631525

user1631525 user1631525 · Accepted Answer · 2014-01-05T21:26:43

I solved my own problem. In my attempt at solving this, I went with a togglebutton and an image instead of a regular button and a polygon. I then realized I was missing the trigger condition for the selected state of the tabitem. The final solution is included here, for anyone interested. By the way, the idea, and the majority of the style, to create a control that inherits from a tabitem came from this site: http://www.c-sharpcorner.com/uploadfile/dpatra/closable-tab-control-in-wpf/.

Lastly, for those presumptuous folks out there, this problem had nothing to do with MVVM.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TreeView.Helpers">

<ImageSource x:Key="Image_DescendingGreySortButton">../Images/imgSortDescendingButtonGrey.PNG</ImageSource>
<ImageSource x:Key="Image_AscendingGreySortButton">../Images/imgSortAscendingButtonGrey.PNG</ImageSource>

    <Style x:Key="TabItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle SnapsToDevicePixels="true" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
    <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#EAF6FD" Offset="0.15"/>
        <GradientStop Color="#D9F0FC" Offset=".5"/>
        <GradientStop Color="#BEE6FD" Offset=".5"/>
        <GradientStop Color="#A7D9F5" Offset="1"/>
    </LinearGradientBrush>

    <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
    <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
    <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
    <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
    <Style TargetType="{x:Type local:CloseableTabItem}" >
        <Style.Resources>
            <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#F3F3F3" Offset="0"/>
                <GradientStop Color="#EBEBEB" Offset="0.5"/>
                <GradientStop Color="#DDDDDD" Offset="0.5"/>
                <GradientStop Color="#CDCDCD" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ButtonOverBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFFAFAFA" Offset="0"/>
                <GradientStop Color="#FFE0E0E3" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ButtonPressedBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFE0E0E2" Offset="0"/>
                <GradientStop Color="#FFF8F8F8" Offset="1"/>
            </LinearGradientBrush>

            <LinearGradientBrush x:Key="ToggleButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#F3F3F3" Offset="0"/>
                <GradientStop Color="#EBEBEB" Offset="0.5"/>
                <GradientStop Color="#DDDDDD" Offset="0.5"/>
                <GradientStop Color="#CDCDCD" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ToggleButtonOverBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFFAFAFA" Offset="0"/>
                <GradientStop Color="#FFE0E0E3" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ToggleButtonPressedBackground" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFE0E0E2" Offset="0"/>
                <GradientStop Color="#FFF8F8F8" Offset="1"/>
            </LinearGradientBrush>

            <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF969696"/>
            <SolidColorBrush x:Key="ToggleButtonNormalBorder" Color="#FF969696"/>
            <local:VisibilityConverter x:Key="converter" />
            <Style x:Key="CloseableTabItemButtonStyle" TargetType="{x:Type Button}">
                <Setter Property="Visibility" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}, Path=IsSelected, Converter={StaticResource converter}}"/>
                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Padding" Value="4"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid>
                                <Border SnapsToDevicePixels="true" x:Name="Chrome" 
                                        Background="{TemplateBinding Background}" 
                                        BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}" 
                                        CornerRadius="2" Opacity="0" />
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                  Margin="{TemplateBinding Padding}" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                                  RecognizesAccessKey="True"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Opacity" TargetName="Chrome" Value="1"/>
                                    <Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter Property="Opacity" TargetName="Chrome" Value="1"/>
                                    <Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="#ADADAD"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="{x:Type ToggleButton}" x:Key="ToggleButtonStyle">
                <Setter Property="Visibility" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}, Path=IsSelected, Converter={StaticResource converter}}"/>
                <Setter Property="SnapsToDevicePixels" Value="True"/>
                <Setter Property="OverridesDefaultStyle" Value="True"/>

                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Setter Property="Background" Value="{StaticResource ToggleButtonNormalBackground}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ToggleButtonNormalBorder}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="ToolTip" Value="Sort the Tree Descending" />
                <Setter Property="Content" Value="{DynamicResource Image_DescendingGreySortButton}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <Grid>
                                <Border SnapsToDevicePixels="true" x:Name="Chrome" 
                                        Background="{TemplateBinding Background}" 
                                        BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}" 
                                        CornerRadius="2" Opacity="0" />
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                  Margin="{TemplateBinding Padding}" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                                  RecognizesAccessKey="True"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Opacity" TargetName="Chrome" Value="1"/>
                                    <Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
                                </Trigger>
                                <Trigger Property="IsPressed" Value="True">
                                    <Setter Property="Opacity" TargetName="Chrome" Value="1"/>
                                    <Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="#ADADAD"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </Style.Resources>
        <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Padding" Value="6,1,6,1"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CloseableTabItem}">
                    <Grid SnapsToDevicePixels="true">
                        <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" >
                            <DockPanel x:Name="ContentPanel">
                                <Grid DockPanel.Dock="Right">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>

                                        <ToggleButton Grid.Column="0" x:Name="PART_Sort" 
                                        HorizontalAlignment="Center" 
                                        Margin="3,0,3,0" 
                                        VerticalAlignment="Center" 
                                        Width="16" 
                                        Height="16" 
                                        Style="{DynamicResource ToggleButtonStyle}"
                                        IsThreeState="False"

                                        Command="{Binding SortTabCommand}" 
                                        CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">

                                    </ToggleButton>

                                    <Button Grid.Column="1" x:Name="PART_Close" 
                                        HorizontalAlignment="Center" 
                                        Margin="3,0,3,0" 
                                        VerticalAlignment="Center" 
                                        Width="16" 
                                        Height="16" 

                                        Style="{DynamicResource CloseableTabItemButtonStyle}" 
                                        ToolTip="Close Tab"
                                        Command="{Binding CloseTabCommand}" 
                                        CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">

                                    <Path x:Name="Path" 
                                          Stretch="Fill" 
                                          StrokeThickness="0.5" 
                                          Stroke="#FF333333" 
                                          Fill="#FF969696" 
                                          Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z " 
                                          HorizontalAlignment="Stretch" 
                                          VerticalAlignment="Stretch"/>
                                </Button>
                                </Grid>
                                <ContentPresenter x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
                            </DockPanel>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" SourceName="PART_Close" Value="True">
                            <Setter Property="Fill" TargetName="Path" Value="#FFB83C3D"/>
                        </Trigger>
                        <Trigger Property="IsPressed" SourceName="PART_Close" Value="True">
                            <Setter Property="Fill" TargetName="Path" Value="#FF9D0000"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" SourceName="PART_Sort" Value="True">
                            <Setter Property="Fill" TargetName="Path" Value="#FFB83C3D"/>
                        </Trigger>
                        <Trigger Property="IsPressed" SourceName="PART_Sort" Value="True">
                            <Setter Property="Fill" TargetName="Path" Value="#FF9D0000"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="false"/>
                                <Condition Property="IsMouseOver" Value="true"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
                        </MultiTrigger>
                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
                        </Trigger>
                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Top"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-2,-2,-1"/>
                            <Setter Property="Margin" TargetName="ContentPanel" Value="0,0,0,1"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Bottom"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-1,-2,-2"/>
                            <Setter Property="Margin" TargetName="ContentPanel" Value="0,1,0,0"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Left"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-2,-2,-1,-2"/>
                            <Setter Property="Margin" TargetName="ContentPanel" Value="0,0,1,0"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="TabStripPlacement" Value="Right"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Margin" Value="-1,-2,-2,-2"/>
                            <Setter Property="Margin" TargetName="ContentPanel" Value="1,0,0,0"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True"/>
                                <Condition Property="IsChecked" SourceName="PART_Sort" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Content" TargetName="PART_Sort">
                                <Setter.Value>
                                    <Image>
                                        <Image.Style>
                                            <Style TargetType="Image">
                                                <Setter Property="Source" Value="{DynamicResource Image_AscendingGreySortButton}" />
                                            </Style>
                                        </Image.Style>
                                    </Image>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="ToolTip" TargetName="PART_Sort" Value="Sort the Tree Ascending" />
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True"/>
                                <Condition Property="IsChecked" SourceName="PART_Sort" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Content" TargetName="PART_Sort">
                                <Setter.Value>
                                    <Image>
                                        <Image.Style>
                                            <Style TargetType="Image">
                                                <Setter Property="Source" Value="{DynamicResource Image_DescendingGreySortButton}" />
                                            </Style>
                                        </Image.Style>
                                    </Image>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="ToolTip" TargetName="PART_Sort" Value="Sort the Tree Descending" />
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

Button content on Tabitem header disappears

1 Answers