Как использовать RenderTransform для управления ориентацией TextBlock - PullRequest
Новая
       19

Как использовать RenderTransform для управления ориентацией TextBlock

1 голос
/ 05 марта 2012

Я хочу сделать TextBlock показанным вертикально, точно так же как имя пользователя во встроенном почтовом приложении Windows Phone:

enter image description here

И мой код 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>

Результат:

enter image description here

TextBlock не отображается в нужном месте, как я могу изменить код XAML?Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 05 марта 2012

Ваша проблема в том, что преобразования рендеринга применяются после макета, как описано в этом сообщении в блоге .Вам нужно вытащить 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>
1 голос
/ 05 марта 2012

Я бы подошел к нему, используя трансляцию и трансформацию поворота вместе. Поверните -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>
...