Question

I have a requirement to create a WPF TabControl control with tabs rotated to the left.

The resources I’ve found online suggest that this can be done by applying the following two things to the TabControl:

<Setter Property="LayoutTransform">
   <Setter.Value>
     <RotateTransform Angle="270"/>
   </Setter.Value>
</Setter>

and

<TabControl TabStripPlacement="Left" ...

All this works and the tabs are displayed as required but for some reason the Header text in the tabs appears blurry after the rotation, please suggest why this is happening and if there is anything I can do to fix this issue.

Complete XAML:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TabControl BorderBrush="Gray" BorderThickness="1" TabStripPlacement="Left">
            <TabControl.ItemContainerStyle>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="LayoutTransform">
                        <Setter.Value>
                            <RotateTransform Angle="270"/>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>                            
                            <ControlTemplate TargetType="{x:Type TabItem}">
                                <Grid>
                                    <Border Name="Border" BorderBrush="Gray" BorderThickness="1" CornerRadius="6,6,0,0">
                                        <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center" HorizontalAlignment="Center" 
                                        ContentSource="Header" Margin="12,2,12,2"/>
                                    </Border>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.ItemContainerStyle>
            <TabItem Header="Item 1" />
            <TabItem Header="Item 2" />
            <TabItem Header="Item 3" />
        </TabControl>
    </Grid>
</Window>

Answer 1

Add the following properties to the window declaration XAML

TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="ClearType"
UseLayoutRounding="true"