How to style a TabControl's TabItem without styling their ContentPresenters?

问题

I have a TabControl, and I apply a style to it in order for my TabItems' header to have no background nor border.

My problem is that if I add a trigger for the selected one, the corresponding panel get styled as well. So if I choose to set the selected TabItem's foreground to Red, the panel's textblocks become red as well.

Fun fact: it doesn't apply to Labels. I'm quite lost.

Here's the XAML, that tests pretty fast in Kaxaml:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
    <TabControl>
        <TabControl.Resources>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect ShadowDepth="0" Color="Black" BlurRadius="3"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid>
                                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Panel.ZIndex" Value="100" />
                                    <Setter Property="FontWeight" Value="Bold"/>
                                    <Setter Property="Foreground" Value="DarkOrange"/>
                                    <Setter Property="Effect">
                                        <Setter.Value>
                                            <DropShadowEffect ShadowDepth="0" BlurRadius="4" Color="Blue"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Foreground" Value="#FF553333" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Style>
        </TabControl.Resources>
        <TabItem Header="TAB1">
            <TextBlock Text="WHY AM I GETTING STYLED D:"/>
        </TabItem>
        <TabItem Header="TAB2">
          <TextBlock Text="ME TOO D:"/>
        </TabItem>
    </TabControl>
    </Grid>
</Window>

Edit after answer (in case anyone's interested in this oh-so-pretty TabControl...):

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <TabControl>
        <TabControl.Resources>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect ShadowDepth="0" Color="Black" BlurRadius="3"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Border BorderBrush="Transparent" Background="Transparent">
                                    <ContentPresenter x:Name="TabItemContent" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True"/>                                    
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Panel.ZIndex" Value="100" TargetName="TabItemContent"/>
                                    <Setter Property="TextElement.FontWeight" Value="Bold" TargetName="TabItemContent"/>
                                    <Setter Property="TextElement.Foreground" Value="DarkOrange" TargetName="TabItemContent"/>
                                    <Setter Property="Effect" TargetName="TabItemContent">
                                        <Setter.Value>
                                            <DropShadowEffect ShadowDepth="0" BlurRadius="4" Color="Blue"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="TextElement.Foreground" Value="Black" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Style>
        </TabControl.Resources>
        <TabItem Header="TAB1">
          <StackPanel>
           <TextBlock Text="TextBlock"/>
           <Label Content="Label"/>
          </StackPanel>

        </TabItem>
        <TabItem Header="TAB2">
            <StackPanel>
           <TextBlock Text="TextBlock too"/>
           <Label Content="Another Label"/>
          </StackPanel>
        </TabItem>
    </TabControl>
</Grid>
</Window>

回答1:

I made a change in your code!! Its fine now! check it

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TabControl>
            <TabControl.Resources>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect ShadowDepth="0" Color="Black" BlurRadius="3"/>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>

                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                                <Grid>                                    
                                        <ContentPresenter x:Name="TabItemContent" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True"/>                                    
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="Panel.ZIndex" Value="100" />
                                        <Setter Property="FontWeight" Value="Bold"/>
                                        <Setter Property="TextElement.Foreground" TargetName="TabItemContent" Value="DarkOrange"/>
                                        <Setter Property="Effect">
                                            <Setter.Value>
                                                <DropShadowEffect ShadowDepth="0" BlurRadius="4" Color="Blue"/>
                                            </Setter.Value>
                                        </Setter>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter Property="TextElement.Foreground" Value="Black" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>

                </Style>
            </TabControl.Resources>
            <TabItem Header="TAB1">
                <TextBlock Text="Now, I am perfect:"/>
            </TabItem>
            <TabItem Header="TAB2">
                <TextBlock Text="ME TOO D:"/>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

回答2:

Just in case you want to keep the ContentPresenter try this small modification:

            <Style TargetType="{x:Type TabItem}">
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect ShadowDepth="0" Color="Black" BlurRadius="3"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid>
                                <ContentPresenter x:Name="MyTarget" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Panel.ZIndex" Value="100" />
                                    <Setter Property="FontWeight" Value="Bold"/>
                                    <Setter Property="TextElement.Foreground" Value="DarkOrange" TargetName="MyTarget"/>
                                    <Setter Property="Effect">
                                        <Setter.Value>
                                            <DropShadowEffect ShadowDepth="0" BlurRadius="4" Color="Blue"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="TextElement.Foreground" Value="#FF553333" TargetName="MyTarget"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Style>

来源：https://stackoverflow.com/questions/29305740/how-to-style-a-tabcontrols-tabitem-without-styling-their-contentpresenters

标签

wpf

xaml

tabcontrol

tabitem