none
tabcontrol的header 选中时的背景色怎么设置?我设了tabitem 的background是没选中时候的颜色,想设置选中后的颜色怎做? RRS feed

答案

  • 默认TabItem里面有个触发器,你看一下:

     

        <ControlTemplate x:Key="TabItemTemplate" TargetType="TabItem">
          <Grid SnapsToDevicePixels="True">
            <Border Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1,1,1,0" Name="Bd" Padding="{TemplateBinding Control.Padding}">
              <ContentPresenter Content="{TemplateBinding HeaderedContentControl.Header}" ContentSource="Header" ContentStringFormat="{TemplateBinding HeaderedContentControl.HeaderStringFormat}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType=ItemsControl}}" Name="Content" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType=ItemsControl}}" />
            </Border>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="UIElement.IsMouseOver" Value="True">
              <Setter Property="Border.Background" TargetName="Bd">
                <Setter.Value>
                  <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#FFEAF6FD" Offset="0.15" />
                    <GradientStop Color="#FFD9F0FC" Offset="0.5" />
                    <GradientStop Color="#FFBEE6FD" Offset="0.5" />
                    <GradientStop Color="#FFA7D9F5" Offset="1" />
                  </LinearGradientBrush>
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="TabItem.IsSelected" Value="True">
              <Setter Property="Panel.ZIndex" Value="1" />
              <Setter Property="Border.Background" TargetName="Bd" Value="#FFF9F9F9" /><!-- 这里 -->
             </Trigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="TabItem.IsSelected" Value="False" />
                <Condition Property="UIElement.IsMouseOver" Value="True" />
              </MultiTrigger.Conditions>
              <Setter Property="Border.BorderBrush" TargetName="Bd" Value="#FF3C7FB1" />
            </MultiTrigger>
            <Trigger Property="TabItem.TabStripPlacement" Value="Bottom">
              <Setter Property="Border.BorderThickness" TargetName="Bd" Value="1,0,1,1" />
            </Trigger>
            <Trigger Property="TabItem.TabStripPlacement" Value="Left">
              <Setter Property="Border.BorderThickness" TargetName="Bd" Value="1,1,0,1" />
            </Trigger>
            <Trigger Property="TabItem.TabStripPlacement" Value="Right">
              <Setter Property="Border.BorderThickness" TargetName="Bd" Value="0,1,1,1" />
            </Trigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="TabItem.IsSelected" Value="True" />
                <Condition Property="TabItem.TabStripPlacement" Value="Top" />
              </MultiTrigger.Conditions>
              <Setter Property="FrameworkElement.Margin" Value="-2,-2,-2,-1" />
              <Setter Property="FrameworkElement.Margin" TargetName="Content" Value="0,0,0,1" />
            </MultiTrigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="TabItem.IsSelected" Value="True" />
                <Condition Property="TabItem.TabStripPlacement" Value="Bottom" />
              </MultiTrigger.Conditions>
              <Setter Property="FrameworkElement.Margin" Value="-2,-1,-2,-2" />
              <Setter Property="FrameworkElement.Margin" TargetName="Content" Value="0,1,0,0" />
            </MultiTrigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="TabItem.IsSelected" Value="True" />
                <Condition Property="TabItem.TabStripPlacement" Value="Left" />
              </MultiTrigger.Conditions>
              <Setter Property="FrameworkElement.Margin" Value="-2,-2,-1,-2" />
              <Setter Property="FrameworkElement.Margin" TargetName="Content" Value="0,0,1,0" />
            </MultiTrigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="TabItem.IsSelected" Value="True" />
                <Condition Property="TabItem.TabStripPlacement" Value="Right" />
              </MultiTrigger.Conditions>
              <Setter Property="FrameworkElement.Margin" Value="-1,-2,-2,-2" />
              <Setter Property="FrameworkElement.Margin" TargetName="Content" Value="1,0,0,0" />
            </MultiTrigger>
            <Trigger Property="UIElement.IsEnabled" Value="False">
              <Setter Property="Border.Background" TargetName="Bd" Value="#FFF4F4F4" />
              <Setter Property="Border.BorderBrush" TargetName="Bd" Value="#FFC9C7BA" />
              <Setter Property="Control.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>

     

    你修改那个颜色就可以了。然后用这个模板到你的TabItem上。

     

    Sincerely,

     

     


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • 已标记为答案 a013strife 2011年8月22日 1:28
    2011年8月21日 17:18
    版主

