WPF選項卡控件：設置選項卡顏色？

我在我的WPF應用程序中使用WPF選項卡控件的默認顏色的TabControl。換句話說，活動標籤是白色的，非活動標籤是銀色的。通過設置TabControl對象的Background屬性，我已將所有標籤頁的Background顏色更改爲「米色」，但它不更改標籤顏色，僅更改客戶區。所以，我結束了一個有一個米色客戶區和一個白色標籤的活動標籤。WPF選項卡控件：設置選項卡顏色？

我想設置標籤Color以匹配客戶區域，以便整個頁面呈米色。我會怎麼做？謝謝。

來源

2010-01-18 David Veeneman

BTW，我嘗試設置一個TabItem的背景屬性，但是，只有當TabItem的無效改變標籤的顏色。 – 2010-01-18 14:55:31

這是一個來自我的項目之一的選項卡項目樣式的示例。對不起，一些不相關的代碼，我相信你會從中提取你需要的。

<Style x:Uid="Style_21" TargetType="{x:Type TabItem}"> 
     <Setter x:Uid="Setter_75" Property="Template"> 
      <Setter.Value> 
       <ControlTemplate x:Uid="ControlTemplate_7" TargetType="{x:Type TabItem}"> 
        <Grid x:Uid="Grid_13"> 
         <Border 
          x:Uid="Border" Name="Border" 
          Background="#F0F0F0" 
          BorderBrush="LightGray" 
          BorderThickness="1,1,1,0" 
          CornerRadius="4,4,0,0" 
          Margin="0,0,2,0" SnapsToDevicePixels="True" > 
          <TextBlock x:Uid="TextBlock" FontSize="15" 
             HorizontalAlignment="Center" 
             Name="TextBlock" 
             Foreground="DarkGray"> 
          <ContentPresenter x:Uid="ContentSite" x:Name="ContentSite" 
               VerticalAlignment="Center" 
               HorizontalAlignment="Center" 
               ContentSource="Header" 
               Margin="12,2,12,2"/> 
          </TextBlock> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger x:Uid="Trigger_14" Property="IsSelected" Value="True"> 
          <Setter x:Uid="Setter_76" TargetName="Border" Property="Background" Value="White" /> 
          <Setter x:Uid="Setter_77" TargetName="Border" Property="BorderBrush" Value="Gray" /> 
          <Setter x:Uid="Setter_78" TargetName="TextBlock" Property="Foreground" Value="Black" /> 
          <Setter x:Uid="Setter_79" TargetName="Border" Property="Margin" Value="0,0,2,-1" /> 
         </Trigger> 
         <Trigger x:Uid="Trigger_15" Property="IsMouseOver" Value="True" SourceName="Border" > 
          <Setter x:Uid="Setter_80" TargetName="Border" Property="Background" Value="White" /> 
          <Setter x:Uid="Setter_81" TargetName="Border" Property="BorderBrush" Value="DarkGray" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

希望它有幫助。

來源

2010-01-18 15:05:44 levanovd

是的，我擔心我將不得不進入控制模板。我希望我錯過了更簡單的事情。那麼，你的標記是一個偉大的指導！謝謝您的幫助。 – 2010-01-18 15:10:44

我找出解決方案。我將把萊萬諾夫的答案作爲正確答案選出，以表示對他的幫助。

實質上，該修復是對TabItem控制模板的單行更改。從正常的TabItem控制模板的副本開始，並將控制模板設置爲定位TabItem類型的所有控件。找到IsSelected觸發，並將其更改爲以下：

<Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>

Bd是Border控件設置邊框和背景的TabItem的標籤區域。此標記告訴WPF將BdBackground屬性綁定到相對源。在這種情況下，相對來源是承載TabItem的TabControl的Background屬性。因此，當您設置TabControl的Background屬性時，顏色將流向TabControl中承載的所有TabItem控件的選項卡區域。

下面是我在Blend 3中創建演示完整的標記：

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="WpfApplication1.MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" Height="480"> 
    <Window.Resources> 

     <Style x:Key="TabItemFocusVisual"> 
      <Setter Property="Control.Template"> 
       <Setter.Value> 
        <ControlTemplate> 
         <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1" SnapsToDevicePixels="true"/> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/> 
     <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"> 
      <GradientStop Color="#F3F3F3" Offset="0"/> 
      <GradientStop Color="#EBEBEB" Offset="0.5"/> 
      <GradientStop Color="#DDDDDD" Offset="0.5"/> 
      <GradientStop Color="#CDCDCD" Offset="1"/> 
     </LinearGradientBrush> 
     <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0"> 
      <GradientStop Color="#EAF6FD" Offset="0.15"/> 
      <GradientStop Color="#D9F0FC" Offset=".5"/> 
      <GradientStop Color="#BEE6FD" Offset=".5"/> 
      <GradientStop Color="#A7D9F5" Offset="1"/> 
     </LinearGradientBrush> 
     <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/> 
     <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/> 
     <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/> 
     <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/> 
     <Style 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" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}"> 
           <ContentPresenter x:Name="Content" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/> 
          </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="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/> 
          </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> 

    </Window.Resources> 

    <Grid x:Name="LayoutRoot"> 
     <TabControl Background="Beige" HorizontalAlignment="Left" VerticalAlignment="Top" Width="500" Height="300"> 
      <TabItem Header="TabItem"> 
       <Grid/> 
      </TabItem> 
      <TabItem Header="TabItem"> 
       <Grid/> 
      </TabItem> 
     </TabControl> 
    </Grid> 
</Window>

來源

2010-01-18 16:04:56

WPF選項卡控件：設置選項卡顏色？

回答

相關問題