none
如何设置tabcontrol头部部分的背景色,但不更改其tabItem的内容背景色? RRS feed

  • 问题

  • 如题,设置tabcontrol头部部分,以及包含tabitem部分的背景色,但不能让tabitem的内容的背景色改变,如何做到?
    2018年12月18日 12:17

答案

  • @Trian555,

     <Window.Resources>
            <SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF" />
            <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC" />
            <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
                <Setter Property="Padding" Value="2" />
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}" />
                <Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabControl}">
                            <Grid
                                x:Name="templateRoot"
                                ClipToBounds="true"
                                KeyboardNavigation.TabNavigation="Local"
                                SnapsToDevicePixels="true">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="ColumnDefinition0" />
                                    <ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition x:Name="RowDefinition0" Height="Auto" />
                                    <RowDefinition x:Name="RowDefinition1" Height="*" />
                                </Grid.RowDefinitions>
                                <TabPanel
                                    x:Name="headerPanel"
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    Margin="2,2,2,0"
                                    Panel.ZIndex="1"
                                    Background="Blue"
                                    IsItemsHost="true"
                                    KeyboardNavigation.TabIndex="1" />
                                <Border
                                    x:Name="contentPanel"
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    KeyboardNavigation.DirectionalNavigation="Contained"
                                    KeyboardNavigation.TabIndex="2"
                                    KeyboardNavigation.TabNavigation="Local">
                                    <ContentPresenter
                                        x:Name="PART_SelectedContentHost"
                                        Margin="{TemplateBinding Padding}"
                                        ContentSource="SelectedContent"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="TabStripPlacement" Value="Bottom">
                                    <Setter TargetName="headerPanel" Property="Grid.Row" Value="1" />
                                    <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                                    <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                                    <Setter TargetName="RowDefinition1" Property="Height" Value="Auto" />
                                    <Setter TargetName="headerPanel" Property="Margin" Value="2,0,2,2" />
                                </Trigger>
                                <Trigger Property="TabStripPlacement" Value="Left">
                                    <Setter TargetName="headerPanel" Property="Grid.Row" Value="0" />
                                    <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                                    <Setter TargetName="headerPanel" Property="Grid.Column" Value="0" />
                                    <Setter TargetName="contentPanel" Property="Grid.Column" Value="1" />
                                    <Setter TargetName="ColumnDefinition0" Property="Width" Value="Auto" />
                                    <Setter TargetName="ColumnDefinition1" Property="Width" Value="*" />
                                    <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                                    <Setter TargetName="RowDefinition1" Property="Height" Value="0" />
                                    <Setter TargetName="headerPanel" Property="Margin" Value="2,2,0,2" />
                                </Trigger>
                                <Trigger Property="TabStripPlacement" Value="Right">
                                    <Setter TargetName="headerPanel" Property="Grid.Row" Value="0" />
                                    <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                                    <Setter TargetName="headerPanel" Property="Grid.Column" Value="1" />
                                    <Setter TargetName="contentPanel" Property="Grid.Column" Value="0" />
                                    <Setter TargetName="ColumnDefinition0" Property="Width" Value="*" />
                                    <Setter TargetName="ColumnDefinition1" Property="Width" Value="Auto" />
                                    <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                                    <Setter TargetName="RowDefinition1" Property="Height" Value="0" />
                                    <Setter TargetName="headerPanel" Property="Margin" Value="0,2,2,2" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter TargetName="templateRoot" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <TabControl Style="{StaticResource TabControlStyle1}">
                <TabItem Header="General">
                    <Label Content="Content goes here..." />
                </TabItem>
                <TabItem Header="Security" />
                <TabItem Header="Details" />
            </TabControl>
        </Grid>

    Like this:

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • 已建议为答案 ARM830 2018年12月21日 14:25
    • 已标记为答案 Trian555 2018年12月22日 3:59
    2018年12月19日 8:07
    版主

