Posted by: Zeeshan Amjad | May 5, 2010

Use different panel in Tab Control


By default tab control is using TabPanel to display the tabitems header. TabPanel is a primitive class inherited by Panel and define in System.Windows.Controls.Primitives namespace. We have already saw the example of TabPanel here. Here is a class diagram of all classes inherited by Panel class.

Panel_03

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.

  1: <Style TargetType="TabControl">
  2: 	<Setter Property="Template">
  3: 		<Setter.Value>
  4: 			<ControlTemplate TargetType="{x:Type TabControl}">
  5: 				<Grid KeyboardNavigation.TabNavigation="Local"
  6: 			  SnapsToDevicePixels="true"
  7: 			  ClipToBounds="true">
  8: 					<Grid.RowDefinitions>
  9: 						<RowDefinition Height="Auto"/>
 10: 						<RowDefinition Height="*"/>
 11: 					</Grid.RowDefinitions>
 12: 					<DockPanel
 13: 						Panel.ZIndex ="1" 
 14: 						KeyboardNavigation.TabIndex="1"
 15: 						Grid.Column="0"
 16: 						Grid.Row="0"
 17: 						Margin="0, 0, 0, -1"
 18: 						IsItemsHost="true"/>
 19: 					<Border
 20: 						Background="{TemplateBinding Background}"
 21: 						BorderThickness="{TemplateBinding BorderThickness}"
 22: 						BorderBrush="{TemplateBinding BorderBrush}"
 23: 						KeyboardNavigation.TabNavigation="Local"
 24: 						KeyboardNavigation.DirectionalNavigation="Contained"
 25: 						KeyboardNavigation.TabIndex="2"
 26: 						Grid.Row="1">
 27: 						<ContentPresenter                                    
 28: 							SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
 29: 							Margin="{TemplateBinding Padding}"
 30: 							ContentSource="SelectedContent"/>
 31: 					</Border>
 32: 				</Grid>
 33: 			</ControlTemplate>
 34: 		</Setter.Value>
 35: 	</Setter>
 36: </Style>
 37: 

Also note that we define two rows of our grid and use Dock panel in first row. If we did the same with the second row, then our tab items will display at the bottom of the window rather than top. We can also define columns of the grid to display some other interesting effects. Here is a complete XAML code of the program.

  1: <Window x:Class="WpfTabPanel.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Window1" Height="300" Width="300">
  5:     <Window.Resources>
  6:         <Style TargetType="TabControl">
  7:             <Setter Property="Template">
  8:                 <Setter.Value>
  9:                     <ControlTemplate TargetType="{x:Type TabControl}">
 10:                         <Grid KeyboardNavigation.TabNavigation="Local"
 11:                       SnapsToDevicePixels="true"
 12:                       ClipToBounds="true">
 13:                             <Grid.RowDefinitions>
 14:                                 <RowDefinition Height="Auto"/>
 15:                                 <RowDefinition Height="*"/>
 16:                             </Grid.RowDefinitions>
 17:                             <DockPanel
 18:                                 Panel.ZIndex ="1" 
 19:                                 KeyboardNavigation.TabIndex="1"
 20:                                 Grid.Column="0"
 21:                                 Grid.Row="0"
 22:                                 Margin="0, 0, 0, -1"
 23:                                 IsItemsHost="true"/>
 24:                             <Border 
 25:                                 Background="{TemplateBinding Background}"
 26:                                 BorderThickness="{TemplateBinding BorderThickness}"
 27:                                 BorderBrush="{TemplateBinding BorderBrush}"
 28:                                 KeyboardNavigation.TabNavigation="Local"
 29:                                 KeyboardNavigation.DirectionalNavigation="Contained"
 30:                                 KeyboardNavigation.TabIndex="2"
 31:                                 Grid.Row="1">
 32:                                 <ContentPresenter                                    
 33:                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
 34:                                     Margin="{TemplateBinding Padding}"
 35:                                     ContentSource="SelectedContent"/>
 36:                             </Border>
 37:                         </Grid>
 38:                     </ControlTemplate>
 39:                 </Setter.Value>
 40:             </Setter>
 41:         </Style>
 42:     </Window.Resources>
 43:     <Grid>
 44:         <TabControl>            
 45:             <TabControl.Items>                
 46:                 <TabItem Header="first">
 47:                     <Rectangle Margin="5" Fill="AliceBlue"/>
 48:                 </TabItem>
 49:                 <TabItem Header="second">
 50:                     <Rectangle Margin="5" Fill="LightGray"/>
 51:                 </TabItem>
 52:                 <TabItem Header="third">
 53:                     <Rectangle Margin="5" Fill="Wheat"/>
 54:                 </TabItem>
 55:                 <TabItem Header="fourth">
 56:                     <Rectangle Margin="5" Fill="Coral"/>
 57:                 </TabItem>
 58:             </TabControl.Items>                     
 59: 
 60:         </TabControl>
 61:     </Grid>
 62: </Window>
 63: 

And here is the output of the program.

TabControl_DockPanel

Advertisements

Responses

  1. […] a ItemPanelTemplate in TabControl We already saw how to use different item panel template here. Now we are going to use Canvas as a item panel template. We already did the similar thing in […]


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: