logo标签列表

WPF选项卡控件：如何设置选项卡颜色？

wpfcolorswpf-controlstabcontrol
5
我在我的WPF应用程序中有一个TabControl，它使用WPF标签控件的默认颜色。换句话说，活动选项卡是白色的，非活动选项卡是银色的。我已经通过设置TabControl对象的Background属性将所有选项卡页面的背景颜色更改为Beige，但它不会更改选项卡的颜色，只会更改客户端区域的颜色。因此，我的活动选项卡具有米色的客户端区域和白色的选项卡。
我想将选项卡的颜色设置为与客户端区域匹配，以便整个页面都是米色的。我该怎么做？谢谢。
顺便说一句，我尝试在TabItem上设置Background属性，但这只会在TabItem处于非活动状态时更改选项卡的颜色。 - David Veeneman
2个回答
5

以下是我的一个项目中选项卡样式的示例。抱歉有些代码与此无关，我相信您可以从中提取所需内容。

<Style x:Uid="Style_21" TargetType="{x:Type TabItem}">
        <Setter x:Uid="Setter_75" Property="Template">
            <Setter.Value>
                <ControlTemplate x:Uid="ControlTemplate_7" TargetType="{x:Type TabItem}">
                    <Grid x:Uid="Grid_13">
                        <Border 
                             x:Uid="Border" Name="Border"
                             Background="#F0F0F0"
                             BorderBrush="LightGray" 
                             BorderThickness="1,1,1,0" 
                             CornerRadius="4,4,0,0" 
                             Margin="0,0,2,0" SnapsToDevicePixels="True" >
                            <TextBlock x:Uid="TextBlock" FontSize="15" 
                                       HorizontalAlignment="Center" 
                                       Name="TextBlock" 
                                       Foreground="DarkGray">
                            <ContentPresenter x:Uid="ContentSite" x:Name="ContentSite"
                                               VerticalAlignment="Center"
                                               HorizontalAlignment="Center"
                                               ContentSource="Header"
                                               Margin="12,2,12,2"/>
                            </TextBlock>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger x:Uid="Trigger_14" Property="IsSelected" Value="True">
                            <Setter x:Uid="Setter_76" TargetName="Border" Property="Background" Value="White" />
                            <Setter x:Uid="Setter_77" TargetName="Border" Property="BorderBrush" Value="Gray" />
                            <Setter x:Uid="Setter_78" TargetName="TextBlock" Property="Foreground" Value="Black" />
                            <Setter x:Uid="Setter_79" TargetName="Border" Property="Margin" Value="0,0,2,-1" />
                        </Trigger>
                        <Trigger x:Uid="Trigger_15" Property="IsMouseOver" Value="True" SourceName="Border" >
                            <Setter x:Uid="Setter_80" TargetName="Border" Property="Background" Value="White" />
                            <Setter x:Uid="Setter_81" TargetName="Border" Property="BorderBrush" Value="DarkGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

希望这能帮到你。
是的，我担心我不得不进入控件模板。我希望我错过了更简单的东西。好吧，你的标记是一个很好的指南！感谢你的帮助。 - David Veeneman
4
我已经找到了解决方案。为了感谢levanovd的帮助，我将选择他的答案作为正确的答案。
基本上，修复方法是对TabItem控件模板进行一行更改。首先复制正常的TabItem控件模板，并将控件模板设置为目标类型为TabItem的所有控件。找到IsSelected触发器，并将其更改为以下内容：
<Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>
Bd是设置TabItem标签区域边框和背景的Border控件。这段标记告诉WPF将Bd的Background属性绑定到相对源。在这种情况下，相对源是托管TabItem的TabControl的Background属性。因此，当您设置TabControl的Background属性时，颜色将流经所有托管在TabControl中的TabItem控件的标签区域。

下面是我在Blend 3中创建的演示的完整标记：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication1.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Window.Resources>

        <Style x:Key="TabItemFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1" SnapsToDevicePixels="true"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
        <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#F3F3F3" Offset="0"/>
            <GradientStop Color="#EBEBEB" Offset="0.5"/>
            <GradientStop Color="#DDDDDD" Offset="0.5"/>
            <GradientStop Color="#CDCDCD" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#EAF6FD" Offset="0.15"/>
            <GradientStop Color="#D9F0FC" Offset=".5"/>
            <GradientStop Color="#BEE6FD" Offset=".5"/>
            <GradientStop Color="#A7D9F5" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
        <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
        <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
        <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Padding" Value="6,1,6,1"/>
            <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid SnapsToDevicePixels="true">
                            <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}">
                                <ContentPresenter x:Name="Content" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Panel.ZIndex" Value="1"/>
                                <Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="false"/>
                                    <Condition Property="IsMouseOver" Value="true"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
                            </MultiTrigger>
                            <Trigger Property="TabStripPlacement" Value="Bottom">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Left">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Right">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Top"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-2,-2,-1"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Bottom"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-1,-2,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Left"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-2,-1,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Right"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-1,-2,-2,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <TabControl Background="Beige" HorizontalAlignment="Left" VerticalAlignment="Top" Width="500" Height="300">
            <TabItem Header="TabItem">
                <Grid/>
            </TabItem>
            <TabItem Header="TabItem">
                <Grid/>
            </TabItem>
        </TabControl>
    </Grid>
</Window>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接