Question

I have a Silverlight page that I would like to have below appearance in portrait and landscape mode. Essentially, there are three images arranged in a grid. The big image spans two columns. When the phone rotates, the images rotate, but the overall layout does not. The small images remain close to the back/windows/search button and the large image remains towards the top of the phone.

I have tried a number of methods to achieve this effect, but they have all proved unsatisfactory in one way or another. I’m hoping that someone can point out something that I’m missing or, at the very least, prevent someone else from having to waste 4 or 5 days coming to the same conclusion that I did. Questions in Bold:

• The first thing I tried was applying a RotateTransform to the LayoutRoot element and rotating it -90 degrees whenever the phone rotation changed to landscape. I had to hard code the height and width of the layout root to 800 and 400 instead of “Auto” or it gets drawn squished. This solution almost worked, but the RotateTransform gets applied after the page is drawn. Because it is drawn as an 400×800 image on an 800×400 screen, the top 200 and bottom 200 pixels aren’t drawn. This becomes obvious after it’s rotated and the (now)left and right portions are missing. Is there a way to force the layout engine to draw off the screen so that all the pixels are there after the RotateTransform is applied?

• The next thing I considered (but did not try) was to set the page SupportedOrientations to “PortraitOnly” and then use the accelerometer to generate my own “OnOrientationChanged” event and then selectively rotate the images by 90 degrees when the phone is tilted to landscape. I determined this is a bad idea because I would probably get this wrong in some subtle way resulting in confusion when rotation didn’t work quite the same way in my app as in every other app. Is there a way to have the OnOrientationChanged event fire without also automatically updating the layout of the grid that contains my elements? Alternatively, is there some other hook that can be used to detect the phone orientation?

• The last thing I tried was similar to the advice offered here: Windows Phone 7 applications – Orientation Change and here: http://blogs.msdn.com/b/ptorr/archive/2010/03/27/strategies-for-dealing-with-orientation-changes.aspx. This solution seems a bit brittle to me because it forces me to change the relative sizes of my grid rows and columns in the OnOrientationChanged event handler as well as in the xaml code. In the portrait mode, the first row is set to 5* and the 2nd row is set to 2*. Then when I switch to landscape, the rows need to be each set to 1* and the columns need to be set to 5* and 2* respectively. Alternatively, I could hard-code the size of the small images and set the rows and columns to Auto, but then I’m still stuck hard coding something. Since I’ve exhausted all of my other options, I think this is the solution that I’m stuck with.

Am I missing anything, or is this the way to do it?

Answer 1

You don’t really have to hard code anything. What you need is clever designing. To develop good applications with multiple orientation support you should come up with a clever grid layout which lets you reposition objects the way you want without creating a mess.

For your situation consider the layout:

 <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3.5*" />
            <ColumnDefinition Width="1.5*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2.5*"/>
            <RowDefinition Height="1.5*" />
            <RowDefinition Height="1.5*" />
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Margin="12,17,0,28" Grid.ColumnSpan="3" Grid.RowSpan="3"></StackPanel>
        <Image Name="bigSmiley" Margin="8" Grid.RowSpan="3" Grid.ColumnSpan="3" Source="big.jpg"
               Stretch="Fill"/>
        <Image Name="smallSmiley1" Grid.Row="3" Source="smiley.jpg" Stretch="Fill" Margin="8"/>
        <Image Name="smallSmiley2" Grid.Row="3" Grid.Column="1"
               Source="smiley.jpg" Stretch="Fill" Margin="8"
               Grid.ColumnSpan="2" />
        <!--ContentPanel - place additional content here-->
    </Grid>

And your orientation changed method should be like:

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait)
            {
                Grid.SetRow(bigSmiley, 0);
                Grid.SetColumn(bigSmiley, 0);
                Grid.SetColumnSpan(bigSmiley, 3);
                Grid.SetRowSpan(bigSmiley, 3);
                Grid.SetRow(smallSmiley1, 3);
                Grid.SetColumn(smallSmiley1, 0);
                Grid.SetColumnSpan(smallSmiley1, 1);
                Grid.SetRowSpan(smallSmiley1, 1);
                Grid.SetRow(smallSmiley2, 3);
                Grid.SetColumn(smallSmiley2, 1);
                Grid.SetColumnSpan(smallSmiley2, 2);
                Grid.SetRowSpan(smallSmiley2, 1);
            }
            else
            {
                Grid.SetRow(bigSmiley, 0);
                Grid.SetColumn(bigSmiley, 0);
                Grid.SetColumnSpan(bigSmiley, 2);
                Grid.SetRowSpan(bigSmiley, 4);
                Grid.SetRow(smallSmiley1, 0);
                Grid.SetColumn(smallSmiley1, 2);
                Grid.SetColumnSpan(smallSmiley1, 1);
                Grid.SetRowSpan(smallSmiley1, 2);
                Grid.SetRow(smallSmiley2, 2);
                Grid.SetColumn(smallSmiley2, 2);
                Grid.SetColumnSpan(smallSmiley2, 1);
                Grid.SetRowSpan(smallSmiley2, 2);
            }
        }

Result:

I hope that solves your issue. Remember, there’s always a better design which makes your problems go away! 🙂