1

TextBlockWindows 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

あなたの問題は、このブログ投稿で説明されているように、レンダリングの変換がレイアウトの後に適用されることです。から出して、画面の左上にあることを確認してから、回転させる必要があります。TextBlockStackPanel

<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

平行移動と回転変換を一緒に使用してアプローチします。-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>
于 2012-03-05T16:52:24.973 に答える