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.

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.



About these ads