Changing Border of WPF Tab Control Dynamically

Question

I'm using my own control template for the TabControl and TabItem in the application resource of my project.

In the template, the selected TabItem is colored depending on a property 'SelectedBrush' which returns a Brush. I would also like the Border of the Tab Control (boTabControl, the border around the content presenter) to do be the same color as the selected TabItem.

Is this a code thing, or can it be done in the application resource?

<Style TargetType="{x:Type TabControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid Margin="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TabPanel Grid.Row="0" Panel.ZIndex="1" Margin="0,3,0,0" IsItemsHost="True" Background="Transparent"/>
                    <Border x:Name="boTabControl" Grid.Row="1" BorderThickness="1,3,0,0" CornerRadius="0" Padding="0" Margin="0" BorderBrush="{DynamicResource SelectedBrush}">
                        <ContentPresenter ContentSource="SelectedContent" Margin="0"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="True">
                        <Setter TargetName="boTabControl" Property="BorderBrush" Value="{Binding SelectedBrush}" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="boTabControl" Property="BorderBrush" Value="Blue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabItem}">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid x:Name="Panel" Background="Transparent">
                    <Border x:Name="Border" Margin="0,0,-3,0" BorderThickness="1,1,1,0" CornerRadius="10,30,0,0">
                        <ContentPresenter x:Name="ContentSite" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ContentSource="Header" Margin="10"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="FontWeight" Value="Bold" />
                        <Setter TargetName="Border" Property="Background" Value="{Binding SelectedBrush}" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="LightGray" />
                        <Setter Property="FontWeight" Value="Normal" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="FontWeight" Value="Bold" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Public ReadOnly Property SelectedBrush As Brush
    Get
        If Me.tcMain.SelectedItem Is Nothing Then
            Return Brushes.Aquamarine
            Exit Property
        End If
        Dim myTabItem As TabItem = Me.tcMain.SelectedItem
        Dim myBrush As Brush = Brushes.Blue
        Select Case myTabItem.Name
            Case Me.tiSale.Name
                myBrush = Brushes.Green
            Case Me.tiReturn.Name
                myBrush = Brushes.Red
            Case Me.tiStock.Name
                myBrush = Brushes.Black
            Case Me.tiAdmin.Name
                myBrush = Brushes.Purple
        End Select

        Return myBrush
    End Get
End Property

more details about "function 'SelectedBrush'"? also [this post](https://stackoverflow.com/questions/9232502/template-binding-with-attached-properties) shows a nice approach to parametrize templates — ASh, Mar 02 '17 at 07:30
I've added the SelectedBrush function at the bottom of the code. This code sits in the Form that hosts the Tab Control — Rhydian Coombs, Mar 02 '17 at 07:41

ASh · Accepted Answer · 2017-03-02T10:36:19.280

here is an approach with an attached property SelectedBrush of type Brush

add Attached class to project (and make build):

public class Attached
{
    public static DependencyProperty SelectedBrushProperty = DependencyProperty.RegisterAttached("SelectedBrush", typeof(Brush), typeof(Attached));

    public static Brush GetSelectedBrush(DependencyObject obj)
    {
        return (Brush) obj.GetValue(SelectedBrushProperty);
    }

    public static void SetSelectedBrush(DependencyObject obj, Brush value)
    {
        obj.SetValue(SelectedBrushProperty, value);
    }
}

then assign colors to each TabItem:

<TabControl>
    <TabItem Name="tiSale" local:Attached.SelectedBrush="Green" Header="123"/>
    <TabItem Name="tiReturn" local:Attached.SelectedBrush="Red" Header="abc"/>
    <TabItem Name="tiStock" local:Attached.SelectedBrush="Black" Header="XYZ"/>
</TabControl>

change TabControl template to use Attached.SelectedBrush:

<Style TargetType="{x:Type TabControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid Margin="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TabPanel Grid.Row="0" Panel.ZIndex="1" Margin="0,3,0,0" IsItemsHost="True" Background="Transparent"/>
                    <Border x:Name="boTabControl" Grid.Row="1" 
                            BorderThickness="1,3,0,0" 
                            BorderBrush="{Binding Path=SelectedItem.(local:Attached.SelectedBrush), RelativeSource={RelativeSource TemplatedParent}}"
                            CornerRadius="0" Padding="0" Margin="0">
                        <ContentPresenter ContentSource="SelectedContent" Margin="0"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

to use the same brush for TabItem, change Background setter like this:

<Setter TargetName="Border" Property="Background" 
        Value="{Binding (local:Attached.SelectedBrush), RelativeSource={RelativeSource TemplatedParent}}" />

SelectedBrush property from code behind is not used here

Thanks for the code. I'll check it out later. One question in the meantime...will this deal with making the various tab items gray when they are not selected? — Rhydian Coombs, Mar 02 '17 at 10:21
@RhydianCoombs, it will with minor modification (see edit). didn't notice SelectedBrush was used in TabItem template because that part of code was hidden by long horizontal scroll — ASh, Mar 02 '17 at 10:37
Thanks so much for the info you provided. It was a great and have got it all working. Rhyd. — Rhydian Coombs, Mar 02 '17 at 21:43
Apologies. Not posted much on this site. Should be accepted now — Rhydian Coombs, Mar 03 '17 at 07:27

Changing Border of WPF Tab Control Dynamically

1 Answers1