WPF TabItem border isn't reflecting BorderThickness property

Question

I've got a TabControl with several TabItems. I'm trying to make them have a flatter design. The idea is to have the outside border of the tab go away, with the active tab indicated by a green line at the bottom of the tab. I've been able to get the green line to work perfectly, but no matter what I do I can't get rid of the left, top, and right lines of each TabItem.

Due to text formatting constraints in my specs, I have wrapped the TabItem header into a TextBlock wrapped by a Border. I suspect this combination may have something to do with it. If there is a way to show the green bottom border on the active tab, while allowing line breaks (each tab has two words that need to be split into two lines) and text centering in the tab header, I am totally fine with changing my configuration. I've tried various combinations of the BorderThickness, Margin, and Padding properties to no avail.

<TabControl HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="tabControl">
    <TabItem  MaxWidth="55" HorizontalAlignment="Center" Background="White">
        <TabItem.Header>
            <Border Style="{StaticResource TabItemText}">
                <TextBlock TextAlignment="Center" Text="Actions Needed" TextWrapping="Wrap"></TextBlock>
            </Border>
        </TabItem.Header>
    </TabItem>
</TabControl>

This is the tab coloring code. It does some redundant things at the moment, but it illustrates what I'm trying to do.

<Style x:Key="TabItemText" TargetType="{x:Type Border}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
            <Setter Property="BorderBrush" Value="#57B481"/>
            <Setter Property="BorderThickness" Value="0 0 0 4"/>
            <Setter Property="Margin" Value="0 0 0 -3"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
            <Setter Property="BorderThickness" Value="0 0 0 0"/>
            <Setter Property="Margin" Value="0 0 0 -3"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

Ron Ron · Accepted Answer · 2017-02-24T07:55:28

You can/should change the Template of TabItem. It contains a Border and you should fix its BorderThicknessto something like "0,0,0,2". The Last Value determines the height of the green border you are trying to create. You should also set the BorderBrush and BackgroundBrush to be the same. You change the BorderBrush in the Trigger IsSelected==True to your selected Color. Note that there is no need to use a Border in the Header of you TabItem. Just use a TexBlock to control TextWrapping and stuff. There are other minor changes that I explain in the following example:

<TabControl HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="tabControl">
    <TabControl.Resources>
        <LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#FFF" Offset="0.0"/>
                    <GradientStop Color="#EEE" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
        <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
        <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
        <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
        <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
        <ControlTemplate x:Key="simpleTI" TargetType="TabItem">
            <Grid>
                <Border Name="Border" 
                            BorderThickness="0,0,0,2" 
                            Background="{StaticResource LightBrush}"
                            BorderBrush="{StaticResource LightBrush}" 
                            CornerRadius="0" >
                    <ContentPresenter x:Name="ContentSite" Margin="5,0"  VerticalAlignment="Center" HorizontalAlignment="Center"
                                          ContentSource="Header"  RecognizesAccessKey="True"/>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter TargetName="Border" Property="BorderBrush" Value="#57B481" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                    <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                    <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </TabControl.Resources>


    <TabItem  MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" >
        <TabItem.Header>
            <TextBlock TextAlignment="Center" Text="Actions Needed" TextWrapping="Wrap" />
        </TabItem.Header>
    </TabItem>
    <TabItem  MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" >
        <TabItem.Header>
            <TextBlock TextAlignment="Center" Text="Actions Needed 1" TextWrapping="Wrap" />
        </TabItem.Header>
    </TabItem>
    <TabItem  MaxWidth="55" HorizontalAlignment="Center" Background="White" Template="{StaticResource simpleTI}" >
        <TabItem.Header>
            <TextBlock TextAlignment="Center" Text="Actions Needed 2" TextWrapping="Wrap" />
        </TabItem.Header>
    </TabItem>
</TabControl>

WPF TabItem border isn't reflecting BorderThickness property

2 Answers