Hier wird beschrieben, wie bei einem TabControl die TabItems auf der linken oder rechten Seite platziert werden können.
Dabei soll auch der Text auf den TabItems vertikal ausgerichtet sein.
Das WPF TabControl bietet eine Eigenschaft "TabStripPlacement", mit der
man an festlegt, wo die Tabs erscheinen sollen. Zur Auswahl stehen
"Bottom", "Left", "Right" und "Top". Für dieses Beispiel nehme ich
"Left":
Hinweis: Die Codebeispiele sind so gehalten, dass sie direkt in einem Xaml Editor wie
Kaxaml oder
XamlPadX ausgeführt werden können.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<TabControl TabStripPlacement="Left">
<TabItem Header="Langes Tabitem 1"/>
<TabItem Header="Langes Tabitem 2"/>
</TabControl>
</Grid>
</Page>
Bisher
wird hier der Text der TabItems noch horizontal ausgerichtet. Das
Rendering der TabItems kann nun durch ein DataTemplate so angepasst
werden, dass der Text um -90° rotiert wird:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<TabControl TabStripPlacement="Left">
<TabItem Header="Langes Tabitem 1">
<TabItem.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{TemplateBinding Content}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
<TabItem Header="Langes Tabitem 2">
<TabItem.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{TemplateBinding Content}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
</TabControl>
</Grid>
</Page>
Das Ganze kann noch in einen Style verpackt werden, um redundanten Code zu vermeiden. So sieht dann das finale Xaml aus:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{TemplateBinding Content}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<TabControl TabStripPlacement="Left">
<TabItem Header="Langes Tabitem 1"/>
<TabItem Header="Langes Tabitem 2"/>
</TabControl>
</Grid>
</Page>
