CODEWITHSUNDEEP
c#.netwpftabcontroltabitem
Naufal Fikri
Naufal Fikri

Reputation: 1131

How to change a background of a single tab item header in WPF?

I've been stylizing a TabControl in WPF XAML (.NET 4), all i can do is style a tab based on triggers or identically style them all. Is there any way that only the first tab is stylized different while the other tabs are stylized different than the first tab but the same as each other (a.k.a using the Tab Index to stylize a TabItem).

Thank you.

Upvotes: 2

Views: 3219

Answers (2)

Bilal Hashmi
Bilal Hashmi

Reputation: 1485

If you want to change the background color of just selected tab item then use that kind of style and apply that style to tab Item.

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle">
    <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border" Background="Red" BorderBrush="#FF1467AF"
                                    BorderThickness="1" 
                                    Margin="0,0,5,0" CornerRadius="8,8,0,0" SnapsToDevicePixels="True">
                            <TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Name="TextBlock" Foreground="White">
                      <ContentPresenter VerticalAlignment="Center"  HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
                            </TextBlock>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Yellow"/>

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

But if you want to just change the background color of First tab item then define two styles and apply one to first tab item and second one to other

Style for tab item 1:

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyleForFirst">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border" Background="Red" BorderBrush="#FF1467AF"
                                    BorderThickness="1" 
                                    Margin="0,0,5,0" CornerRadius="8,8,0,0" SnapsToDevicePixels="True">
                            <TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Name="TextBlock" Foreground="White">
                      <ContentPresenter VerticalAlignment="Center"  HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
                            </TextBlock>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
 </Style>

Style for other tab items:

<Style TargetType="{x:Type TabItem}" x:Key="TabItemStyleForOther">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border" Background="Yellow" BorderBrush="#FF1467AF"
                                    BorderThickness="1" 
                                    Margin="0,0,5,0" CornerRadius="8,8,0,0" SnapsToDevicePixels="True">
                            <TextBlock FontFamily="Arial" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Name="TextBlock" Foreground="White">
                      <ContentPresenter VerticalAlignment="Center"  HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
                            </TextBlock>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
 </Style>

Upvotes: 3

Marat Khasanov
Marat Khasanov

Reputation: 3848

You can use AlternationCount and AlternationIndex:

<TabControl AlternationCount="{Binding Path=Items.Count,RelativeSource={RelativeSource Self}}">
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex"
                            Value="0"> <!-- First item -->
                    <Setter Property="FontWeight"
                            Value="Bold"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TabControl.ItemContainerStyle>
    <TabItem Header="First"/>
    <TabItem Header="Second"/>
    <TabItem Header="Third"/>
    <TabItem Header="Fourth"/>
</TabControl>

Upvotes: 5

Related Questions