tabitem.Header背景色控制的问题

Question

我定义了一个tabcontrol，他会动态的开启tabitem，每个tabitem的header都有不同的背景色，如果我选中了某一个tabitem，那么他的颜色就会恢复到默认的颜色，如下图所示，请问，如何实现无论tabitem是否选中，背景色都不变的功能？

Answer 1

定义Tabitem的Trigger当IsSelected 改变时修改设置相应的颜色

Answer 2

能给个代码详细说明吗？谢谢

Answer 3

<Style x:Key="TabItemStyle1" 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" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
								<ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
							</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="{StaticResource TabItemSelectedBackground}"/-->
							</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>

注意注释掉的<!--Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/--> ，也可以替换为你需要改变的颜色.在TabItem上应用此样式即可。

---

Thanks! Damon.Tian

Answer 4

<Style x:Key="TabItemStyle1" 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" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
								<ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
							</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="{StaticResource TabItemSelectedBackground}"/-->
							</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>

注意注释掉的<!--Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/--> ，也可以替换为你需要改变的颜色.在TabItem上应用此样式即可。

---

Thanks! Damon.Tian

再弱弱的问一句

StaticResource TabItemFocusVisual这些要引用什么？我这里报找不到资源

Answer 5

<Setter Property="FocusVisualStyle">
                <Setter.Value>
                    <Style>
                        <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>
                </Setter.Value>
            </Setter>

或者你直接去掉

<Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>

---

Thanks! Damon.Tian