CODEWITHSUNDEEP
c#wpfcolorstabitem
Patrick
Patrick

Reputation: 2593

How to avoid that a tabItem loses colour

I have a WPF program with a tabItems interfaces set on the left hand side.

What I want is that the tabItem keeps the colour as in the following picture:

enter image description here

Please notice where is the mouse pointer. When there the tabItem is coloured.

When going in another part of the interface on the right the tabItem looses the colour and gets embossed:

enter image description here

I am not sure if it helps posting my xaml file helps. Basically I noticed that when the arrow goes on a datagrid on the right the tabItem is coloured when going on the free space it isn't.

Please notice that I don't want the tabItem to be of a particular colour, it has to follow the system palette and so to be in the correct system colour.

Thank you for any help.

Upvotes: 0

Views: 36

Answers (1)

Zein Makki
Zein Makki

Reputation: 30042

Here is an Article from Microsoft describing how to use ColorTemplate with Triggers to solve your issue.

Here is the example from article in case in the future the link is down for some reason:

<Style TargetType="{x:Type TabItem}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabItem}">
        <Grid>
          <Border 
            Name="Border"
            Margin="0,0,-4,0" 
            Background="{StaticResource LightBrush}"
            BorderBrush="{StaticResource SolidBorderBrush}" 
            BorderThickness="1,1,1,1" 
            CornerRadius="2,12,0,0" >
            <ContentPresenter x:Name="ContentSite"
              VerticalAlignment="Center"
              HorizontalAlignment="Center"
              ContentSource="Header"
              Margin="12,2,12,2"
              RecognizesAccessKey="True"/>
          </Border>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsSelected" Value="True">
            <Setter Property="Panel.ZIndex" Value="100" />
            <Setter TargetName="Border" Property="Background" Value="{StaticResource WindowBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Resources:

<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

  ...

<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

  ...

<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />

  ...

<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

  ...

<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

  ...

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

Upvotes: 1

Related Questions