How to use the RenderTransform to control the orientation of a TextBlock - xaml

Question

I want to make a TextBlock shown vertically, just like the username in the Windows Phone built-in email app:
And my XAML code is:
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="{StaticResource Status_Background}" Stretch="UniformToFill"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ProgressBar x:Name="progressBar" IsIndeterminate="True" Grid.ColumnSpan="2" VerticalAlignment="Top" Visibility="Collapsed" Margin="0,6"/>
<StackPanel>
<Image x:Name="headerImage" Margin="0,12" Width="70" Height="70" HorizontalAlignment="Center" Stretch="UniformToFill"/>
<TextBlock Text="userName" x:Name="userName" Grid.ColumnSpan="2" Margin="0"
FontSize="50" Foreground="{StaticResource Status_UserName}"
Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" CenterX="80" CenterY="70"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
<ScrollViewer Grid.Column="1" Height="Auto">
</ScrollViewer>
</Grid>
The result is:
The TextBlock didn't show up in the right place, how could I modify the XAML code? Thanks in advance.

Answer 1

Your problem is that render transforms are applied after layout, as described in this blog post. You need to bring your TextBlock out of the StackPanel and ensure that it is in the top left of the screen, then rotate it.
<Grid x:Name="LayoutRoot" >
<Grid.Background>
<ImageBrush ImageSource="{StaticResource Status_Background}" Stretch="UniformToFill"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="userName" x:Name="userName" FontSize="50" Foreground="{StaticResource Status_UserName}" Width="auto"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" CenterX="80" CenterY="70"/>
</TextBlock.RenderTransform>
</TextBlock>
<ProgressBar x:Name="progressBar" IsIndeterminate="True" Grid.ColumnSpan="2" VerticalAlignment="Top" Visibility="Collapsed" Margin="0,6" />
<StackPanel>
<Image x:Name="headerImage" Margin="0,12" Width="70" Height="70" HorizontalAlignment="Center" Stretch="UniformToFill"/>
</StackPanel>
<ScrollViewer Grid.Column="1" Height="auto">
</ScrollViewer>
</Grid>

Answer 2

I would approach it by using a translate and a rotate transform together. The rotate -90 to rotate to vertical and the translate to move it the correct place (i.e. anchor the new top left rather than the new bottom left)
Like this...
<Grid x:Name="LayoutRoot" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ProgressBar x:Name="progressBar" IsIndeterminate="True" Grid.ColumnSpan="2" VerticalAlignment="Top" Visibility="Collapsed" Margin="0,6" />
<StackPanel>
<Image x:Name="headerImage" Margin="0,12" HorizontalAlignment="Center" Stretch="UniformToFill"/>
<TextBlock Text="userName" x:Name="userName" Grid.ColumnSpan="2" Margin="0" FontSize="50" Foreground="{StaticResource Status_UserName}" Width="225.100006103516"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<CompositeTransform CenterY="0" CenterX="0" Rotation="-90" TranslateY="{Binding Width, ElementName=userName}"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Grid>