Click here to Skip to main content
14,493,201 members
Rate this:
Please Sign up or sign in to vote.
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>
Posted
Updated 3-Apr-17 2:53am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

There are many tutorials and solutions that can be found on Google Search for Drop Shadow: wpf xaml dropshadow[^]

Also official documentation: How to: Create a Drop Shadow Visual Effect[^]

I think that this is the answer that you are looking for: xaml - WPF TabItem and TabControl templates combined - Stack Overflow[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100