如何更改具有嵌套文本的 WPF TabItem 的文本前景?

发布于 2024-07-26 04:57:24 字数 3172 浏览 7 评论 0原文

我希望每当选项卡变为活动状态时,TabItem 文本的前景就会发生变化。 我使用了以下内容,它工作正常,直到我更改了选项卡中显示的内容类型:

<TabControl Style="{DynamicResource SidebarTabControl}">
    <TabItem Header="TabItem" Style="{DynamicResource SidebarTab}" />
</TabControl>

<Style x:Key="SidebarTabForegroundStyleSelected">
    <Setter Property="TextBlock.Foreground" Value="White" />
</Style>

<Style x:Key="SidebarTabForegroundStyle">
    <Setter Property="TextBlock.Foreground" Value="Black" />
</Style>

<Style x:Key="SidebarTab" TargetType="TabItem">
    <Setter Property="Padding" Value="10,12,2,12" />
    <Setter Property="BorderThickness" Value="0,1,0,1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border Padding="{TemplateBinding Padding}" 
                    Name="tab" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    BorderBrush="{StaticResource SidebarTabBorderBrush}"
                    SnapsToDevicePixels="True">
                    <ContentPresenter Style="{StaticResource SidebarTabForegroundStyle}" Name="content" ContentSource="Header" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
                        <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
                        <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyleSelected}" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
                        <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
                        <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyle}" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

当我将 TabItem 更改为:

<TabControl Style="{DynamicResource SidebarTabControl}">
    <TabItem Style="{DynamicResource SidebarTab}">
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Height="16" Source="..\..\Icons\cog.png" />
                <TextBlock Text="TabItem" Margin="5,0,0,0" VerticalAlignment="Center" />
            </StackPanel>
        </TabItem.Header>
    </TabItem>
</TabControl>

选择选项卡时,文本的前景不再变为白色,而当选择选项卡时,文本的前景不再变为白色该选项卡不再被选中。 其他一切仍然正常工作。

有谁知道是否有办法在上面的 XAML 中完成更改前景颜色?

I'm looking to have the foreground of the text of a TabItem change whenever the tab becomes active. I was using the following, which was working fine until I changed the type of content being displayed in the tab:

<TabControl Style="{DynamicResource SidebarTabControl}">
    <TabItem Header="TabItem" Style="{DynamicResource SidebarTab}" />
</TabControl>

<Style x:Key="SidebarTabForegroundStyleSelected">
    <Setter Property="TextBlock.Foreground" Value="White" />
</Style>

<Style x:Key="SidebarTabForegroundStyle">
    <Setter Property="TextBlock.Foreground" Value="Black" />
</Style>

<Style x:Key="SidebarTab" TargetType="TabItem">
    <Setter Property="Padding" Value="10,12,2,12" />
    <Setter Property="BorderThickness" Value="0,1,0,1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border Padding="{TemplateBinding Padding}" 
                    Name="tab" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    BorderBrush="{StaticResource SidebarTabBorderBrush}"
                    SnapsToDevicePixels="True">
                    <ContentPresenter Style="{StaticResource SidebarTabForegroundStyle}" Name="content" ContentSource="Header" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
                        <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
                        <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyleSelected}" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
                        <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
                        <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyle}" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

When I changed the TabItem to:

<TabControl Style="{DynamicResource SidebarTabControl}">
    <TabItem Style="{DynamicResource SidebarTab}">
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Height="16" Source="..\..\Icons\cog.png" />
                <TextBlock Text="TabItem" Margin="5,0,0,0" VerticalAlignment="Center" />
            </StackPanel>
        </TabItem.Header>
    </TabItem>
</TabControl>

The foreground of the text no longer turns to white when the tab is selected and back to black when the tab is no longer selected. Everything else still works correctly.

Does anyone know if there is a way to accomplish changing the color of the foreground in the XAML above?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

不美如何 2024-08-02 04:57:24

将触发器从控件模板移至样式:

<Grid>
    <Grid.Resources>
        <SolidColorBrush x:Key="SidebarTabBackgroundBrushSelected" Color="Gray"></SolidColorBrush>
        <SolidColorBrush x:Key="SidebarTabBorderBrushSelected" Color="Blue"></SolidColorBrush>
        <SolidColorBrush x:Key="SidebarTabBackgroundBrush" Color="LightGray"></SolidColorBrush>
        <SolidColorBrush x:Key="SidebarTabBorderBrush" Color="Green"></SolidColorBrush>

        <Style x:Key="SidebarTab" TargetType="TabItem">
            <Setter Property="Padding" Value="10,12,2,12" />
            <Setter Property="BorderThickness" Value="0,1,0,1" />
            <Setter Property="Foreground"  Value="Blue"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border Padding="{TemplateBinding Padding}" 
                Name="tab" 
                BorderThickness="{TemplateBinding BorderThickness}" 
                BorderBrush="{StaticResource SidebarTabBorderBrush}"
                SnapsToDevicePixels="True">
                            <ContentPresenter Name="content"
                                              ContentSource="Header" />
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
                                <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
                                <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Red"></Setter>
                </Trigger>
                </Style.Triggers>
        </Style>
    </Grid.Resources>
    <TabControl Style="{DynamicResource SidebarTabControl}">
        <TabItem Header="TabItem 1" Style="{DynamicResource SidebarTab}" />
        <TabItem Style="{DynamicResource SidebarTab}"  >
            <TabItem.Header>
                <StackPanel>
                    <TextBlock Text="a"></TextBlock>
                    <TextBlock Text="b"></TextBlock>
                </StackPanel>
            </TabItem.Header>
        </TabItem>
        <TabItem Header="TabItem 3" Style="{DynamicResource SidebarTab}" />
    </TabControl>
