2012-01-25 26 views
0

我有一个Tabcontrol,它的TabItem为Datatemplate,TabItem的风格为ItemContainerStyle。TabItem的ItemContainerStyle被赋值WPF中的蓝色/白色控制颜色Tabcontrol

的TabControl的:

<TabControl Name="MainTabCtrl" Margin="0" Padding="0" BorderThickness="0" Background="Transparent" 
         IsSynchronizedWithCurrentItem="True" 
         ItemsSource="{Binding Path=TabViewModels}" 
         ItemTemplate="{StaticResource ClosableTabItemTemplate}" 
         HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" 
         ItemContainerStyle="{StaticResource ContainerStyle}"> 

的DataTemplate中名为ClosableTabItemTemplate的的TabItems:

<DataTemplate x:Key="ClosableTabItemTemplate" > 
      <Border BorderThickness="3" BorderBrush="Transparent" CornerRadius="4" > 
       <!--Border to make the tab item gap from the content--> 
       <Border x:Name="InsideBorder" BorderThickness="3" BorderBrush="#D6EAFF" CornerRadius="4"> 
        <!--Border for the rounded corners--> 
        <!--TabItem Content Grid--> 
        <Grid x:Name="tabItemGrid" ShowGridLines="True" Margin="0" Background="#D6EAFF"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
         </Grid.RowDefinitions> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="25"/> 
          <!--Icon Column--> 
          <ColumnDefinition Width="1*"/> 
          <!--Title Column--> 
          <ColumnDefinition Width="20"/> 
          <!--Close Button Column--> 
         </Grid.ColumnDefinitions> 

         <!--Icon of tab Item--> 
         <Image Grid.Column="0" Grid.Row="1" Height="18" HorizontalAlignment="Left" Source="Images/tab1.jpg"/> 

         <!--Title of tab Item--> 
         <Label Name="TabText" Grid.Column="1" Grid.Row="1" Content="TabItem" Height="23" HorizontalAlignment="Left" 
              Margin="4,1,0,0" VerticalAlignment="Top" FontFamily="Courier" FontSize="12" /> 

         <!--Close button of tab Item--> 
         <Button Style="{DynamicResource TabButton}" 
              Name="button_close" Content="x" 
              Command="{Binding Path=CloseCommand}" 
              Grid.Column="2" Grid.Row="1" 
              Height="20" Width="20" 
              Margin="0,0,0,2" VerticalAlignment="Center" HorizontalAlignment="Right" 
              FontFamily="Courier" FontStretch="Normal" FontWeight="Bold" FontSize="14" 
              Visibility="Visible" ToolTip="Close" 
              BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Padding="0,0,0,0" 
              > 
         </Button> 
        </Grid> 
       </Border> 
      </Border> 


      <DataTemplate.Triggers> 

       <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="True"> 
        <Setter TargetName="tabItemGrid" Property="Background" Value="#D6EAFF" /> 
       </DataTrigger> 

       <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}},Path=IsSelected}" Value="False"> 
        <!--<Trigger Property="IsSelected" Value="False">--> 
        <Setter TargetName="InsideBorder" Property="BorderBrush"> 
         <Setter.Value> 
          <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
           <GradientStop Color="#FFCCCCD0" /> 
           <GradientStop Color="#FF526593" Offset="1" /> 
          </LinearGradientBrush> 
         </Setter.Value> 
        </Setter> 
        <Setter TargetName="tabItemGrid" Property="Background"> 
         <Setter.Value> 
          <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
           <GradientStop Color="#FFCCCCD0" /> 
           <GradientStop Color="#FF526593" Offset="1" /> 
          </LinearGradientBrush> 
         </Setter.Value> 
        </Setter> 
       </DataTrigger> 
       <!--</Trigger>--> 
      </DataTemplate.Triggers> 
     </DataTemplate> 

中的TabItem的ItemContainerStyle:

