Posted by: Zeeshan Amjad | July 30, 2009

Folder view in WPF


If we want to make a folder view in WPF then we have to use nested tab control. Here is simple example to demonstrate this.

  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:         <TabItem Header="California">
  7:             <TabControl TabStripPlacement="Right">
  8:                 <TabItem Header="Los Angeles"/>
  9:                 <TabItem Header="San Francisco"/>
 10:                 <TabItem Header="San Deigo"/>
 11:             </TabControl>
 12:         </TabItem>
 13:         <TabItem Header="Taxes">
 14:             <TabControl TabStripPlacement="Right">
 15:                 <TabItem Header="Houston"/>
 16:                 <TabItem Header="Austin"/>
 17:                 <TabItem Header="Dallas"/>
 18:             </TabControl>
 19:         </TabItem>
 20:     </TabControl>
 21: </Window>
 22: 

Here is the output of this program.

FolderView_01

To get the more real effect of folder the sub tab should display the text vertically, as we usually see in real folder. We apply the logical resource here and set the data template of tabitem. We use the contentpresent property to set the content of the tabitem and rotate it to 90 degree. Here is the code to do this operation

  1: <TabControl.Resources>
  2: 	<Style TargetType="{x:Type TabItem}">
  3: 		<Setter Property="Padding" Value="5"/>
  4: 		<Setter Property="HeaderTemplate">
  5: 			<Setter.Value>
  6: 				<DataTemplate>
  7: 					<ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}">
  8: 						<ContentPresenter.LayoutTransform>
  9: 							<RotateTransform Angle="90"/>
 10: 						</ContentPresenter.LayoutTransform>
 11: 					</ContentPresenter>
 12: 				</DataTemplate>
 13: 			</Setter.Value>
 14: 		</Setter>
 15: 	</Style>
 16: </TabControl.Resources>
 17: 

Here is the complete XAML code of the program

  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:         <TabItem Header="California" Padding="5">
  7:             <TabControl TabStripPlacement="Right">
  8:                 <TabControl.Resources>
  9:                     <Style TargetType="{x:Type TabItem}">
 10:                         <Setter Property="Padding" Value="5"/>
 11:                         <Setter Property="HeaderTemplate">
 12:                             <Setter.Value>
 13:                                 <DataTemplate>
 14:                                     <ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}">
 15:                                         <ContentPresenter.LayoutTransform>
 16:                                             <RotateTransform Angle="90"/>
 17:                                         </ContentPresenter.LayoutTransform>
 18:                                     </ContentPresenter>
 19:                                 </DataTemplate>
 20:                             </Setter.Value>
 21:                         </Setter>
 22:                     </Style>
 23:                 </TabControl.Resources>
 24:                 
 25:                 <TabItem Header="Los Angeles"/>
 26:                 <TabItem Header="San Francisco"/>
 27:                 <TabItem Header="San Diego"/>
 28:             </TabControl>
 29:         </TabItem>
 30:         <TabItem Header="Taxes" Padding="5">
 31:             <TabControl TabStripPlacement="Right">
 32:                 <TabControl.Resources>
 33:                     <Style TargetType="{x:Type TabItem}">
 34:                         <Setter Property="Padding" Value="5"/>
 35:                         <Setter Property="HeaderTemplate">
 36:                             <Setter.Value>
 37:                                 <DataTemplate>
 38:                                     <ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}">
 39:                                         <ContentPresenter.LayoutTransform>
 40:                                             <RotateTransform Angle="90"/>
 41:                                         </ContentPresenter.LayoutTransform>
 42:                                     </ContentPresenter>
 43:                                 </DataTemplate>
 44:                             </Setter.Value>
 45:                         </Setter>
 46:                     </Style>
 47:                 </TabControl.Resources>
 48:                 <TabItem Header="Houston"/>
 49:                 <TabItem Header="Austin"/>
 50:                 <TabItem Header="Dallas"/>
 51:             </TabControl>
 52:         </TabItem>
 53:     </TabControl>
 54: </Window>
 55: 

Here is the output of the program.

FolderView_02

Advertisements

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: