Xaml 如何使用RenderTransform控制文本块的方向

我想垂直显示一个

TextBlock

，就像Windows Phone内置电子邮件应用程序中的用户名一样：

我的XAML代码是：

<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>

结果是：

---

TextBlock

没有显示在正确的位置，如何修改XAML代码？提前感谢。

您的问题是，渲染变换是在布局之后应用的，如前所述。您需要将

TextBlock

从

StackPanel

中取出，并确保它位于屏幕的左上角，然后旋转它

<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>

---

我会同时使用平移和旋转变换来处理它。旋转-90以旋转到垂直位置，平移以将其移动到正确位置（即锚定新的左上角，而不是新的左下角）

像这样

  <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>

谢谢ColinE，顺便说一句，你帮了我很多忙，你知道如何在mango中实现下拉刷新列表框吗？我已经尝试过设计这个列表框，但找不到一个好方法。@ellic如果我的答案有帮助，请向上投票。关于拉刷新列表框，请尝试以下操作：嗨，ColinE。我查过那篇文章，但它不符合我的需要。我希望列表框被滚动到顶部，当列表框被下拉时，会出现一个面板，指示“如果用户继续下拉，列表框将刷新其数据”。差不多吧。