如何使用的RenderTransform控制

我想使垂直显示一个TextBlock TextBlock的方向，就像在Windows Phone的用户名内置电子邮件应用程序：如何使用的RenderTransform控制

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

来源

2012-03-05 ellic

您的问题是渲染变换应用后布局，如in this blog post所述。您需要将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-05 16:51:56 ColinE

由于可啉，你顺便说一句，你已经帮了我很多忙，你知道如何实现芒果下拉式刷新列表框吗？我试过设计这个列表框，但找不到一个好的方法。 – ellic 2012-03-06 07:56:31

@ellic如果我的回答有帮助，请立即投票。关于拉到刷新列表框，请尝试以下操作：http://danielvaughan.org/post/Scroll-Based-Data-Loading-in-Windows-Phone-7.aspx – ColinE 2012-03-06 08:24:07

嗨，ColinE。我检查过这个帖子，但它不符合我的需求。我希望列表框被滚动到顶部，当列表框被拉下时，面板将显示出来，指示“如果用户继续拉下来，列表框将刷新其数据”。类似的东西。 – ellic 2012-03-06 13:21:42

我会通过一起使用转换和旋转转换来处理它。该旋转-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-05 16:52:24 gbanfill

谢谢，gbanfill。 – ellic 2012-03-06 07:54:31

如何使用的RenderTransform控制

回答

相关问题