WPF Rotated TextBlock look unclear

Question

I have a Expander with a TextBlock assigned to the Header. It's rotated 90 degrees. The problem is that the Text look unclear:

Unclear font

As you can see the "Debug" isn't that sharp! Is there a way to fix it?

MY XAML code is

<Window x:Class="Minecraft_Autocarafter.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 Margin="10,10,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="220*"/>
        <ColumnDefinition Width="277*"/>
    </Grid.ColumnDefinitions>

    <Button Name="RunButton"  Content="Run Bot" Click="RunButton_Click" HorizontalAlignment="Left" Width="80" Height="23" VerticalAlignment="Top"/>
    <Button x:Name="StopButton"  Content="Stop Bot" Click="StopButton_Click" HorizontalAlignment="Left" Width="80" Height="23" VerticalAlignment="Top" Margin="0,28,0,0" IsEnabled="False"/>
    <ListBox x:Name="AblaufBox" Margin="100,0,0,0" HorizontalAlignment="Left" Width="100">
        <ListBoxItem Content="Started"/>
        <ListBoxItem Content="Checking Items"/>
        <!--<ListBoxItem Name="Start" Content="Started"/>
        <ListBoxItem Name="Start" Content="Started"/>-->
    </ListBox>



    <Expander Grid.Column="1" Margin="10,0,17,0" ExpandDirection="Right">
        <Expander.Header>
            <TextBlock Text="Debug">
                <TextBlock.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="90"/>
                        <TranslateTransform X="25"/>
                    </TransformGroup>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Expander.Header>
        <Grid Grid.Column="1" Visibility="Visible">
            <ListBox Name="DebugListBox">
                <ListBoxItem Content="Test"/>
            </ListBox>
        </Grid>
    </Expander>
</Grid>

Oh, and I started WPF one hour before, so don't flame me please :D

You are using RenderTransform, this transform the texTblock rendering the text and can get pixeled. You must render the Layout with "TextBlock.LayoutTransform" and this will transform the entire Layout from the TextBlock. This will work better. Greetings! — soydachi, Mar 10 '14 at 18:28

score 3 · Answer 1 · edited May 23 '17 at 11:45

3

Try this

 <Expander Grid.Column="1" Margin="10,0,17,0" ExpandDirection="Right">
        <Expander.Header>
            <TextBlock Text="Debug" TextOptions.TextFormattingMode="Display">
            </TextBlock>
        </Expander.Header>
 </Expander>

please refer this link

edited May 23 '17 at 11:45

Community

1
1

answered Mar 10 '14 at 18:24

Heena

8,450
1
22
40

2

+1 for pointing out the `TextOptions.TextFormattingMode` but `TextOptions.TextHintingMode="Animated"` should probably be mentioned as well. – Chris W. Mar 10 '14 at 18:54

score 2 · Answer 2 · answered Mar 10 '14 at 18:27

2

Try setting properties for TextBlock:

UseLayoutRounding="True" OR SnapsToDevicePixels="True" 
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="ClearType"

answered Mar 10 '14 at 18:27

Anatoliy Nikolaev

22,370
15
69
68

WPF Rotated TextBlock look unclear

2 Answers2