Question

I’m trying to create an application-bar like set of icons with text that will always be positioned along the physical top edge of the phone. So I have a stack panel of (img1 text1), (img2 text2) etc. wherein each pair is also within its own stack panel with vertical orientation. On orientation change, I just adjust the horizontal and vertical alignment of the parent stack panel and change the orientation of that panel to horizontal (or vertical as the case may be). This causes everything to be fine … except for the ordering.

The ordering goes from 1, 2, 3, 4 … (going left to right at the top in portrait mode) to going to 4, 3, 2, 1 … going bottom to top in landscape. I.e., Item 1 moved from its physical position (top left edge of physical phone) to the top right edge of the phone due to the rotate.

So I want to item 1 to rotate in place, just like the app bar icons do. How can I achieve this?

Here is the representative XAML for the component with the icons:

<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>

I want controls 1, 2 and 3 to remain in the same position relative to the physical device but just rotate (icon and text) just like the app bar icons do.

Answer 1

Why don’t you do the following (done this way by most developers)

1. Create a Portrait and Landscape layout in a DataTemplate
2. Bind the Content in the page to a DataTemplate in the Page/ViewModel
3. When the Orientation changes then update the DataTemplate DP/INotify to the correct one

This will probably be the easiest option

EDIT

Here is an awesome example