CODEWITHSUNDEEP
xamltabcontrol
Edward Tanguay
Edward Tanguay

Reputation: 193442

In XAML TabControl, how to set the style of the focused tab header?

I can set the background of each TabItem with TabItem.Background, but when that tab is selected it is plain vanilla white.

How do I set the style of the tab header that is focused?

<TabControl DockPanel.Dock="Top">
    <TabControl.Background>
        <LinearGradientBrush EndPoint="1.115,1.13" StartPoint="0,-0.02">
            <GradientStop Color="#FFFFFFFF" Offset="1"/>
            <GradientStop Color="#FFE0E376" Offset="0"/>
        </LinearGradientBrush>
    </TabControl.Background>

    <TabItem Header="Allgem." Cursor="Hand">
        <TabItem.Background>
            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFF3F3F3" Offset="0"/>
                <GradientStop Color="#FFF11818" Offset="1"/>
            </LinearGradientBrush>
        </TabItem.Background>
        <StackPanel DockPanel.Dock="Bottom" Width="400" HorizontalAlignment="Left" Margin="10">
            ...

Upvotes: 0

Views: 6280

Answers (1)

Andy
Andy

Reputation: 30418

You can use a trigger to change the style only for the selected tab:

<TabControl DockPanel.Dock="Top">
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="#FFF3F3F3" Offset="0"/>
                                <GradientStop Color="#FFF11818" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TabControl.Resources>
    <TabControl.Background>
        <LinearGradientBrush EndPoint="1.115,1.13" StartPoint="0,-0.02">
            <GradientStop Color="#FFFFFFFF" Offset="1"/>
            <GradientStop Color="#FFE0E376" Offset="0"/>
        </LinearGradientBrush>
    </TabControl.Background>
    <TabItem Header="Allgem." Cursor="Hand">
        <StackPanel DockPanel.Dock="Bottom" Width="400"
            HorizontalAlignment="Left" Margin="10">
        ...
        </StackPanel>
    </TabItem>
</TabControl>

This will set the background of the selected tab to the red gradient used in your sample code.

Upvotes: 4

Related Questions