带有图像的 WPF TabItem 样式

Posted 2023-02-19

【中文标题】带有图像的 WPF TabItem 样式

【英文标题】：WPF TabItem Style with image

【发布时间】：2011-01-04 17:42:06

【问题描述】：

我有一个TabControl 和TabItems，TabItems 有文字和一个图标。为此，我必须将StackPanel 添加到TabItem。

但是，一旦我添加了StackPanel，我就无法再控制文本的默认样式了。

资源：

<Style TargetType="x:Type TabItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type TabItem">
                <Grid Name="tabItem">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Border Grid.Row="1" Name="tabItemStyle" Background="Transparent" BorderBrush="Transparent" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0" SnapsToDevicePixels="True" Margin="0, 0, 5, 0">
                        <ContentPresenter x:Name="ContentSite" TextBlock.Foreground="White" TextBlock.FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="14,3,18,3">
                        </ContentPresenter>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="tabItemStyle" Property="Background" Value="#ecf3f9" />
                        <Setter TargetName="tabItemStyle" Property="BorderBrush" Value="#29458e" />
                        <Setter TargetName="tabItemStyle" Property="BorderThickness" Value="1,1,1,0" />
                        <Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="#29458e" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="False" />
                            <Condition Property="IsMouseOver" Value="True" />
                        </MultiTrigger.Conditions>
                        <MultiTrigger.Setters>
                            <Setter TargetName="tabItemStyle" Property="Background" Value="#6381be" />
                            <Setter TargetName="tabItemStyle" Property="BorderBrush" Value="#97acd4" />
                            <Setter TargetName="tabItemStyle" Property="BorderThickness" Value="1,1,1,0" />
                        </MultiTrigger.Setters>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

标签项：

<TabItem>
    <TabItem.Header>
        <StackPanel Orientation="Horizontal">
            <Image VerticalAlignment="Center" Source="/images/icons/_24/reports.png" Width="24" />
            <TextBlock VerticalAlignment="Center" Margin="5, 0" >Reports</TextBlock>
        </StackPanel>
    </TabItem.Header>
</TabItem>

相关行是资源（样式）中的ContentPresenter。 TextBlock.Foreground="White" 不再有效。我可以看到原因，但无法找出其他方法。有什么想法吗？

【问题讨论】：

你可以只为文本块定义中的文本着色

所有选项卡都有相同的配色方案。必须在触发器中更改前景色。否则我会重复很多代码。

【参考方案1】：

只需在实际TabItem上设置相关属性即可。例如，请注意您是否将以下内容放在样式的顶部：

<Setter Property="Foreground" Value="Red" />

文本仍然在变化。你不需要参考ContentPresenter的TextBlock，即使你这样做了，你也可以将TemplateBindings应用到它的属性上，这样当TabItem的属性改变时，ContentPresenter'秒。