如何像ApplicationBar图标在方向更改期间旋转一样旋转StackPanel中的元素

Question

我正在尝试创建一组类似应用程序栏的图标，这些图标的文本将始终位于手机的物理顶部边缘。因此，我有一个（img1 text1）、（img2 text2）等堆栈面板，其中每对也在其垂直方向的堆栈面板内。在方向更改时，我只调整父堆栈面板的水平和垂直对齐，并将该面板的方向更改为水平（或垂直，视情况而定）。这会让一切都好起来。。。除了订购。

排序从1、2、3、4。。。（在人像模式下从左到右在顶部）转到4、3、2、1。。。在景观中从下到上。即，由于旋转，项目1从其物理位置（物理手机的左上边缘）移动到手机的右上边缘。

所以我想像应用程序栏图标一样，将项目1旋转到位。我该如何实现这一点？

以下是带有图标的组件的代表性XAML：

<Grid>
      <StackPanel x:Name="mainControlPanel" 
                HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Horizontal">
        <StackPanel Orientation="Vertical" Margin="3" Tap="function1">
            <Image Source="Images/Icons/control1.png" Height="36" Width="36"/>
            <TextBlock Text="Control 1" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        </StackPanel>
        <StackPanel Orientation="Vertical" Margin="3" Tap="function2">
            <Image Source="Images/Icons/control2.png" Height="36" Width="36"/>
            <TextBlock Text="Control 2" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        </StackPanel>
        <StackPanel Orientation="Vertical" Margin="3" Tap="function3">
            <Image Source="Images/Icons/control3.png" Height="36" Width="36"/>
            <TextBlock Text="Control 3" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        </StackPanel>
   </StackPanel>
</Grid>

我希望控件1、2和3相对于物理设备保持在相同的位置，但只是像应用程序栏图标一样旋转（图标和文本）。

Answer 1

为什么不执行以下操作（大多数开发人员都是这样做的）

1. 在DataTemplate中创建纵向和横向布局
2. 将页面中的内容绑定到页面/ViewModel中的DataTemplate
3. 当方向发生变化时，将DataTemplate DP/INotify更新为正确的

这可能是最简单的选择

编辑

这里有一个很棒的例子