在UWP中文字旋转不能再用LayoutTranform了,只能用RenderTransform。在文字旋转过程中,我们会问旋转的锚点在哪里,是在文字的中心,还是文字的左上角呢?这个其实是通过TextBlock的RenderTransformOrigin属性控制的,它的值是两个比率,表明锚点在文字的X,Y方向的什么地方。RenderTransformOrigin=“0,0” 代表旋转锚点在文字的左上角,RenderTransformOrigin=“0.5,0.5”表示旋转的锚点在文字的中心。看下面的例子就比较清楚了。
<Canvas Name="ChartCanvas" Background="Yellow" Grid.Row="1">
<TextBlock Foreground="Silver" FontSize="16" FontWeight="Light" FontFamily="Segoe UI"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0,0.5"
Text="Selvakumar Singa">
<TextBlock.RenderTransform>
<RotateTransform Angle="30"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Foreground="DarkGray" FontSize="16" FontWeight="Light" FontFamily="Segoe UI"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0,0.5"
Text="Selvakumar Singa">
<TextBlock.RenderTransform>
<RotateTransform Angle="60"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Foreground="Black" FontSize="16" FontWeight="Light" FontFamily="Segoe UI"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0,0.5"
Text="Selvakumar Singa">
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Foreground="Green" FontSize="16" FontWeight="Light" FontFamily="Segoe UI"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0,0.5"
Text="Selvakumar Singa">
</TextBlock>
<!-- rotate anchor at center -->
<TextBlock Foreground="Silver" Canvas.Top="300" FontSize="16" FontWeight="Light" FontFamily="Segoe UI"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"
Text="Selvakumar Singa">
<TextBlock.RenderTransform>
<RotateTransform Angle="30"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Foreground="DarkGray" Canvas.Top="300" FontSize="16" FontWeight="Light" FontFamily="Segoe UI"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"
Text="Selvakumar Singa">
<TextBlock.RenderTransform>
<RotateTransform Angle="60"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Foreground="Black" Canvas.Top="300" FontSize="16" FontWeight="Light" FontFamily="Segoe UI"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"
Text="Selvakumar Singa">
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Foreground="Green" Canvas.Top="300" FontSize="16" FontWeight="Light" FontFamily="Segoe UI"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"
Text="Selvakumar Singa">
</TextBlock>
</Canvas>