TabControl et TabItem avec effet Dropshadow WPF

Question

Je suis en train de mettre en œuvre le style de TabControl avec TabItem comme ci-dessous Images:

Le style devrait faire ci-dessous les choses visibles:

1. Elément de liste
2. Fond blanc pour TabControl et TabItem sélectionné avec effet Dropshadow.
3. Si un élément TabItem n'est pas sélectionné, la couleur du texte TabItem doit devenir grise.

Ce que j'ai accompli jusqu'à présent:

1. Capable de diviser la largeur de TabControl pour recevoir des articles TabItem avec des tailles égales en utilisant le convertisseur de TabSizeConverter.
2. Possibilité de changer l'arrière-plan et avec TabControl et TabItems. Mais pas en mesure d'atteindre l'effet Dropshadow.
3. Ci-dessous est mon style pour 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> 

Si quelqu'un peut me aider acheving TabControl avec ce style serait d'une grande aide. Merci d'avance.

Answer 1

Le style doit faire les choses visibles ci-dessous:

1. Liste Article
2. fond blanc pour TabControl et TabItem sélectionné avec Dropshadow effet.
3. Si un élément TabItem n'est pas sélectionné, la couleur du texte TabItem doit devenir grise.

1. Je suppose que cela est juste une faute de frappe?

2. Set TabControl.Background au blanc, définissez l'effet d'ombre portée sur le TabControl, définissez TabControl.BorderThickness à zéro, définissez TabItem.Background et TabItem.BorderBrush à blanc, ne changent pas TabItem.BorderThickness. Pour l'alignement d'en-tête d'onglet, une correction facile pour le TabPanel.Margin est l'utilisation de la marge négative pour les onglets sélectionnés.

3. Définissez TextBlock.Foreground sur Chrome au lieu de jouer avec TabItem.Foreground dans les triggers du modèle.

Notez généralement que j'ai remplacé vos constantes de couleur par les noms de couleur du système pour mes tests. De plus, je n'ai pas pris la peine de résoudre le problème de la largeur de l'élément d'onglet et leur ai assigné une largeur statique.Oh, et je les polices par défaut au lieu de votre ressource de police :)

Mon échantillon complet:

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