Приложения для Windows Phone 7 - изменение ориентации - PullRequest
Новая
       13

Приложения для Windows Phone 7 - изменение ориентации

4 голосов
/ 14 октября 2010

Здравствуйте, коллеги-разработчики! Я работаю над приложением для Windows Phone 7 и не могу понять, что я считаю простой проблемой для более опытных. Скажем, у меня есть макет, состоящий из двух элементов: ListBox (заполненный множеством элементов) и TextBlock (предоставляющий пользователю некоторые основные инструкции).

Я хочу, чтобы они находились один над другим, когда устройство находится в книжной ориентации, и я хочу, чтобы они находились рядом друг с другом, когда ориентация устройства меняется на Пейзаж.

Для книжной ориентации я использую диспетчер разметки сетки, так как он позволяет мне определять высоту строк следующим образом: строка 0 Height="2*", строка 1 Height="*"

Listbox находится в строке 0, TextBlock в строке 1. Теперь, что было бы действительно удобно - это просто изменить RowDefinition s на ColumnDefinition s и переназначить listbox / textblock на столбцы сетки вместо строк, когда устройство переключается в альбомную ориентацию.

Но это только моя идея. Я не знаю, как сделать это элегантно. Может быть, есть лучший подход к этому? Или, может быть, это правильный подход, и для этой цели создан какой-то метод?

Спасибо за ваши предложения!

Ответы [ 3 ]

3 голосов
/ 14 октября 2010

Как насчет этого для конфигурации портрета по умолчанию: - 

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

Затем в вашем OrientationChanged событии используйте: - 

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);
}
2 голосов
/ 14 октября 2010

Для ориентации лучше всего работает Visual State Manager.

  1. В Blend определите два состояния, назовите их "port" и "land".
  2. Поместите панель управления «Устройство» в рабочую область Blend.
  3. Запишите макеты, изменив ориентацию и разработав каждый макет соответствующим образом.
  4. В событии изменения ориентации используйте следующий код:

Код: 

private void PhoneApplicationPage_OrientationChanged
(object sender, OrientationChangedEventArgs e)
{
   VisualStateManager
    .GoToState(this, e.Orientation.ToString().Substring(0, 4), true);
}
1 голос
/ 15 октября 2010

В блогах msdn я нашел хорошую статью, в которой довольно просто рассказывается о трансформации макетов такого типа и объясняются и другие подходы:

http://blogs.msdn.com/b/ptorr/archive/2010/03/27/strategies-for-dealing-with-orientation-changes.aspx

Почему я не сталкивался с этим раньше? :-) Удачного кодирования!

...