全部回复

  • 默认TabItem里面有个触发器,你看一下:

     

        <ControlTemplate x:Key="TabItemTemplate" TargetType="TabItem">
          <Grid SnapsToDevicePixels="True">
            <Border Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1,1,1,0" Name="Bd" Padding="{TemplateBinding Control.Padding}">
              <ContentPresenter Content="{TemplateBinding HeaderedContentControl.Header}" ContentSource="Header" ContentStringFormat="{TemplateBinding HeaderedContentControl.HeaderStringFormat}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType=ItemsControl}}" Name="Content" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType=ItemsControl}}" />
            </Border>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="UIElement.IsMouseOver" Value="True">
              <Setter Property="Border.Background" TargetName="Bd">
                <Setter.Value>
                  <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#FFEAF6FD" Offset="0.15" />
                    <GradientStop Color="#FFD9F0FC" Offset="0.5" />
                    <GradientStop Color="#FFBEE6FD" Offset="0.5" />
                    <GradientStop Color="#FFA7D9F5" Offset="1" />
                  </LinearGradientBrush>
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="TabItem.IsSelected" Value="True">
              <Setter Property="Panel.ZIndex" Value="1" />
              <Setter Property="Border.Background" TargetName="Bd" Value="#FFF9F9F9" /><!-- 这里 -->
             </Trigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="TabItem.IsSelected" Value="False" />
                <Condition Property="UIElement.IsMouseOver" Value="True" />
              </MultiTrigger.Conditions>
              <Setter Property="Border.BorderBrush" TargetName="Bd" Value="#FF3C7FB1" />
            </MultiTrigger>
            <Trigger Property="TabItem.TabStripPlacement" Value="Bottom">
              <Setter Property="Border.BorderThickness" TargetName="Bd" Value="1,0,1,1" />
            </Trigger>
            <Trigger Property="TabItem.TabStripPlacement" Value="Left">
              <Setter Property="Border.BorderThickness" TargetName="Bd" Value="1,1,0,1" />
            </Trigger>
            <Trigger Property="TabItem.TabStripPlacement" Value="Right">
              <Setter Property="Border.BorderThickness" TargetName="Bd" Value="0,1,1,1" />
            </Trigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="TabItem.IsSelected" Value="True" />
                <Condition Property="TabItem.TabStripPlacement" Value="Top" />
              </MultiTrigger.Conditions>
              <Setter Property="FrameworkElement.Margin" Value="-2,-2,-2,-1" />
              <Setter Property="FrameworkElement.Margin" TargetName="Content" Value="0,0,0,1" />
            </MultiTrigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="TabItem.IsSelected" Value="True" />
                <Condition Property="TabItem.TabStripPlacement" Value="Bottom" />
              </MultiTrigger.Conditions>
              <Setter Property="FrameworkElement.Margin" Value="-2,-1,-2,-2" />
              <Setter Property="FrameworkElement.Margin" TargetName="Content" Value="0,1,0,0" />
            </MultiTrigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="TabItem.IsSelected" Value="True" />
                <Condition Property="TabItem.TabStripPlacement" Value="Left" />
              </MultiTrigger.Conditions>
              <Setter Property="FrameworkElement.Margin" Value="-2,-2,-1,-2" />
              <Setter Property="FrameworkElement.Margin" TargetName="Content" Value="0,0,1,0" />
            </MultiTrigger>
            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="TabItem.IsSelected" Value="True" />
                <Condition Property="TabItem.TabStripPlacement" Value="Right" />
              </MultiTrigger.Conditions>
              <Setter Property="FrameworkElement.Margin" Value="-1,-2,-2,-2" />
              <Setter Property="FrameworkElement.Margin" TargetName="Content" Value="1,0,0,0" />
            </MultiTrigger>
            <Trigger Property="UIElement.IsEnabled" Value="False">
              <Setter Property="Border.Background" TargetName="Bd" Value="#FFF4F4F4" />
              <Setter Property="Border.BorderBrush" TargetName="Bd" Value="#FFC9C7BA" />
              <Setter Property="Control.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>

     

    你修改那个颜色就可以了。然后用这个模板到你的TabItem上。

     

    Sincerely,

     

     


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • 已标记为答案 a013strife 2011年8月22日 1:28
    2011年8月21日 17:18
    版主
  • Bob Bao,

    请问下你这个式样是用什么写的呢?用ms的express blend写的吗?那样比较好写点吧

    2011年8月22日 1:30
  • 我一般用两种方式来导出控件默认模板:

    1. Blend , 比较实用,导出的模板比较详细
    2. Visual Studio 2010, 选中控件,在属性框中的 Template属性上右击,选择

     

    Sincerely,


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2011年8月22日 2:59
    版主