1

我想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 代码？提前致谢。

4

2 回答 2

2

您的问题是在布局之后应用了渲染转换，如本博文中所述。您需要将其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>
于 2012-03-05T16:51:56.563 回答
1

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

像这样...

  <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>
于 2012-03-05T16:52:24.973 回答