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