</Grid>

Move the trigger from the control template to the style:

<Grid>
    <Grid.Resources>
        <SolidColorBrush x:Key="SidebarTabBackgroundBrushSelected" Color="Gray"></SolidColorBrush>
        <SolidColorBrush x:Key="SidebarTabBorderBrushSelected" Color="Blue"></SolidColorBrush>
        <SolidColorBrush x:Key="SidebarTabBackgroundBrush" Color="LightGray"></SolidColorBrush>
        <SolidColorBrush x:Key="SidebarTabBorderBrush" Color="Green"></SolidColorBrush>

        <Style x:Key="SidebarTab" TargetType="TabItem">
            <Setter Property="Padding" Value="10,12,2,12" />
            <Setter Property="BorderThickness" Value="0,1,0,1" />
            <Setter Property="Foreground"  Value="Blue"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border Padding="{TemplateBinding Padding}" 
                Name="tab" 
                BorderThickness="{TemplateBinding BorderThickness}" 
                BorderBrush="{StaticResource SidebarTabBorderBrush}"
                SnapsToDevicePixels="True">
                            <ContentPresenter Name="content"
                                              ContentSource="Header" />
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
                                <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
                                <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Red"></Setter>
                </Trigger>
                </Style.Triggers>
        </Style>
    </Grid.Resources>
    <TabControl Style="{DynamicResource SidebarTabControl}">
        <TabItem Header="TabItem 1" Style="{DynamicResource SidebarTab}" />
        <TabItem Style="{DynamicResource SidebarTab}"  >
            <TabItem.Header>
                <StackPanel>
                    <TextBlock Text="a"></TextBlock>
                    <TextBlock Text="b"></TextBlock>
                </StackPanel>
            </TabItem.Header>
        </TabItem>
        <TabItem Header="TabItem 3" Style="{DynamicResource SidebarTab}" />
    </TabControl>
</Grid>
诠释孤独 2024-08-02 04:57:24

看来问题的出现是因为您设置了错误的属性:

<样式 x:Key="SidebarTabForegroundStyleSelected"> 
       
   

  <样式 x:Key="SidebarTabForegroundStyle"> 
       
   
  

您需要设置 TextElement.Foreground 或 TextBlock.Foreground

另外,由于它是继承属性,因此您可以直接在 TabItems 上设置 AttachedProperty,无需将其专门分配给内容。

<TabControl Style="{DynamicResource SidebarTabControl}">
    <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
            <Style.Triggers>
                <Trigger Property="IsSelected"
                         Value="True">
                    <Setter Property="TextElement.Foreground"
                            Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TabControl.ItemContainerStyle>
    <TabItem>
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Height="16"
                       Source="..\..\Icons\cog.png" />
                <TextBlock Text="TabItem"
                           Margin="5,0,0,0"
                           VerticalAlignment="Center" />
            </StackPanel>
        </TabItem.Header>
        Item 1
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <TextBlock Text="Tab 2" />
        </TabItem.Header>
        Item 2
    </TabItem>
    <TabItem Header="Item 3">
        Item 3
    </TabItem>
</TabControl>

It looks like the issue is coming up because you are setting the wrong property:

<Style x:Key="SidebarTabForegroundStyleSelected">
    <Setter Property="TextBox.Foreground" Value="White" />
</Style>

<Style x:Key="SidebarTabForegroundStyle">
    <Setter Property="TextBox.Foreground" Value="Black" />
</Style>

You need to be setting TextElement.Foreground or TextBlock.Foreground

Also, since it is an inherited property, you can just set the AttachedProperty directly on the TabItems, you don't need to assign it specifically to the content.

<TabControl Style="{DynamicResource SidebarTabControl}">
    <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
            <Style.Triggers>
                <Trigger Property="IsSelected"
                         Value="True">
                    <Setter Property="TextElement.Foreground"
                            Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TabControl.ItemContainerStyle>
    <TabItem>
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Height="16"
                       Source="..\..\Icons\cog.png" />
                <TextBlock Text="TabItem"
                           Margin="5,0,0,0"
                           VerticalAlignment="Center" />
            </StackPanel>
        </TabItem.Header>
        Item 1
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <TextBlock Text="Tab 2" />
        </TabItem.Header>
        Item 2
    </TabItem>
    <TabItem Header="Item 3">
        Item 3
    </TabItem>
</TabControl>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文