Posted by: Zeeshan Amjad | May 6, 2010

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.

TabControl_Canvas

Advertisements

Responses

  1. […] Panel in TabControl We already played with item panel template of Tab control here and here. Now lets continue our exploration and use custom panel. For this purpose we are going to use a […]

  2. When increasing the data binding values, we go for Virtualization. Any sample With list of canvas holding on a WPF Grid using Virtualization concept?


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: