WPF TabItem and TabControl templates combined - wpf

Question

I'm trying to make template for TabControl
visual design should be following:
TabControl content area should have small shadow over TabItems
but shadow should not be applied to active tab item
problem is that I can only write these templates as separated styles
meaning that if I use grid they'll end up in different grids and I can't change Zindex to make only one TabItem pop out over shadow
I'm using Border to apply shadow
<Border BorderThickness="0" >
<Border.Effect>
<DropShadowEffect Direction="90" ShadowDepth="1" Color="#b6b6b6" />
</Border.Effect>
</Border>

Answer 1

I came up with this, using the Kaxaml template for a TabControl, it incorporates Adrian's idea of using a LinearGradientBrush to simulate the shadow, I'm using a ControlTemplate:
<TabControl>
<TabControl.Resources>
<LinearGradientBrush x:Key="myBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#ffffff" Offset="0.0"/>
<GradientStop Color="#eeeeee" Offset="0.46"/>
<GradientStop Color="#787878" Offset="1"/>
</LinearGradientBrush>
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,0,-1" IsItemsHost="True"
KeyboardNavigation.TabIndex="1" Background="{StaticResource myBrush}" />
<Border Name="Border" Grid.Row="1" Background="#FFFFFF" BorderBrush="#888888" BorderThickness="1"
KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" >
<ContentPresenter Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#888888" />
<Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- SimpleStyles: TabItem -->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Margin="0,0,-4,0" Background="#E0E0E0" BorderBrush="#888888" BorderThickness="1,1,1,1" >
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center"
ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource myBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="#EEEEEE" />
<Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" />
<Setter Property="Foreground" Value="#888888" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="Test" />
<TabItem Header="Test2" />
<TabItem Header="Test3" />
<TabItem Header="Test4" />
</TabControl>
By way of an explanation.
The LinearGradientBrush myBrush will be used in two places, the first is in the TabControl, as the Background:
<TabPanel Name="HeaderPanel" Grid.Row="0" Panel.ZIndex="1" Margin="0,0,0,-1" IsItemsHost="True"
KeyboardNavigation.TabIndex="1" Background="{StaticResource myBrush}" />
The Second is within the TabItem template as the background for all items that aren't selected *using a trigger); you could add additional selected styles if required:
<Setter TargetName="Border" Property="Background" Value="{StaticResource myBrush}" />
Note: I've changed the background of the TabControl so it's no longer transparent (so it has the shadow. This might fall flat on it's face depending on how you want to use the control (i.e. if you want to show content underneath).
Before this version, I had a different version that used a DropShadow and a clipping grid, which will retain the underlying transparency if you need it. It does rely on you manually matching the gradient brush with the DropShadow. Let me know if you need that other version and I'll post it.
Good luck.

Answer 2

You could get something similar by changing the background color to a gradient on the TabItem:
<Style TargetType="TabItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#eeeeee" Offset="0.0"/>
<GradientStop Color="#eeeeee" Offset="0.6"/>
<GradientStop Color="#b6b6b6" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>