none
tabitem.Header背景色控制的问题 RRS feed

  • 问题

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

    2012年8月27日 13:01

答案

  • <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

    2012年9月3日 10:45

全部回复

  • 定义Tabitem的Trigger当IsSelected 改变时修改设置相应的颜色
    2012年8月28日 2:18
  • 能给个代码详细说明吗?谢谢

    2012年9月3日 3:28
  • <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

    2012年9月3日 10:45
  • <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这些要引用什么?我这里报找不到资源

    2012年9月4日 1:49
  • <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

    2012年9月4日 5:40