WPF ItemTab 样式答案

【问题标题】：WPF ItemTab StyleWPF ItemTab 样式
【发布时间】：2016-11-07 22:11:08
【问题描述】：

我在我的应用程序中使用 tabcontrol 作为菜单。我想设计它的样式，并且项目标题现在看起来很棒。问题是这会在“内容”区域生效，但这不是我想要的。

这是我窗口中的代码

<TabControl Name="Tab_Content" Grid.Row="1" TabStripPlacement="Left" >
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Grid Name="Panel">
                                <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Left"
                                    ContentSource="Header"
                                    Height="25"
                                    Margin="5,10,0,0"  Width="150" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Foreground" Value="Blue" />
                                    <Setter Property="FontWeight" Value="Bold" />
                                    <Setter TargetName="Panel" Property="Background" Value="White" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="False">
                                    <Setter Property="Foreground" Value="Black" />
                                    <Setter TargetName="Panel" Property="Background" Value="White" />
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Foreground" Value="White" />
                                    <Setter TargetName="Panel" Property="Background" Value="Blue" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources> 
        <TabItem Name="item_Home"  Header="Home" >
            <Grid>
                <Label Name="Test" Content="hello" />
            </Grid>
        </TabItem>

这就是它的样子：

current view how it's look

有没有办法单独设置内容区域的样式？

【问题讨论】：

标签： c# wpf xaml styles

【解决方案1】：

尝试为标题文本块设置样式并引用祖先 TabItem。

XAML：

<Style TargetType="{x:Type TextBlock}" x:Key="toggleTabStyle">
    <Setter Property="Foreground" Value="Black" />
    <Setter  Property="Background" Value="White" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
            <Setter Property="Foreground" Value="Blue" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Background" Value="White" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background" Value="White" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Background" Value="Blue" />
        </DataTrigger>
    </Style.Triggers>
</Style>

并在每个 TabItem 中引用：

    <TabItem>
        <TabItem.Header>
            <TextBlock Text="Header Text Here" Style="{StaticResource toggleTabStyle}"/>
        </TabItem.Header>                        
        ...
    </TabItem>

【讨论】：