2010-10-14 2 views
4

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

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

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

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

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

Благодарим вас за предложения!

+0

Вы пробовали этот подход? Это сработало? Были ли проблемы? –

ответ

3

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

<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); 
} 
+0

Также не забудьте установить ориентацию при навигации и/или загрузке страницы, так как вы не можете быть уверены, какую ориентацию будет у устройства при навигации (или возврате) этой страницы. –

+1

@Matt: Хорошая точка лучше всего размещает вышеуказанный код в функции и вызывается из обоих кодовых мест. – AnthonyWJones

+0

@Peter: Я не могу объяснить, какое поведение я проверил своим кодом на эмуляторе, и он отлично работает. – AnthonyWJones

2

Для ориентации, Visual государственный менеджер работает лучше всего.

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

Код:

private void PhoneApplicationPage_OrientationChanged 
(object sender, OrientationChangedEventArgs e) 
{ 
    VisualStateManager 
    .GoToState(this, e.Orientation.ToString().Substring(0, 4), true); 
} 
+0

Это звучит просто, но мы не используем Blend ... –

+2

Blend - отличный инструмент для WP7 dev, и я очень рекомендую вы, по крайней мере, проверяете это). Однако вы все равно сможете делать то, что описано в этом ответе без смешивания. Взгляните на эту тему для начала - http://forums.silverlight.net/forums/p/30033/98891.aspx –

+0

Я не верю, что использование функции Record в Blend позволит вам изменить строку и если они нуждаются в изменении. –

1

Я нашел хорошую статью в MSDN блог, которая занимается таким родом преобразования макета в довольно простом способе и объясняет другие подходы, а также:

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

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

Смежные вопросы