Umgang mit verschiedenen Orientierungen bei der Entwicklung von Windows 8 Store-Anwendungen

Question

Ich schreibe seit einigen Jahren Android-Anwendungen und entwickle jetzt eine Windows Store/Windows 8-Anwendung.

Ich bin sehr verwirrt darüber, wie man verschiedene Bildschirmlayouts für Hoch- und Querformat ausgibt.

In Android müssen wir nur zwei Layouts schreiben, eins für Hochformat und ein anderes für Querformat, wobei wir einigen Namenskonventionen für die Dateinamen folgen. Wenn wir das Gerät drehen, ändert die Plattform das Bildschirmlayout automatisch.

Ich google für eine Lösung, um das gleiche in meiner Windows 8-Anwendung zu tun, und alles, was ich gefunden habe, war eine Lösung mit Visual State Groups und Visual States, in dem gleichen XAML einige Modifikationen, die unsere passieren Widgets, wenn wir das Gerät drehen.

Zum Beispiel macht einen Textblock seine Position ändern, wenn ich das Gerät im Hochformat drehen:

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

Es sieht nicht sehr sauber und einfach zu mir, und auch der Visual Studio zu tun, dass die Verwendung Ansatz zum Ziehen und Ablegen von Widgets, um Code zu generieren Ich habe den Eindruck, dass es eine einfachere und sauberere Lösung als das, was ich mache, sein muss.

Also meine Frage ist: Gibt es eine einfachere Lösung, um XAML-Layouts für jede Orientierung zu schreiben oder gehe ich richtig, aber schwer?

Danke!

Answer 1

Eine Möglichkeit, unterschiedliche Orientierungen zu handhaben, besteht darin, zwei Grid-Elemente mit ihren untergeordneten Elementen zu erstellen und die Sichtbarkeit der Grids entsprechend der Ausrichtung zu ändern.

Orientierungsänderungen zu erkennen, können Sie auch unter SimpleOrientation Sensor wie der Code verwenden:

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

    } 

Oder der einfachste Weg ist, Sizechanged-Ereignis wie dem folgenden Code zu handhaben:

dieser

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"; 
    } 

} 

Hoffnung hilft!

Answer 2

Esdras - Sie irren sich nicht, es sollte wahrscheinlich einen einfacheren Weg geben, aber die einzige andere Option ist die Software Expression Blend. Und ich gebe zu, dass es eine Lernkurve gibt, um zum Laufen zu kommen.

Auch für in Xaml geschriebene Orientierungsänderungen muss das übergeordnete Steuerelement von einem Steuerelement gesteuert werden, das erweitert werden kann (nicht intern versiegelt) und Layout-bewusst sein muss. Wenn Sie zum Beispiel eine Textbox auf einer Layout-bewussten Seite platzieren, ändert sich ihre Ausrichtung, wenn Sie jedoch ein Raster auf die Layout-Aware-Seite und ein Textfeld im Raster legen ... Das Standardverhalten ist, dass das Raster antwortet, aber die Textfeld wird nicht.

Sie können auch feststellen, dass obwohl es chaotisch ist und jede Steuerung einen Steuermodifikator benötigt, wie Sie für jedes Element, das auf Orientierungsänderung reagieren sollte, zur Verfügung gestellt ... Der Vorteil ist, dass es keinen systemeigenen Code benötigt, um den Status oder den Übergang zu definieren Und so können Designer das xml-ähnliche Aussehen mit dem Namen xaml verwenden, um die Änderungen in der Ansicht zu beschreiben, ob es sich um eine Ausrichtung oder um die Zustände anderer Steuerelemente handelt.

Wenn Sie das Programm Expression Blend bekommen können, wurde es für diesen Zweck gemacht.

Answer 3

Ich habe vor einiger Zeit einen Beitrag auf stackoverflow geschrieben, der für Sie nützlich sein könnte. Bei einigem Beispiel und Code:

[Umgang mit Ausrichtung auf Windows 8-Apps] [1] Handling Orientation in Windows 8.1 Store app

Beitrag mich, wenn Sie mehr Fragen haben.

Danke, Ambuj