Question

我正在使用WPF TabControl的ItemTemplate属性来绑定每个TabItem标头的内容。我还使用ItemContainerStyle属性将TabItem的内容设置为动态选择的用户控件。这种方法按预期工作100％，但我现在遇到了TabControl标头样式的问题。

我将TabControl的background属性设置为黑色：

<TabControl
        ItemsSource="{Binding Tabs.Tabs}"
        SelectedItem="{Binding Tabs.SelectedTab, Mode=TwoWay}"
        IsEnabled="{Binding ReadyForInput}"
        Background="Black"
        x:Name="MainTab">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <StackPanel
                    Orientation="Horizontal">                      
                    <TextBlock
                        Text="{Binding TabHeader}"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center" />
                </StackPanel>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ItemContainerStyle>
            <Style
                TargetType="TabItem">
                <Setter
                    Property="Content"
                    Value="{Binding TabContentControl}" />
            </Style>
        </TabControl.ItemContainerStyle>
    </TabControl>

这会导致： The TabItem has a black background, but the header stays the same.

如果我在ItemTemplate中设置StackPanel的背景颜色，我就会离开this.

如何更改TabItems＆＃39;的背景颜色（样式）？ TabControl绑定时的标题是否正确？

谢谢！

Answer 1

在ItemContainerStyle中设置Background属性：

<TabControl.ItemContainerStyle>
    <Style TargetType="TabItem">
        <Setter Property="Background" Value="Black" />
        <Setter Property="Content" Value="{Binding TabContentControl}" />
    </Style>
</TabControl.ItemContainerStyle>

更改所选标签的背景颜色需要更多精力。您需要覆盖TabItem的ControlTemplate。您可以通过在Visual Studio或Blend中以设计模式右键单击TabItem将默认模板复制到XAML标记中，然后选择编辑模板 - >编辑副本，然后根据您的要求进行编辑：

<TabControl ItemsSource="{Binding Tabs.Tabs}" Background="Black" x:Name="MainTab">
    <TabControl.Resources>
        <Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <LinearGradientBrush x:Key="TabItem.Static.Background" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#F0F0F0" Offset="0.0"/>
            <GradientStop Color="#E5E5E5" Offset="1.0"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TabItem.Static.Border" Color="#ACACAC"/>
        <LinearGradientBrush x:Key="TabItem.MouseOver.Background" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#ECF4FC" Offset="0.0"/>
            <GradientStop Color="#DCECFC" Offset="1.0"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TabItem.MouseOver.Border" Color="#7EB4EA"/>
        <SolidColorBrush x:Key="TabItem.Disabled.Background" Color="#F0F0F0"/>
        <SolidColorBrush x:Key="TabItem.Disabled.Border" Color="#D9D9D9"/>
        <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
        <SolidColorBrush x:Key="TabItem.Selected.Background" Color="Black"/>
    </TabControl.Resources>
    <TabControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock
                        Text="header..."
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="Background" Value="Black" />
            <Setter Property="Content" Value="{Binding TabContentControl}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
                            <Border x:Name="mainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Margin="0">
                                <Border x:Name="innerBorder" BorderBrush="{StaticResource TabItem.Selected.Border}" BorderThickness="1,1,1,0" Background="{StaticResource TabItem.Selected.Background}" Margin="-1" Opacity="0"/>
                            </Border>
                            <ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.MouseOver.Border}"/>
                                <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                                <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                                <Setter Property="Background" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="mainBorder" Value="{StaticResource TabItem.Disabled.Border}"/>
                                <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                                <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                                </MultiDataTrigger.Conditions>
                                <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                                <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top"/>
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Panel.ZIndex" Value="1"/>
                                <Setter Property="Margin" Value="-2,-2,-2,0"/>
                                <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                                <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                                <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                            </MultiDataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

如何更改WPF TabControl的ItemTemplate的样式，以便我可以设置Tab Headers＆＃39;背景颜色？

1 个答案: