XAML - Center alignment of textblock after rotation

Question

I have a stackpanel with textblock and image. I need to align the textblock to center with rotation(90 degree).Like this,

enter image description here

But, after rotate the textblock i am always getting result like this,

enter image description here

this is the XAML code i am using,

<StackPanel Orientation="Horizontal">
        <Image Width="120" Source="ms-appx:///Assets/mail.jpg"/>
        <TextBlock Text="send mail" FontSize="15" Margin="25,0,0,0" >
            <TextBlock.RenderTransform>
                <RotateTransform Angle="90"/>
            </TextBlock.RenderTransform>
        </TextBlock>
    </StackPanel>

how can i align my textblock to center..?

paiden · Answer 1 · 2013-04-12T07:42:34.100

8

Setting the VerticalAlignment of the TextBlock to 'Center' and Rotating around the TextBlocks center point by setting RenderTransformOrigin should help.

<TextBlock Text="xyz" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Margin="25,0,0,0">
    <TextBlock.RenderTransform>
        <RotateTransform Angle="90" />
    </TextBlock.RenderTransform>
</TextBlock>

edited Apr 12 '13 at 07:42

answered Apr 11 '13 at 13:26

paiden

887
7
15

3

Additionally try to set RenderTransformOrigin="0.5,0.5" to rotate your element around it's center. I also updated my answer. – paiden Apr 12 '13 at 07:42
Used the RenderTransformOrigin on my solution worked like a charm. Thank you! – Ricardo Mota Sep 22 '15 at 11:29

XAML - Center alignment of textblock after rotation

1 Answers1