Posted by: Zeeshan Amjad | December 20, 2009

Apply Nested Control Template in Tab Control


We can customize the appearance of any WPF control by changing its control template. If we try to create nested control, such as nested tab controls then we can apply different control item template to both tab items. Here is a XAML code to define the control template of outer tab item.

  1: <TabControl.Resources>
  2: 	<Style TargetType="{x:Type TabItem}">
  3: 		<Setter Property="Template">
  4: 			<Setter.Value>
  5: 				<ControlTemplate TargetType="{x:Type TabItem}">
  6: 					<Border Name="border" BorderBrush="Brown" Background="LightYellow" BorderThickness="1" CornerRadius="10, 10, 0, 0">
  7: 						<ContentPresenter x:Name="ContentSite"  
  8: 									 VerticalAlignment="Center" HorizontalAlignment="Center"
  9: 									 ContentSource="Header" Margin="5">
 10: 						</ContentPresenter>
 11: 					</Border>
 12: 					<ControlTemplate.Triggers>
 13: 						<Trigger Property="IsSelected" Value="True">
 14: 							<Setter TargetName="border" Property="Background" Value="LightBlue" />
 15: 						</Trigger>
 16: 						<Trigger Property="IsSelected" Value="False">
 17: 							<Setter TargetName="border" Property="Background" Value="LightYellow" />
 18: 						</Trigger>
 19: 					</ControlTemplate.Triggers>
 20: 				</ControlTemplate>
 21: 			</Setter.Value>
 22: 		</Setter>       
 23: 	</Style>
 24: </TabControl.Resources>
 25: 

Similarly here is a XAML code to define control template to inner tab control.

  1: <Setter Property="Template">
  2: 	<Setter.Value>
  3: 		<ControlTemplate TargetType="{x:Type TabItem}">
  4: 			<Border Name="border" BorderBrush="Brown" Background="Wheat" BorderThickness="1" CornerRadius="0, 10, 10, 0">
  5: 				<ContentPresenter x:Name="ContentSite"  
  6: 					 VerticalAlignment="Center" HorizontalAlignment="Center"
  7: 					 ContentSource="Header" Margin="5">
  8: 					<ContentPresenter.LayoutTransform>
  9: 						<RotateTransform Angle="90"/>
 10: 					</ContentPresenter.LayoutTransform>
 11: 				</ContentPresenter>
 12: 			</Border>
 13: 			<ControlTemplate.Triggers>
 14: 				<Trigger Property="IsSelected" Value="True">
 15: 					<Setter TargetName="border" Property="Background" Value="Wheat" />
 16: 				</Trigger>
 17: 				<Trigger Property="IsSelected" Value="False">
 18: 					<Setter TargetName="border" Property="Background" Value="LightGray" />
 19: 				</Trigger>
 20: 			</ControlTemplate.Triggers>
 21: 		</ControlTemplate>
 22: 	</Setter.Value>
 23: </Setter>
 24: 