<Style TargetType="{x:Type TabItem}" x:Key="ContainerStyle"> 
      <Setter Property="Background" Value="Red" /> 
      <Setter Property="BorderBrush" Value="Red" /> 
      <Setter Property="Padding" Value="0" /> 
      <Setter Property="Margin" Value="0" /> 
      <Style.Triggers> 
       <Trigger Property="IsEnabled" Value="false"> 
        <Setter Property="Background" Value="Red"/> 
        <Setter Property="BorderBrush" Value="Red" /> 
       </Trigger> 
       <Trigger Property="IsEnabled" Value="true"> 
        <Setter Property="Background" Value="Red"/> 
        <Setter Property="BorderBrush" Value="Red" /> 
       </Trigger> 

       <Trigger Property="IsMouseOver" Value="false"> 
        <Setter Property="Background" Value="Red"/> 
        <Setter Property="BorderBrush" Value="Red" /> 
       </Trigger> 
       <Trigger Property="IsMouseOver" Value="true"> 
        <Setter Property="Background" Value="Red"/> 
        <Setter Property="BorderBrush" Value="Red" /> 
       </Trigger> 

       <Trigger Property="IsFocused" Value="false"> 
        <Setter Property="Background" Value="Red"/> 
        <Setter Property="BorderBrush" Value="Red" /> 
       </Trigger> 
       <Trigger Property="IsFocused" Value="true"> 
        <Setter Property="Background" Value="Red"/> 
        <Setter Property="BorderBrush" Value="Red" /> 
       </Trigger> 
       <Trigger Property="IsKeyboardFocused" Value="false"> 
        <Setter Property="Background" Value="Red"/> 
        <Setter Property="BorderBrush" Value="Red" /> 
       </Trigger> 
       <Trigger Property="IsKeyboardFocused" Value="true"> 
        <Setter Property="Background" Value="Red"/> 
        <Setter Property="BorderBrush" Value="Red" /> 
       </Trigger> 

      </Style.Triggers> 
     </Style> 

什么情况是,所选择的选项卡无论我做什么,总是使用白色的默认控制背景:

enter image description here

还当我点鼠标移到未选中的标签变为蓝色背景,而不是红色:

enter image description here

我用透明色,而不是红色,但它更容易显示红色的问题。

为什么默认颜色覆盖itemStyleContainer和样式触发器?

回答

0

在你的风格的TabItem,添加的ressource部分:

<Style.Resources> 
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" /> 
    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" /> 
</Style.Resources> 

原始样式使用这些系统的颜色,所以如果你在本地覆盖它们,你就会得到想要的结果。

+0

都能跟得上。 ..没有改变任何东西......但无论如何感谢。 – Rodniko

+0

在另一个答案中发布了答案,谢谢。 – Rodniko

2

通常有些行为是硬编码到Template,所以如果你彻底重新设置一个控件,你也需要创建一个新的模板。 (你可以使用the default one作为基础)

+0

+1,但作为附注,像聚焦边框之类的东西来自默认的Focus Visual,它通常是应用程序范围内的资源。我确信你可以以某种方式覆盖它,但我并不积极如何。 – Rachel

+0

不确定焦点视觉是否在这里发挥作用,是不是只是这个微弱的点阵边界? –

+0

