none
[WPF]TabControl选项卡被选中时的背景颜色怎么设置? RRS feed

  • 问题

  • <Window.Resources>
            <Style x:Key="TabItemStyle">
                <Style.Triggers>
                    <Trigger Property="TabItem.IsSelected" Value="True">
                        <Setter Property="TabItem.Background" Value="Gray"/>
                        <Setter Property="TabItem.FontWeight" Value="Bold"/>
                        <Setter Property="TabItem.Foreground" Value="Red"/>
                    </Trigger>
                    <!--<Trigger Property="TabItem.IsMouseOver" Value="True">
                        <Setter Property="TabItem.Background" Value="Gray"/>
                    </Trigger>
                    <Trigger Property="TabItem.IsFocused" Value="True">
                        <Setter Property="TabItem.Background" Value="Gray"/>
                    </Trigger>-->
                </Style.Triggers>
            </Style>
        </Window.Resources>
        <Grid>
            <TabControl Margin="11,32,33,62" Name="tabControl1" Background="Black">
                <TabItem Header="AAA" Name="tabItem1" Background="Gold" Style="{StaticResource TabItemStyle}">
                    <Grid />
                </TabItem>
                <TabItem Header="BBB" Background="Gold"/>
                <TabItem Header="CCC" Background="Gold"/>
            </TabControl>
        </Grid>
    通过对TabItem的属性设置触发器,来实现TabItem在被选中时的颜色。因为我把Tab整个背景放成黑色,现在想把TabItem选中的颜色变成灰色。但是应该怎么弄呢?好像字体颜色能改变,就是改不了这个背景颜色。。。
    2009年11月17日 5:25

答案

  •       <Style x:Key="TabItemStyle">
                <Style.Triggers>
                    <Trigger Property="TabItem.IsSelected" Value="True">
                        <Setter Property="TabItem.Template" >
                            <Setter.Value>
                                <ControlTemplate>
                                    <Canvas Background="Gray" Width="35" Height="20"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.Top="1" Canvas.Left="2">AAA</TextBlock></Canvas>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="TabItem.FontWeight" Value="Bold"/>
                        <Setter Property="TabItem.Foreground" Value="Red"/>
                    </Trigger>
                 </Style.Triggers>
            </Style>
    2009年11月17日 14:57
  • 楼主你好,

    -->作为一个样式,不可能去统一设定TabItem.Text是AAA吧?
    我们当然可以用WPF强大的数据binding功能实现动态的内容绑定,因为TabItem的标签是由其Header属性来实现的,我们就用TextBlock的Text属性来绑定HeaderedContentControl.Header这个属性,这样你就可以在TabItem中实现动态的确Context了,下面是一些相关code:
       <Style x:Key="TabItemStyle1">

                <Style.Triggers>

                    <Trigger Property="TabItem.IsSelected" Value="True">

                        <Setter Property="TabItem.Template" >

                            <Setter.Value>

                                <ControlTemplate>

                                    <Canvas Name="canvas" Background="Gray" Width="35" Height="20">

                                        <TextBlock HorizontalAlignment="Center"

                                                   VerticalAlignment="Center"

                                                   Canvas.Top="1"

                                                   Text="{TemplateBinding HeaderedContentControl.Header}"

                                                   Canvas.Left="2">

                                        </TextBlock>

                                    </Canvas>

                                </ControlTemplate>

                            </Setter.Value>

                        </Setter>

                        <Setter Property="TabItem.FontWeight" Value="Bold"/>

                        <Setter Property="TabItem.Foreground" Value="Red"/>

                    </Trigger>

                </Style.Triggers>

            </Style>

    -->那原先的ControlTemplate就没了?
    因为TabItem的默认template中已经有一个IsSelected的属性trigger(Template其他也没有什么特别的代码),如果你要添加其他的功能,你就可以在自定义的这个添加就行。

     如有疑问,请继续回复,谢谢。


    Jim Zhou -MSFT
    2009年11月23日 8:26
    版主

全部回复

  •       <Style x:Key="TabItemStyle">
                <Style.Triggers>
                    <Trigger Property="TabItem.IsSelected" Value="True">
                        <Setter Property="TabItem.Template" >
                            <Setter.Value>
                                <ControlTemplate>
                                    <Canvas Background="Gray" Width="35" Height="20"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.Top="1" Canvas.Left="2">AAA</TextBlock></Canvas>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="TabItem.FontWeight" Value="Bold"/>
                        <Setter Property="TabItem.Foreground" Value="Red"/>
                    </Trigger>
                 </Style.Triggers>
            </Style>
    2009年11月17日 14:57
  •                      <Trigger Property="TabItem.IsSelected" Value="True">
                        <Setter Property="TabItem.Template" >
                            <Setter.Value>
                                <ControlTemplate>
                                    <Canvas Background="Gray" Width="35" Height="20"><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.Top="1" Canvas.Left="2">AAA</TextBlock></Canvas>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>                   
    思路就是重绘一个ControlTemplate?那原先的ControlTemplate就没了?
    作为一个样式,不可能去统一设定TabItem.Text是AAA吧?
    2009年11月18日 4:42
  • 无论winfrom 还是wpf 都是这个方法 没别的方法
    2009年11月18日 7:57
  • 楼主你好,

    -->作为一个样式,不可能去统一设定TabItem.Text是AAA吧?
    我们当然可以用WPF强大的数据binding功能实现动态的内容绑定,因为TabItem的标签是由其Header属性来实现的,我们就用TextBlock的Text属性来绑定HeaderedContentControl.Header这个属性,这样你就可以在TabItem中实现动态的确Context了,下面是一些相关code:
       <Style x:Key="TabItemStyle1">

                <Style.Triggers>

                    <Trigger Property="TabItem.IsSelected" Value="True">

                        <Setter Property="TabItem.Template" >

                            <Setter.Value>

                                <ControlTemplate>

                                    <Canvas Name="canvas" Background="Gray" Width="35" Height="20">

                                        <TextBlock HorizontalAlignment="Center"

                                                   VerticalAlignment="Center"

                                                   Canvas.Top="1"

                                                   Text="{TemplateBinding HeaderedContentControl.Header}"

                                                   Canvas.Left="2">

                                        </TextBlock>

                                    </Canvas>

                                </ControlTemplate>

                            </Setter.Value>

                        </Setter>

                        <Setter Property="TabItem.FontWeight" Value="Bold"/>

                        <Setter Property="TabItem.Foreground" Value="Red"/>

                    </Trigger>

                </Style.Triggers>

            </Style>

    -->那原先的ControlTemplate就没了?
    因为TabItem的默认template中已经有一个IsSelected的属性trigger(Template其他也没有什么特别的代码),如果你要添加其他的功能,你就可以在自定义的这个添加就行。

     如有疑问,请继续回复,谢谢。


    Jim Zhou -MSFT
    2009年11月23日 8:26
    版主