TabControl item header text appears blurry after rotating tabs

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>

enter image description here

Hi Deni, Can you please post a screenshot of what is happening? — Jordy van Eijk, Sep 26 '12 at 08:28
Probably it has something to do with Anti Aliasing can you please take a loot at [this whitepaper](http://windowsclient.net/wpf/white-papers/wpftextclarity.aspx) — Jordy van Eijk, Sep 26 '12 at 08:48
try UseLayoutRounding=true on Window. Might be pixel snapping maybe. — Erti-Chris Eelmaa, Sep 26 '12 at 09:01
If you rotate all tabItems -90°,so you will need to rotate their Content back 90°. I think it's better to rotate the TextBlock's TabItem Header only. — HichemSeeSharp, Sep 26 '12 at 09:51

score 17 · Accepted Answer · answered Sep 26 '12 at 10:44

17

Add the following properties to the window declaration XAML

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

answered Sep 26 '12 at 10:44

Peregrine

4,287
3
17
34

Thanks for the solution. What could I do in .Net 3.5 ? this is only valid on .Net 4 sadly. – RanH Jul 02 '14 at 12:36

score 2 · Answer 2 · edited May 23 '17 at 12:13

2

You could check out the RenderOptions class which controls rendering behavior of Objects. For example see this (Image in WPF getting Blurry) where it was used to reduce blurring of images.

edited May 23 '17 at 12:13

Community

1
1

answered Sep 26 '12 at 09:25

sam1589914

806
4
9

HichemSeeSharp · Answer 3 · 2012-09-26T10:39:14.367

Try to add SnapsToDevicePixels="True" and UseLayoutRounding="True" to your Border or TabControl tag. These have solved my blurriness problems in most cases.
I suggest this code snippet :

<TabControl TabStripPlacement="Left" Margin="5"  FontSize="13" FontFamily="Verdana" Grid.ColumnSpan="2" SnapsToDevicePixels="True" UseLayoutRounding="True" >
                        <TabControl.Resources>
                            <Style TargetType="{x:Type TabItem}">
                                <Setter Property="BorderThickness" Value="0"/>
                                <Setter Property="Padding" Value="0" />
                                <Setter Property="HeaderTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <Border x:Name="grid" Margin="0" >
                                                <Border.LayoutTransform>
                                                    <RotateTransform Angle="270" ></RotateTransform>
                                                </Border.LayoutTransform>
                                                <ContentPresenter>
                                                    <ContentPresenter.Content>
                                                        <TextBlock FontFamily="Verdana"   Margin="4"  Text="{TemplateBinding Content}">

                                                        </TextBlock>

                                                    </ContentPresenter.Content>
                                                </ContentPresenter>
                                            </Border>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </TabControl.Resources>
                        <TabItem Name="General"   Header="YourHeader"  > ..

TabControl item header text appears blurry after rotating tabs

3 Answers3