Question

Hello there fellow developers!
I am working on a Windows Phone 7 app and I can’t figure out what I believe is a simple problem for the more seasoned ones.
Say I have a layout consisting of two elements: a ListBox (filled with an abundance of items) and a TextBlock (providing the user with some basic instructions).

I want these to be one above the other when the device is in Portrait orientation and I want these to be next to each other when the device orientation changes to Landscape.

For the Portrait orientation I am using a Grid layout manager, as it lets me define the rows’ heights like so… row 0 Height="2*", row 1 Height="*"

Listbox sits in row 0, TextBlock in row 1. Now, what would be really neat is to simple change the RowDefinitions into ColumnDefinitions and reassign the listbox/textblock to the grid’s columns instead of rows for when the device switches into Landscape.

But that’s just my idea. I don’t know how to get this done elegantly. Maybe there’s a better approach to this? Or maybe this is the correct approach and there is some method built for exactly this purpose?

Thank you for your suggestions!

Answer 1

How about this for the default portrait configuration:-

<Grid>
   <Grid.RowDefinitions>
       <RowDefinition Height="2*" />
       <RowDefinition Height="*" />
   </Grid.RowDefintions>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="2*" />
       <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

   <ListBox x:Name="ItemList" Grid.ColumnSpan="2" />
   <TextBlock x:Name="Instructions" Grid.Row="1" Grid.ColumnSpan="2">
      Content
   </TextBlock> 

Then in your OrientationChanged event use:-

if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait)
{
     Grid.SetRow(ItemList, 0);
     Grid.SetRowSpan(ItemList, 1);
     Grid.SetColumn(ItemList, 0);
     Grid.SetColumnSpan(ItemList, 2);

     Grid.SetRow(Instructions, 1);
     Grid.SetRowSpan(Instructions, 1);
     Grid.SetColumn(Instructions, 0);
     Grid.SetColumnSpan(Instructions, 2);
}
else
{
     Grid.SetRow(ItemList, 0);
     Grid.SetRowSpan(ItemList, 2);
     Grid.SetColumn(ItemList, 0);
     Grid.SetColumnSpan(ItemList, 1);

     Grid.SetRow(Instructions, 0);
     Grid.SetRowSpan(Instructions, 2);
     Grid.SetColumn(Instructions, 1);
     Grid.SetColumnSpan(Instructions, 1);
}