WPF: Text rotation and alignment issues

user_6289224 0
Viewed 159

I am trying to create a label for a WPF project which involves sections being of different foreground colours and a special character that has to undergo a 180 rotation. I am nearly there but there are a few problems.

Here is the image so far:

enter image description here

and here is the XAML that generates it:

       <Viewbox>
        <StackPanel Margin="5"
                    Background="White"
                    Orientation="Horizontal">
            <StackPanel.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="FontFamily" Value="Trebuchet MS" />
                    <Setter Property="FontSize" Value="40" />
                </Style>
            </StackPanel.Resources>
            <TextBlock Margin="5,0,0,0"
                       VerticalAlignment="Bottom"
                       Foreground="Black"
                       Text="XXX" />
            <TextBlock VerticalAlignment="Bottom"
                       FontSize="50"
                       Foreground="Green"
                       Text="Δ">
                <TextBlock.LayoutTransform>
                    <RotateTransform Angle="180" />
                </TextBlock.LayoutTransform>
            </TextBlock>
            <TextBlock Margin="0,0,5,0"
                       VerticalAlignment="Bottom"
                       Foreground="Orange"
                       Text="YYY" />
        </StackPanel>
    </Viewbox>

The problem with this is that the bottom 'special character' between the 'XXX' and 'YYY' that has been rotated 180 is not aligned with the bottoms of 'XXX' and 'YYY'.

So, I tried to rework the XAML where I had one TextBlock and each section was controlled as a Run.

Here is an image of this:

enter image description here

And here is the XAML for the revised image:

       <Viewbox>
        <StackPanel Margin="5"
                    Background="White"
                    Orientation="Horizontal">
            <StackPanel.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="FontFamily" Value="Trebuchet MS" />
                    <Setter Property="FontSize" Value="40" />
                </Style>
            </StackPanel.Resources>
            <TextBlock Margin="5,0,0,0" VerticalAlignment="Bottom">
                <Run Foreground="Black" Text="XXX" />
                <Run FontSize="50"
                     Foreground="Green"
                     Text="Δ">
                    <!-- <Run.LayoutTransform>
                        <RotateTransform Angle="180" />
                    </Run.LayoutTransform> -->
                </Run>
                <Run Foreground="Orange" Text="YYY" />
            </TextBlock>
        </StackPanel>
    </Viewbox>

As you will notice that while the bottom alignment problem is now ok, this is worse than the first attempt as there are now gaps between the special character and the 'XXX' and 'YYY'. And a Run does not support transformations.

So, how can I achieve this? That is, create the first image but with the special character vertically aligned with the 'XXX' and 'YYY'.

wpf c#
2 Answers

You can use apply render transformation to adjust vertical position slightly:

<TextBlock.LayoutTransform>
    <RotateTransform Angle="180" />
</TextBlock.LayoutTransform>
<TextBlock.RenderTransform>
    <TranslateTransform Y="3" />
</TextBlock.RenderTransform>

user_19972320

Are you look for something like BaselineAlignment?

This would make your code look like this:

<TextBlock Margin="5,0,0,0" VerticalAlignment="Center">
    <Run Foreground="Black" Text="XXX" BaselineAlignment="Center"/>
    <Run FontSize="50" Foreground="Green" Text="Δ" BaselineAlignment="Center" />
    <Run Foreground="Orange" Text="YYY" BaselineAlignment="Center" />
</TextBlock>

Update:

If you want to rotate the triangle, you can do it by adding a <TextBlock> insinde the textblock. So it looks like this:

<Run Foreground="Black" Text="XXX"  BaselineAlignment="Center"/>
    <TextBlock Magin="-12 0">
        <TextBlock.LayoutTransform>
            <RotateTransform Angle="180" />
        </TextBlock.LayoutTransform>
        <Run FontSize="50" Foreground="Green" Text="Δ" />
    </TextBlock>
    <Run Foreground="Orange" Text="YYY" BaselineAlignment="Center" />
</TextBlock>

It's a it messy, but it works:

And the result like this:

Without rotation

...and this, with rotation and margins

With rotation and margin

user_24454150
Related