Obsługa różnych orientacji podczas opracowywania aplikacji Windows 8 Store

Question

Piszę aplikacje na Androida od kilku lat, a teraz tworzę aplikację Windows Store/Windows 8.

Jestem bardzo zaskoczony, jak pisać różne układy ekranu dla orientacji poziomej i pionowej.

W systemie Android, wszystko co musimy zrobić, to napisać 2 układy, jeden dla portretu i drugi dla krajobrazu, zgodnie z konwencjami nazw dla nazw plików, a kiedy obracamy urządzenie, platforma automatycznie zmienia układ ekranu.

Szukałem jakiegoś rozwiązania, by zrobić to samo w mojej aplikacji Windows 8, a wszystko, co znalazłem, było rozwiązaniem wykorzystującym Visual State Groups i Visual States, wprowadzając te same XAML zmiany, które miały miejsce widżety po obróceniu urządzenia.

Na przykład, aby TextBlock zmienić swoją pozycję, kiedy obrócić urządzenie do orientacji pionowej:

<VisualState x:Name="FullScreenPortrait" > 
    <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="GridViewTitle"> 
      <DiscreteObjectKeyFrame KeyTime="0"> 
       <DiscreteObjectKeyFrame.Value> 
        <x:Int32>3</x:Int32> 
       </DiscreteObjectKeyFrame.Value> 
      </DiscreteObjectKeyFrame> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="GridViewTitle"> 
      <DiscreteObjectKeyFrame KeyTime="0"> 
       <DiscreteObjectKeyFrame.Value> 
        <Thickness>0,10,10,807</Thickness> 
       </DiscreteObjectKeyFrame.Value> 
      </DiscreteObjectKeyFrame> 
     </ObjectAnimationUsingKeyFrames> 
    </Storyboard> 
</VisualState> 

To nie wygląda bardzo czysty i prosty do mnie, a nawet robi to za pomocą Visual Studio podejście do przeciągania i upuszczania widżetów do generowania kodu Mam wrażenie, że musi istnieć łatwiejsze i czystsze rozwiązanie niż to, co robię.

Moje pytanie brzmi: czy istnieje jakieś łatwiejsze rozwiązanie do pisania układów XAML dla każdej orientacji, czy też idę w prawo, ale na swój sposób?

Dzięki!

Answer 1

Jednym ze sposobów radzenia sobie z różnymi orientacjami jest stworzenie dwóch elementów siatki z ich dziećmi wewnątrz i zmiana widoczności siatek według orientacji.

Aby wykryć zmiany orientacji, można również użyć czujnika SimpleOrientation jak poniższy kod:

public sealed partial class MainPage : Page 
    { 
     private SimpleOrientationSensor _oSensor; 

     public MainPage() 
     { 
      this.InitializeComponent(); 

      _oSensor = SimpleOrientationSensor.GetDefault(); 

     } 

     protected override void OnNavigatedTo(NavigationEventArgs e) 
     { 
      if (_oSensor != null) 
       _oSensor.OrientationChanged += (s, a) => 
       { 
        Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,() => 
        { 
         switch (a.Orientation) 
         { 
          case SimpleOrientation.NotRotated: 
          case SimpleOrientation.Rotated180DegreesCounterclockwise: 
           currentOrientation.Text = "Landscape"; 
           break; 
          case SimpleOrientation.Rotated270DegreesCounterclockwise: 
          case SimpleOrientation.Rotated90DegreesCounterclockwise: 
           currentOrientation.Text = "Portrait"; 
           break; 
          default: 
           currentOrientation.Text = "N/A"; 
           break; 
         } 
        }); 
       }; 
     } 

    } 

Or Najłatwiej jest do obsługi SizeChanged zdarzenie jak poniższy kod:

public sealed partial class MainPage : Page 
{ 
    public MainPage() 
    { 
     this.InitializeComponent(); 

     mainGrid.SizeChanged += mainGrid_SizeChanged; 
    } 

    void mainGrid_SizeChanged(object sender, SizeChangedEventArgs e) 
    { 
     if (mainGrid.ActualHeight > mainGrid.ActualWidth) 
      currentOrientation.Text = "Portrait"; 
     else 
      currentOrientation.Text = "Landscape"; 
    } 

} 

nadzieję, że ten pomaga!

Answer 2

Esdras - nie mylisz się, prawdopodobnie powinien być łatwiejszy sposób, ale jedyną inną opcją jest oprogramowanie Expression Blend. I przyznaję, że istnieje krzywa uczenia się, aby zacząć działać.

Również dla zmian orientacyjnych zapisanych w Xaml, kontrola rodzicielska musi prowadzić od kontrolki, która może być rozszerzona (nie jest wewnętrznie zapieczętowana) i musi być rozplanowana w układzie. Na przykład, jeśli umieścisz pole tekstowe na stronie z informacją o układzie, jej orientacja się zmieni, ale jeśli umieścisz siatkę na stronie Świadomość układu i pole tekstowe w siatce ... Domyślnym zachowaniem jest to, że siatka odpowie, ale pole tekstowe nie będzie.

Możesz również zauważyć, że choć jest brudny, a każda kontrola wymaga modyfikatora kontroli, takiego jak w przypadku każdego elementu, który powinien reagować na zmiany orientacji ... Zaletą jest to, że nie wymaga natywnego kodu do zdefiniowania stanu lub przejścia i dlatego projektanci mogą używać zarówno wyglądu xml zwanego xaml, aby opisać zmiany w widoku, czy to orientacja, czy stany innych elementów sterujących.

Jeśli możesz wziąć udział w programie Expression Blend, został stworzony w tym celu.

Answer 3

Napisałem post na stackoverflow jakiś czas temu, który może ci się przydać. Wyposażone jakiś przykład i kod:

[Handling Orientacja na Windows 8 aplikacje] [1] Handling Orientation in Windows 8.1 Store app

post me, jeśli masz więcej problemów.

Dzięki, Ambuj