TabControl and TabItem with Dropshadow effect WPF

Question

I am trying to implement style for TabControl along with TabItem like below Images:

The Style should make below things visible:

1. List item
2. White Background for TabControl and selected TabItem with Dropshadow Effect.
3. When any TabItem is not selected, then the TabItem text color should turn to gray.

What I have achieved till now:

1. Able to divide width of TabControl to accommodate 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:

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

If anyone can help me acheving TabControl with such style would be a great help. Thanks in advance.

Answer 1

The Style should make below things visible:

1. List Item
2. White Background for TabControl and selected TabItem with Dropshadow Effect.
3. When any TabItem is not selected, then the TabItem text color should turn to gray.

1. I suppose this is just a typo?

2. Set TabControl.Background to white, set the drop shadow effect on the TabControl, set TabControl.BorderThickness to zero, set TabItem.Background and TabItem.BorderBrush to white, do not change TabItem.BorderThickness . For the tab header alignment, an easy fix for the TabPanel.Margin is usage of negative margin for selected tabs.

3. Set TextBlock.Foreground on Chrome instead of playing with TabItem.Foreground in the template triggers.

Generally note that I replaced your color constants with system color names for my testing. Also I didn't bother to re-solve the tab item width issue and instead assigned them a static width. Oh, and I used default fonts instead of your font resource :)

My complete sample:

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