I am trying to implement style for TabControl along with TabItem like below Images:
https://drive.google.com/open?id=0B2SyA6F_5_cDYUVRaXkzbWY2X1E
https://drive.google.com/open?id=0B2SyA6F_5_cDdjVnZmt5YU5PY1k
The Style should make below things visible:
1. White Background for TabControl and selected TabItem with Dropshadow Effect.
2. When any TabItem is not selected, then the TabItem text color should turn to gray.
If anyone can help me achieving TabControl with such style would be a great help.
Thanks in advance.
What I have tried:
What I have achieved till now:
1. Able to devide width of TabControl to accomodate TabItem items with equal Sizes using TabSizeConverter converter.
2. Able to change background and with of TabControl and TabItems. But not able to achieve Dropshadow effect.
3. Below is my Style for TabItem:
<local:TabSizeConverter x:Key="tabSizeConverter" />
<Style x:Key="style_TabControlItemTab" TargetType="{x:Type TabItem}">
<Setter Property="Padding" Value="0"></Setter>
<Setter Property="IsTabStop" Value="False"></Setter>
<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>