WPF TabItem Header Styling ONLY

2
votes

I am writing a WPF application and trying to style the TabItem header ONLY to show a border with background color change when selected. The problem is when I add that style it messes up the style for my TextBlock items in the TabItem. I'm not a WPF / XAML expert. Below is the style I'm using in my TabControl. I am also using MahApps metro stylings. Any ideas would be appreciated.

            <TabControl.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="2,0">
                                    <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="10,2"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource AccentColorBrush}" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
2
c#wpfxaml
You say "it messes up the style for my TextBlock items in the TabItem". Can you be more specific? I can't reproduce any TextBlock display issues with the XAML you provided. - 15ee8f99-57ff-4f92-890c-b56153
With the styling in place it makes all my textblock items have a black foreground. Which works fine when I use a white background but when I switch it to a black background you can't see the textblock items because the remain black instead of changing to white like my label items do. If their was a way in the Style to just target the TabItem.Header element instead of the entire TabItem I think that would fix my issue, but I don't think you can do that, from my limited knowledge of XAML/WPF. - Developer
There's nothing in that XAML which could change anything's foreground color. Did you try setting BasedOn for the Style? <Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}"> - 15ee8f99-57ff-4f92-890c-b56153
You ROCK! That fixed my issues. My textblock elements display correctly. I'm not a XAML / WPF expert, I'd probably never found that solution. Thanks again!!! - Developer

2 Answers

1
votes

When you write a new style for a WPF control, if you're not totally reskinning everything, it's best to make it inherit from the existing implicit style. There's likely to be a lot of other stuff in there that you don't want to lose, and it looks like that's the case here. Try setting the BasedOn attribute like this, to the implicit TabItem style:

<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">

And see if that helps.

In WPF, the runtime Type of a control is conventionally used as the resource key for the style that's applied to it by default.

0
votes

You can also define the style externally. This Style will help you to wrap the header content and align the header content to the center.

<Style x:Key="newTabItemStyle" TargetType="{x:Type TabItem}">
  <setter property="MaxWidth" value="150"/>
  <Setter Property="HeaderTemplate">
    <Setter.Value>
      <DataTemplate >
        <TextBlock  TextWrapping="Wrap" Text="{Binding}"  TextAlignment="Center"/>
      </DataTemplate>
   </Setter.Value>
</Setter>