的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>