How to change tab header border color?

Question

I have TabControl element.

I changed TabControl's BorderBrush to red, as shown. What drives me mad is I cannot have the same color on the tab itself.

I tried many examples, like WPF TabItem Header Styling , but no joy. The border I want to change is not a part of Header element. The Header element is inside that thing I want to change.

I tried to use complete template from https://msdn.microsoft.com/en-us/library/ms754137(v=vs.110).aspx , no joy, looks fugly and I have no idea how to even begin to make it look how it should look.

Where can I get the original template to modify? I just want to change the border color, nothing else. I don't mind pasting and editing a huge template, but I need the correct, actual template.

(I use .NET Framework 4.6.2.)

I think Blend allowed you to create a copy of the original template to modify. — Joey, Aug 12 '16 at 16:36

score 2 · Answer 1 · answered Aug 12 '16 at 16:43

Here's the TabItemStyle from Blend.

The line you want is the mainBorder near the very beginning. You can see that the border brush that you choose is being applied but the border thickness isn't allowing it to really show. I changed it to 2,2,2,0 and I got a red border around the tabitem.

   <Style x:Key="TabItemStyle1" TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="{StaticResource TabItem.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource TabItem.Static.Border}"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="6,2,6,2"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
                        <Border x:Name="mainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="2,2,2,0" Background="{TemplateBinding Background}" Margin="0">
                            <Border x:Name="innerBorder" BorderBrush="{StaticResource TabItem.Selected.Border}" BorderThickness="1,1,1,0" Background="{StaticResource TabItem.Selected.Background}" Margin="-1" Opacity="0"/>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                            <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Margin" Value="-2,-2,0,-2"/>
                            <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Margin" Value="-2,0,-2,-2"/>
                            <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Margin" Value="0,-2,-2,-2"/>
                            <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                                <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Panel.ZIndex" Value="1"/>
                            <Setter Property="Margin" Value="-2,-2,-2,0"/>
                            <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                            <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                            <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                        </MultiDataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

score 1 · Accepted Answer · answered Aug 12 '16 at 16:37

1

In the XAML Design mode, right click on your TabControl, and on the context menu select Edit Template | Edit a Copy.... That'll get you the actual template that's really in use there (at least as far as the XAML Designer knows at design time), not some cheeseball example thing from MSDN.

As for editing that template once you've got it... that which doesn't kill you makes you stronger. Usually.

answered Aug 12 '16 at 16:37

15ee8f99-57ff-4f92-890c-b56153

36,786
7
62
114

THANK YOU KIND STRANGER! – Harry Aug 12 '16 at 16:44

How to change tab header border color?

2 Answers2