windows phone 8 渲染旋转无法正常工作答案

【问题标题】：windows phone 8 render rotation not working correctlywindows phone 8 渲染旋转无法正常工作
【发布时间】：2014-12-29 18:38:48
【问题描述】：

我正在开发Windows Phone 8 C#/XAML .NET 4.5 应用程序。

我的页面具有纵向方向（仅 - 我需要使页面处于此方向）。

在页面上有一个顶部面板，在它下面是页面的其余部分作为内容。内容需要顺时针旋转 90 度，旋转后的内容必须填满页面的其余部分。

我遇到的问题是，在将内容旋转 90 度后，并非所有内容都显示。即使我将内容设置为 SQUARE（相同的宽度和高度）并将其围绕中心旋转 90 度，也只会渲染最初显示的适合屏幕的部分。

简化示例：

<!-- SIMPLIFIED FOR BREVITY  -->
<page with portrait orientation>
  <Grid x:Name=Content>
     <Grid.RowDefinitions>
       <RowDefinition Height="120" /> <!-- TOP PANEL -->
       <RowDefinition Height="*"   /> <!-- REST OF THE CONTENT -->
     </Grid.RowDefinitions>

     <TopPanelControl />


     <!-- I'M working with 480 x 800 page resolution -->
     <!-- for the purpose of simplicity              -->
     <!-- But the page can be any size               -->

     <Grid x:Name="RotatedContent"
             Background="Red"
             RenderTransformOrigin="0.5,0.5"
             VerticalAlignment="Center"
             HorizontalAlignment="Center"
             Width="668"
             Height="400"
             Grid.Row="1">
             <!-- EVEN IF THE HEIGHT IS 668, result is the same -->
         <Grid.RenderTransform>
           <RotateTransform Angle="90"/>
         </Grid.RenderTransform>
         <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
         </Grid.RowDefinitions> 
         <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>

         <TextBlock Grid.Row="0"
                    Grid.Column="0" 
                    Text="000"
                    TextAlignment="Left"/>

         <TextBlock Grid.Row="1"
                    Grid.Column="1" 
                    Text="111"
                    TextAlignment="Center"/>

         <TextBlock Grid.Row="2"
                    Grid.Column="2" 
                    Text="222"
                    TextAlignment="Right"/>

     </Grid>

  </Grid>
</page>

我的问题是：

如何将比屏幕宽的控件（但在旋转时不旋转）旋转 90 度，然后将其全部显示（未剪辑）。

【问题讨论】：

标签： c# xaml windows-phone-8 windows-phone

【解决方案1】：

ViewBox 可以方便地拉伸内容。将 Grid 包裹在 ViewBox 中。

XAML

<Viewbox  Grid.Row='1'
          Stretch='Uniform'
          RenderTransformOrigin="0.5,0.5"
          VerticalAlignment='Top'
          HorizontalAlignment='Right'>

  <Grid x:Name="RotatedContent"
        Background="DarkRed"
        Height='400'
        Width='400'
        Grid.Row='1'
        RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
      <RotateTransform Angle="0" />
    </Grid.RenderTransform>
    ...
</Viewbox

屏幕截图

【讨论】：

嗯，这可以用来实现结果 :) 我将尝试它并发布结果/尝试后将其设置为答案 :)
嗯，它几乎可以工作，问题是拉伸是在旋转之前完成的，这意味着生成的卡片被拉伸“太多”（放大太大）并且只有一小部分它出现在屏幕上。剪辑已经消失了。
您必须尝试使用视图框和网格上的设置。效果很好，当大小为正方形时，我的示例在内容为矩形时效果不佳。
这就是问题所在，我把它弄成了矩形

【解决方案2】：

我通过使用 CANVAS 控件找到了解决我自己问题的方法。画布控件可以比手机的屏幕大，但是当旋转时，它上面的所有东西都可以正确渲染而不会被剪裁（唯一的问题是背景）。我稍后会完成更全面的答案，现在没有时间。

P.S.：如果有人想在我有时间之前写它，这个答案在这里被编辑:)

【讨论】：