Also note that here we display the text in vertical form. In addition we also define property trigger at both outer and inner tab controls. Here is a complete XAML code of the project.

  1: <Window x:Class="wpfTabSample.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Folder View" Height="400" Width="500">
  5:     <TabControl>
  6:         <TabControl.Resources>
  7:             <Style TargetType="{x:Type TabItem}">
  8:                 <Setter Property="Template">
  9:                     <Setter.Value>
 10:                         <ControlTemplate TargetType="{x:Type TabItem}">
 11:                             <Border Name="border" BorderBrush="Brown" Background="LightYellow" BorderThickness="1" CornerRadius="10, 10, 0, 0">
 12:                                 <ContentPresenter x:Name="ContentSite"  
 13:                                              VerticalAlignment="Center" HorizontalAlignment="Center"
 14:                                              ContentSource="Header" Margin="5">
 15:                                 </ContentPresenter>
 16:                             </Border>
 17:                             <ControlTemplate.Triggers>
 18:                                 <Trigger Property="IsSelected" Value="True">
 19:                                     <Setter TargetName="border" Property="Background" Value="LightBlue" />
 20:                                 </Trigger>
 21:                                 <Trigger Property="IsSelected" Value="False">
 22:                                     <Setter TargetName="border" Property="Background" Value="LightYellow" />
 23:                                 </Trigger>
 24:                             </ControlTemplate.Triggers>
 25:                         </ControlTemplate>
 26:                     </Setter.Value>
 27:                 </Setter>       
 28:             </Style>
 29:         </TabControl.Resources>
 30:         <TabItem Header="California" Padding="5">            
 31:             <TabControl TabStripPlacement="Right">
 32:                 <TabControl.Resources>
 33:                     <Style TargetType="{x:Type TabItem}">
 34:                         <Setter Property="Padding" Value="5"/>
 35:                         <Setter Property="Template">
 36:                             <Setter.Value>
 37:                                 <ControlTemplate TargetType="{x:Type TabItem}">
 38:                                     <Border Name="border" BorderBrush="Brown" Background="Wheat" BorderThickness="1" CornerRadius="0, 10, 10, 0">
 39:                                         <ContentPresenter x:Name="ContentSite"  
 40:                                              VerticalAlignment="Center" HorizontalAlignment="Center"
 41:                                              ContentSource="Header" Margin="5">
 42:                                             <ContentPresenter.LayoutTransform>
 43:                                                 <RotateTransform Angle="90"/>
 44:                                             </ContentPresenter.LayoutTransform>
 45:                                         </ContentPresenter>
 46:                                     </Border>
 47:                                     <ControlTemplate.Triggers>
 48:                                         <Trigger Property="IsSelected" Value="True">
 49:                                             <Setter TargetName="border" Property="Background" Value="Wheat" />
 50:                                         </Trigger>
 51:                                         <Trigger Property="IsSelected" Value="False">
 52:                                             <Setter TargetName="border" Property="Background" Value="LightGray" />
 53:                                         </Trigger>
 54:                                     </ControlTemplate.Triggers>
 55:                                 </ControlTemplate>
 56:                             </Setter.Value>
 57:                         </Setter>
 58:                     </Style>
 59:                 </TabControl.Resources>
 60:                 
 61:                 <TabItem Header="Los Angeles"/>
 62:                 <TabItem Header="San Francisco"/>
 63:                 <TabItem Header="San Diego"/>
 64:                 <TabItem Header="Sacramento"/>
 65:             </TabControl>
 66:         </TabItem>
 67:         <TabItem Header="Taxes" Padding="5">
 68:             <TabControl TabStripPlacement="Right">
 69:                 <TabControl.Resources>
 70:                     <Style TargetType="{x:Type TabItem}">
 71:                         <Setter Property="Padding" Value="5"/>
 72:                         <Setter Property="Template">
 73:                             <Setter.Value>
 74:                                 <ControlTemplate TargetType="{x:Type TabItem}">
 75:                                     <Border Name="border" BorderBrush="Brown" Background="Wheat" BorderThickness="1" CornerRadius="0, 10, 10, 0">
 76:                                         <ContentPresenter x:Name="ContentSite"  
 77:                                              VerticalAlignment="Center" HorizontalAlignment="Center"
 78:                                              ContentSource="Header" Margin="5">
 79:                                             <ContentPresenter.LayoutTransform>
 80:                                                 <RotateTransform Angle="90"/>
 81:                                             </ContentPresenter.LayoutTransform>
 82:                                         </ContentPresenter>
 83:                                     </Border>
 84:                                     <ControlTemplate.Triggers>
 85:                                         <Trigger Property="IsSelected" Value="True">
 86:                                             <Setter TargetName="border" Property="Background" Value="Wheat" />
 87:                                         </Trigger>
 88:                                         <Trigger Property="IsSelected" Value="False">
 89:                                             <Setter TargetName="border" Property="Background" Value="LightGray" />
 90:                                         </Trigger>
 91:                                     </ControlTemplate.Triggers>
 92:                                 </ControlTemplate>
 93:                             </Setter.Value>
 94:                         </Setter>
 95:                     </Style>
 96:                 </TabControl.Resources>
 97:                 <TabItem Header="Houston"/>
 98:                 <TabItem Header="Austin"/>
 99:                 <TabItem Header="Dallas"/>
100:             </TabControl>
101:         </TabItem>
102:     </TabControl>
103: </Window>
104: 

This is the output of this program.

TabControl_ControlTemplate

Advertisements

Responses

  1. […] To use any other panel, we have to define the control template of our tabcontrol. In control template, we define one grid and then use other panel to display the tab item. Here is a piece of code to use DockPanel instead of TabPanel for tab items. We already saw the example of using Control Template in tab control here. […]

  2. […] saw the usage of Path here. We can create very interesting geometrical shape with the help of it.  If we use this with […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: