的TabControl和TabItem的與陰影效果效果WPF

Question

我想實現的TabControl的風格TabItem的一起類似下面圖片：

風格應該使下面的事情可見：

1. 列表項目
2. TabControl的白色背景和具有Dropshadow效果的選定TabItem。
3. 如果沒有選擇任何TabItem，那麼TabItem文本顏色應變爲灰色。

我所取得的成就至今：

1. 能夠分裂的TabControl的寬度以適應TabItem的項目使用TabSizeConverter轉換器大小相等。
2. 可以改變背景和TabControl和TabItems。但不能達到Dropshadow效果。
3. 下面是我的風格的TabItem：

<Setter Property="Padding" Value="0"/> 
<Setter Property="IsTabStop" Value="False"/> 
<Setter Property="Foreground" Value="{StaticResource color_MediumGray}"/> 
<Setter Property="FontSize" Value="34"/> 

<Setter Property="FontFamily" Value="Resources/Fonts/#HelveticaNeueMed" /> 

<Setter Property="Width"> 
    <Setter.Value> 


<MultiBinding Converter="{StaticResource tabSizeConverter}"> 
        `<Binding RelativeSource="{RelativeSource Mode=FindAncestor,` AncestorType={x:Type TabControl}}" /> 
        <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" Path="ActualWidth" /> 
       </MultiBinding> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Border x:Name="Chrome" 
         BorderThickness="30,0" 
         BorderBrush="{StaticResource color_Transparent}" 
         Background="{StaticResource color_LightGray}" 
         Padding="0" Margin="0"> 
         <ContentPresenter ContentSource="Header" 
         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="Selector.IsSelected" Value="True"> 
          <Setter TargetName="Chrome" Property="BorderThickness" Value="0"/> 
          <Setter TargetName="Chrome" Property="Background" Value="{StaticResource color_White}"/> 
          <Setter Property="Foreground" Value="{StaticResource color_Purple}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

如果有人能幫助我acheving的TabControl這樣的風格會是一個很大的幫助。 在此先感謝。

Answer 1

風格應該使下面的事情可見：

1. 貨品
2. 爲TabControl的白色背景與陰影效果的影響選擇TabItem的。
3. 如果沒有選擇任何TabItem，那麼TabItem文本顏色應變爲灰色。

1. 我想這只是一個錯字？

2. 套裝TabControl.Background爲白色，設置陰影效果上的TabControl，設置TabControl.BorderThickness爲零，設置TabItem.Background和TabItem.BorderBrush爲白色，不改變TabItem.BorderThickness。對於選項卡標題對齊，TabPanel.Margin的簡單修正是對選定選項卡使用負邊距。

3. 設置TextBlock.Foreground在Chrome而不是在模板觸發器中使用TabItem.Foreground。

一般來說，我用我的測試系統顏色名稱替換你的顏色常量。此外，我沒有麻煩重新解決標籤項寬度問題，而是分配給他們一個靜態寬度。哦，我來代替你的字體資源:)默認字體

我的完整的示例：

<Window.Resources> 
    <Style x:Key="itemStyle" TargetType="TabItem"> 
     <Setter Property="Padding" Value="0"/> 
     <Setter Property="Margin" Value="0"/> 
     <Setter Property="IsTabStop" Value="False"/> 
     <Setter Property="FontSize" Value="34"/> 
     <Setter Property="FontFamily" Value="Resources/Fonts/#HelveticaNeueMed" /> 
     <Setter Property="Width" Value="310"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Border x:Name="Chrome" 
         BorderThickness="10,0" 
         BorderBrush="Transparent" 
         Background="LightGray" 
         TextBlock.Foreground="Gray" 
         Padding="0" Margin="0"> 
         <ContentPresenter ContentSource="Header" 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="Selector.IsSelected" Value="True"> 
          <Setter TargetName="Chrome" Property="BorderBrush" Value="White"/> 
          <Setter TargetName="Chrome" Property="Background" Value="White"/> 
          <Setter TargetName="Chrome" Property="Margin" Value="-2,0,-2,-1"/> 
          <Setter TargetName="Chrome" Property="TextBlock.Foreground" Value="Purple"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

<Grid x:Name="grid1"> 
    <Grid MaxWidth="650" MaxHeight="600"> 
     <Border Background="Gray"> 
      <Border.Effect> 
       <BlurEffect/> 
      </Border.Effect> 
     </Border> 
     <TabControl BorderThickness="0" Margin="5" Background="White"> 
      <TabControl.Effect> 
       <DropShadowEffect /> 
      </TabControl.Effect> 
      <TabItem Header="Postpaid" Style="{StaticResource itemStyle}" HorizontalContentAlignment="Center"> 
       <WrapPanel> 
        <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/> 
        <Rectangle Fill="Green" Width="380" Height="180" Margin="10"/> 
        <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/> 
        <Rectangle Fill="Green" Width="180" Height="180" Margin="10"/> 
        <Rectangle Fill="Yellow" Width="180" Height="180" Margin="10"/> 
       </WrapPanel> 
      </TabItem> 
      <TabItem Header="Prepaid" Style="{StaticResource itemStyle}" HorizontalContentAlignment="Center"> 
       <WrapPanel> 
        <Rectangle Fill="Green" Width="180" Height="180" Margin="10"/> 
        <Rectangle Fill="Yellow" Width="180" Height="180" Margin="10"/> 
        <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/> 
        <Rectangle Fill="Green" Width="380" Height="180" Margin="10"/> 
        <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/> 
       </WrapPanel> 
      </TabItem> 
     </TabControl> 
    </Grid> 
</Grid>