« GE Advantium Oven Review Revisited | Main | BitmapImage.UriSource binding doesn't work ... »

Rotated text in a TabControl

It's not obvious how to rotate the text in a WPF TabControl TabItem's Header. However, it is easy. :)

The trick is to adjust the TabItem's HeaderTemplate. I created a simple DataTemplate that rotated the contained content using a LayoutTransform (a RenderTransform would have clipped the content).

 

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="Window"
    Title="Window1"
    Width="640" Height="480" >

<Window.Resources>
<DataTemplate x:Key="TabItemHeaderTemplate">
<Grid>
<ContentPresenter Content="{TemplateBinding Content}"
RenderTransformOrigin="0.5,0.5" >
<ContentPresenter.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="-90"/>
</TransformGroup>
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Grid>
</DataTemplate>
</Window.Resources>

<Grid x:Name="LayoutRoot">
<TabControl Margin="163,47,64,50"
IsSynchronizedWithCurrentItem="True"
TabStripPlacement="Left">
<TabItem Header="A big one"
HeaderTemplate="{DynamicResource TabItemHeaderTemplate}">
<Grid>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="128"
Text="1"
TextWrapping="Wrap"/>
</Grid>
</TabItem>
<TabItem Header="A big two"
HeaderTemplate="{DynamicResource TabItemHeaderTemplate}">
<Grid>
<TextBlock FontSize="128"
Text="2"
TextWrapping="Wrap"
Margin="143.02,83.375,143.02,83.375"/>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>

Help support my web site by searching and buying through Amazon.com (in assocation with Amazon.com).