Question

I have a TabControl in my WPF application that uses the default colors for the WPF tab control. In other words, the active tab is white, and the inactive tabs are silver. I have changed the Background color of all of the tab pages to Beige, by setting the Background property of the TabControl object, but it doesn’t change the tab color, only the client area. So, I have ended up with an active tab that has a beige client area and a white tab.

I would like to set the tab Color to match the client area, so that the entire page is beige. How would I do that? Thanks.

Answer 1

Here is an example of tab item style from one of my projects. Sorry for some irrelevant code, I’m sure you will extract what you need from it.

<Style x:Uid="Style_21" TargetType="{x:Type TabItem}">
        <Setter x:Uid="Setter_75" Property="Template">
            <Setter.Value>
                <ControlTemplate x:Uid="ControlTemplate_7" TargetType="{x:Type TabItem}">
                    <Grid x:Uid="Grid_13">
                        <Border 
                             x:Uid="Border" Name="Border"
                             Background="#F0F0F0"
                             BorderBrush="LightGray" 
                             BorderThickness="1,1,1,0" 
                             CornerRadius="4,4,0,0" 
                             Margin="0,0,2,0" SnapsToDevicePixels="True" >
                            <TextBlock x:Uid="TextBlock" FontSize="15" 
                                       HorizontalAlignment="Center" 
                                       Name="TextBlock" 
                                       Foreground="DarkGray">
                            <ContentPresenter x:Uid="ContentSite" x:Name="ContentSite"
                                               VerticalAlignment="Center"
                                               HorizontalAlignment="Center"
                                               ContentSource="Header"
                                               Margin="12,2,12,2"/>
                            </TextBlock>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger x:Uid="Trigger_14" Property="IsSelected" Value="True">
                            <Setter x:Uid="Setter_76" TargetName="Border" Property="Background" Value="White" />
                            <Setter x:Uid="Setter_77" TargetName="Border" Property="BorderBrush" Value="Gray" />
                            <Setter x:Uid="Setter_78" TargetName="TextBlock" Property="Foreground" Value="Black" />
                            <Setter x:Uid="Setter_79" TargetName="Border" Property="Margin" Value="0,0,2,-1" />
                        </Trigger>
                        <Trigger x:Uid="Trigger_15" Property="IsMouseOver" Value="True" SourceName="Border" >
                            <Setter x:Uid="Setter_80" TargetName="Border" Property="Background" Value="White" />
                            <Setter x:Uid="Setter_81" TargetName="Border" Property="BorderBrush" Value="DarkGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Hope it helps.