全部回复

  • Hi Trian555,

    你可以尝试一下的代码来实现设置tabcontrol头部部分的背景颜色。

     <TabControl>
                <TabControl.Resources>
                    <Style TargetType="{x:Type TabItem}">
                        <Setter Property="BorderThickness" Value="0" />
                        <Setter Property="Padding" Value="0" />
                        <Setter Property="HeaderTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <Border x:Name="grid" Background="Red">
                                        <ContentPresenter>
                                            <ContentPresenter.Content>
                                                <TextBlock
                                                    Margin="4"
                                                    FontSize="15"
                                                    Text="{TemplateBinding Content}" />
                                            </ContentPresenter.Content>
                                           
                                        </ContentPresenter>
                                    </Border>
                                    <DataTemplate.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}" Value="True">
                                            <Setter TargetName="grid" Property="Background" Value="Green" />
                                        </DataTrigger>
                                    </DataTemplate.Triggers>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </TabControl.Resources>
    
                <TabItem Header="General">
                    <Label Content="Content goes here..." />
                </TabItem>
                <TabItem Header="Security" />
                <TabItem Header="Details" />
            </TabControl>

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    2018年12月19日 3:00
    版主
  • Hi Trian555,

    你可以尝试一下的代码来实现设置tabcontrol头部部分的背景颜色。

     <TabControl>
                <TabControl.Resources>
                    <Style TargetType="{x:Type TabItem}">
                        <Setter Property="BorderThickness" Value="0" />
                        <Setter Property="Padding" Value="0" />
                        <Setter Property="HeaderTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <Border x:Name="grid" Background="Red">
                                        <ContentPresenter>
                                            <ContentPresenter.Content>
                                                <TextBlock
                                                    Margin="4"
                                                    FontSize="15"
                                                    Text="{TemplateBinding Content}" />
                                            </ContentPresenter.Content>
                                           
                                        </ContentPresenter>
                                    </Border>
                                    <DataTemplate.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}" Value="True">
                                            <Setter TargetName="grid" Property="Background" Value="Green" />
                                        </DataTrigger>
                                    </DataTemplate.Triggers>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </TabControl.Resources>
    
                <TabItem Header="General">
                    <Label Content="Content goes here..." />
                </TabItem>
                <TabItem Header="Security" />
                <TabItem Header="Details" />
            </TabControl>

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    仅仅只是设置tabitem的header的背景色,我是知道怎么设置的,问题是tabcontrol中头部中不被tabItem占据部分的背景色,我不知道怎么设置,如果直接设置background,会使tabItem内容的背景色也随之改变。

    以你的图为例,就是图中的黑框那部分,也就是tabcontrol还没有被tabitem标题占据的区域,我想设置这部分的颜色

    2018年12月19日 7:26
  • @Trian555,

     <Window.Resources>
            <SolidColorBrush x:Key="TabItem.Selected.Background" Color="#FFFFFF" />
            <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC" />
            <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
                <Setter Property="Padding" Value="2" />
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Background" Value="{StaticResource TabItem.Selected.Background}" />
                <Setter Property="BorderBrush" Value="{StaticResource TabItem.Selected.Border}" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabControl}">
                            <Grid
                                x:Name="templateRoot"
                                ClipToBounds="true"
                                KeyboardNavigation.TabNavigation="Local"
                                SnapsToDevicePixels="true">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="ColumnDefinition0" />
                                    <ColumnDefinition x:Name="ColumnDefinition1" Width="0" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition x:Name="RowDefinition0" Height="Auto" />
                                    <RowDefinition x:Name="RowDefinition1" Height="*" />
                                </Grid.RowDefinitions>
                                <TabPanel
                                    x:Name="headerPanel"
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    Margin="2,2,2,0"
                                    Panel.ZIndex="1"
                                    Background="Blue"
                                    IsItemsHost="true"
                                    KeyboardNavigation.TabIndex="1" />
                                <Border
                                    x:Name="contentPanel"
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    KeyboardNavigation.DirectionalNavigation="Contained"
                                    KeyboardNavigation.TabIndex="2"
                                    KeyboardNavigation.TabNavigation="Local">
                                    <ContentPresenter
                                        x:Name="PART_SelectedContentHost"
                                        Margin="{TemplateBinding Padding}"
                                        ContentSource="SelectedContent"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="TabStripPlacement" Value="Bottom">
                                    <Setter TargetName="headerPanel" Property="Grid.Row" Value="1" />
                                    <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                                    <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                                    <Setter TargetName="RowDefinition1" Property="Height" Value="Auto" />
                                    <Setter TargetName="headerPanel" Property="Margin" Value="2,0,2,2" />
                                </Trigger>
                                <Trigger Property="TabStripPlacement" Value="Left">
                                    <Setter TargetName="headerPanel" Property="Grid.Row" Value="0" />
                                    <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                                    <Setter TargetName="headerPanel" Property="Grid.Column" Value="0" />
                                    <Setter TargetName="contentPanel" Property="Grid.Column" Value="1" />
                                    <Setter TargetName="ColumnDefinition0" Property="Width" Value="Auto" />
                                    <Setter TargetName="ColumnDefinition1" Property="Width" Value="*" />
                                    <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                                    <Setter TargetName="RowDefinition1" Property="Height" Value="0" />
                                    <Setter TargetName="headerPanel" Property="Margin" Value="2,2,0,2" />
                                </Trigger>
                                <Trigger Property="TabStripPlacement" Value="Right">
                                    <Setter TargetName="headerPanel" Property="Grid.Row" Value="0" />
                                    <Setter TargetName="contentPanel" Property="Grid.Row" Value="0" />
                                    <Setter TargetName="headerPanel" Property="Grid.Column" Value="1" />
                                    <Setter TargetName="contentPanel" Property="Grid.Column" Value="0" />
                                    <Setter TargetName="ColumnDefinition0" Property="Width" Value="*" />
                                    <Setter TargetName="ColumnDefinition1" Property="Width" Value="Auto" />
                                    <Setter TargetName="RowDefinition0" Property="Height" Value="*" />
                                    <Setter TargetName="RowDefinition1" Property="Height" Value="0" />
                                    <Setter TargetName="headerPanel" Property="Margin" Value="0,2,2,2" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter TargetName="templateRoot" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <TabControl Style="{StaticResource TabControlStyle1}">
                <TabItem Header="General">
                    <Label Content="Content goes here..." />
                </TabItem>
                <TabItem Header="Security" />
                <TabItem Header="Details" />
            </TabControl>
        </Grid>

    Like this:

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • 已建议为答案 ARM830 2018年12月21日 14:25
    • 已标记为答案 Trian555 2018年12月22日 3:59
    2018年12月19日 8:07
    版主