Using Canvas as 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 ListBox here.

First step of defing canvas is very similar to define other panel. For this we have to define control template of tab control. But this time we are going to use Canvas as a panel. Here is a piece of code to define this.

  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/>

 10: 						<RowDefinition/>

 11: 					</Grid.RowDefinitions>

 12: 					<Canvas

 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: 
When we place items in Canvas panel we have to specify its position too. We define a class to store information about header text as well as its position. 
  1: public class DataPoint

  2: {

  3:     public DataPoint(String name, int left, int top)

  4:     {

  5:         Name = name;

  6:         Left = left;

  7:         Top = top;

  8:     }

  9: 

 10:     public String Name

 11:     { get; set; }

 12: 

 13:     public int Left

 14:     { get; set; }

 15: 

 16:     public int Top

 17:     { get; set; }

 18: }

 19: 
Now we are going to define one style to use the for tab item. Here is a XAML code for this. 
  1: <Style x:Key="myStyle" TargetType="TabItem">

  2: 	<Setter Property="Canvas.Left" Value="{Binding Left}"/>

  3: 	<Setter Property="Canvas.Top" Value="{Binding Top}"/>

  4: 	<Setter Property="Width" Value="50"/>

  5: 	<Setter Property="Height" Value="25"/>

  6: </Style>

  7: 
Then we will use this with tab controls, itemscontainerstyle property. 
  1: <TabControl ItemsSource="{Binding}" ItemContainerStyle="{StaticResource myStyle}" >
Here is 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="TabControl" Height="300" Width="300">

  5:     <Window.Resources>

  6:         <Style x:Key="myStyle" TargetType="TabItem">

  7:             <Setter Property="Canvas.Left" Value="{Binding Left}"/>

  8:             <Setter Property="Canvas.Top" Value="{Binding Top}"/>

  9:             <Setter Property="Width" Value="50"/>

 10:             <Setter Property="Height" Value="25"/>

 11:         </Style>

 12:         <Style TargetType="TabControl">

 13:             <Setter Property="Template">

 14:                 <Setter.Value>

 15:                     <ControlTemplate TargetType="{x:Type TabControl}">

 16:                         <Grid KeyboardNavigation.TabNavigation="Local"

 17:                       SnapsToDevicePixels="true"

 18:                       ClipToBounds="true">

 19:                             <Grid.RowDefinitions>

 20:                                 <RowDefinition/>

 21:                                 <RowDefinition/>

 22:                             </Grid.RowDefinitions>

 23:                             <Canvas

 24:                                 Panel.ZIndex ="1" 

 25:                                 KeyboardNavigation.TabIndex="1"

 26:                                 Grid.Column="0"

 27:                                 Grid.Row="0"

 28:                                 Margin="0, 0, 0, -1"

 29:                                 IsItemsHost="true"/>

 30:                             <Border

 31:                                 Background="{TemplateBinding Background}"

 32:                                 BorderThickness="{TemplateBinding BorderThickness}"

 33:                                 BorderBrush="{TemplateBinding BorderBrush}"

 34:                                 KeyboardNavigation.TabNavigation="Local"

 35:                                 KeyboardNavigation.DirectionalNavigation="Contained"

 36:                                 KeyboardNavigation.TabIndex="2"

 37:                                 Grid.Row="1">

 38:                                 <ContentPresenter                                    

 39:                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"

 40:                                     Margin="{TemplateBinding Padding}"

 41:                                     ContentSource="SelectedContent"/>

 42:                             </Border>

 43:                         </Grid>

 44:                     </ControlTemplate>

 45:                 </Setter.Value>

 46:             </Setter>

 47:         </Style>

 48:     </Window.Resources>

 49:     <Grid>

 50:         <TabControl ItemsSource="{Binding}" ItemContainerStyle="{StaticResource myStyle}" >

 51:             <TabControl.ItemTemplate>

 52:                 <DataTemplate>

 53:                     <Border>

 54:                         <TextBlock Text="{Binding Name}"/>

 55:                     </Border>

 56:                 </DataTemplate>

 57:             </TabControl.ItemTemplate>

 58:             <TabControl.ContentTemplate>

 59:                 <DataTemplate>

 60:                     <Border Margin="5" BorderThickness="1" CornerRadius="10" BorderBrush="Black">

 61:                         <Rectangle Margin="10" Fill="{Binding Name}"/>

 62:                     </Border>

 63:                 </DataTemplate>

 64:             </TabControl.ContentTemplate>

 65:         </TabControl>

 66:     </Grid>

 67: </Window>

 68: 
 
Now we define some objects of Data Point in our code and use this as a DataContext of the window. Here is complete C# code of the program. 
  1: using System;

  2: using System.Collections.Generic;

  3: using System.Linq;

  4: using System.Text;

  5: using System.Windows;

  6: using System.Windows.Controls;

  7: using System.Windows.Data;

  8: using System.Windows.Documents;

  9: using System.Windows.Input;

 10: using System.Windows.Media;

 11: using System.Windows.Media.Imaging;

 12: using System.Windows.Navigation;

 13: using System.Windows.Shapes;

 14: 

 15: namespace WpfTabPanel

 16: {

 17:     /// <summary>

 18:     /// Interaction logic for Window1.xaml

 19:     /// </summary>

 20:     public partial class Window1 : Window

 21:     {

 22:         private List<DataPoint> data = new List<DataPoint>();

 23: 

 24:         public Window1()

 25:         {           

 26:             InitializeComponent();

 27: 

 28:             data.Add(new DataPoint("Blue", 10, 10));

 29:             data.Add(new DataPoint("Green", 60, 35));

 30:             data.Add(new DataPoint("Red", 110, 60));

 31:             data.Add(new DataPoint("Yellow", 160, 85));

 32: 

 33:             DataContext = data;

 34:         }

 35:     }

 36: 

 37:     public class DataPoint

 38:     {

 39:         public DataPoint(String name, int left, int top)

 40:         {

 41:             Name = name;

 42:             Left = left;

 43:             Top = top;

 44:         }

 45: 

 46:         public String Name

 47:         { get; set; }

 48: 

 49:         public int Left

 50:         { get; set; }

 51: 

 52:         public int Top

 53:         { get; set; }

 54:     }

 55: }

 56: 
Here is a output of the program. 



About these ads