@HB Hrrm你是对的,如果你覆盖模板,这并不重要。我正在考虑[这个问题](http:// stackoverflow。com/q/8434258/302677)某人已经设置了按钮的背景颜色,但是当您按下按钮时焦点视觉仍然显示。在按钮的情况下,焦点视觉会改变整个背景颜色。 – Rachel

0

好的,找到了解决方案。 Datatemplate搞砸了,我刚刚输入了与Datitemplate相同的代码,在Tabitem样式的覆盖代码中,它的工作正常。

TabItem的(而不是DataTemplate中)的风格:

<!--Oveerriding TabItem--> 
     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="VerticalContentAlignment" Value="Center" /> 
      <Setter Property="HorizontalContentAlignment" Value="Center" /> 

      <!--Creating TabItem Template--> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <!--Content of template--> 
        <ControlTemplate TargetType="{x:Type TabItem}"> 
         <Border BorderThickness="3" BorderBrush="Transparent" CornerRadius="4"> 
          <!--Border to make the tab item gap from the content--> 
          <Border x:Name="InsideBorder" BorderThickness="3" BorderBrush="#D6EAFF" CornerRadius="4"> 
           <!--Border for the rounded corners--> 
           <!--TabItem Content Grid--> 
           <Grid x:Name="tabItemGrid" ShowGridLines="True" Margin="0" Background="#D6EAFF"> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="Auto"/> 
            </Grid.RowDefinitions> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="25"/> 
             <!--Icon Column--> 
             <ColumnDefinition Width="1*"/> 
             <!--Title Column--> 
             <ColumnDefinition Width="20"/> 
             <!--Close Button Column--> 
            </Grid.ColumnDefinitions> 

            <!--Icon of tab Item--> 
            <Image Grid.Column="0" Grid.Row="1" Height="18" HorizontalAlignment="Left" Source="Images/tab1.jpg"/> 

            <!--Title of tab Item--> 
            <Label Name="TabText" Grid.Column="1" Grid.Row="1" Content="TabItem" Height="23" HorizontalAlignment="Left" 
              Margin="4,1,0,0" VerticalAlignment="Top" FontFamily="Courier" FontSize="12" /> 

            <!--Close button of tab Item--> 
            <Button Style="{DynamicResource TabButton}" 
              Name="button_close" Content="x" 
              Command="{Binding Path=CloseCommand}" 
              Grid.Column="2" Grid.Row="1" 
              Height="20" Width="20" 
              Margin="0,0,0,2" VerticalAlignment="Center" HorizontalAlignment="Right" 
              FontFamily="Courier" FontStretch="Normal" FontWeight="Bold" FontSize="14" 
              Visibility="Visible" ToolTip="Close" 
              BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Padding="0,0,0,0"> 
            </Button> 
           </Grid> 
          </Border> 
         </Border> 

         <!--TabItem Triggers--> 
         <ControlTemplate.Triggers> 

          <Trigger Property="IsSelected" Value="True"> 
           <Setter TargetName="tabItemGrid" Property="Background" Value="#D6EAFF" /> 
          </Trigger> 

          <Trigger Property="IsSelected" Value="False"> 
           <Setter TargetName="InsideBorder" Property="BorderBrush"> 
            <Setter.Value> 
             <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
              <GradientStop Color="#FFCCCCD0" /> 
              <GradientStop Color="#FF526593" Offset="1" /> 
             </LinearGradientBrush> 
            </Setter.Value> 
           </Setter> 
           <Setter TargetName="tabItemGrid" Property="Background"> 
            <Setter.Value> 
             <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
              <GradientStop Color="#FFCCCCD0" /> 
              <GradientStop Color="#FF526593" Offset="1" /> 
             </LinearGradientBrush> 
            </Setter.Value> 
           </Setter> 
           <!--<Setter TargetName="button_close" Property="Visibility" Value="Hidden" />--> 
          </Trigger> 

          <!--<Trigger Property="IsMouseOver" Value="True"> 
           <Setter TargetName="tabItemCtrl" Property="Background" Value="#D6EAFF" /> 
           <Setter TargetName="InsideBorder" Property="BorderBrush" Value="#D6EAFF" /> 
          </Trigger>--> 
         </ControlTemplate.Triggers> 

        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

自定义的Tabcontrol代码(没有ItemTemplate属性):

<TabControl Name="MainTabCtrl" Margin="0" Padding="0" BorderThickness="0" Background="Transparent" 
         IsSynchronizedWithCurrentItem="True" 
         ItemsSource="{Binding Path=TabViewModels}" 
         HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"> 
      </TabControl> 

结果是:

enter image description here