Gestione di orientamenti diversi durante lo sviluppo di applicazioni Windows 8 Store

Question

Scrivo applicazioni Android da alcuni anni e ora sto sviluppando un'applicazione Windows Store/Windows 8.

Sono molto confuso su come scrivere diversi layout dello schermo per l'orientamento orizzontale e verticale.

In Android, tutto ciò che dobbiamo fare è scrivere 2 layout, uno per il ritratto e un altro per il paesaggio, seguendo alcune convenzioni sui nomi dei file, e quando ruotiamo il dispositivo la piattaforma cambia automaticamente il layout dello schermo.

Ho cercato su Google una soluzione per fare lo stesso con la mia applicazione Windows 8, e tutto ciò che ho trovato era una soluzione che utilizzava gruppi di stati visivi e stati visivi, inserendo nello stesso XAML alcune modifiche che accadono al nostro widget quando ruotiamo il dispositivo.

Ad esempio, per fare un blocco di testo cambiare la sua posizione quando ho ruotare il dispositivo in verticale:

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

Non sembra molto pulito e semplice per me, e anche farlo utilizzando il Visual Studio approccio di trascinamento e rilascio di widget per generare codice Ho l'impressione che ci debba essere una soluzione più semplice e più pulita di quello che sto facendo.

Quindi la mia domanda è: c'è una soluzione più semplice per scrivere i layout XAML per ogni orientamento o sto andando a destra, ma in modo difficile?

Grazie!

Answer 1

Un modo per gestire diversi orientamenti è creare due elementi Grid con i loro bambini all'interno e modificare le visibilità delle Griglie in base all'orientamento.

per rilevare i cambiamenti di orientamento, è anche possibile utilizzare il sensore SimpleOrientation come il codice qui sotto:

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

    } 

O il modo più semplice è quello di gestire l'evento SizeChanged come il codice qui sotto:

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

} 

Spero che questo aiuta!

Answer 2

Esdras - non ti sbagli, probabilmente dovrebbe esserci un modo più semplice ma l'unica altra opzione è il software Expression Blend. E concederò che c'è una curva di apprendimento per alzarsi e correre.

Anche per le modifiche di orientamento scritte in Xaml, il controllo genitore deve guidare da un controllo che può essere esteso (non sigillato internamente) e deve essere a conoscenza del layout. Quindi, ad esempio, se metti una casella di testo in una pagina sensibile al layout, il suo orientamento cambierà, ma se metti una griglia nella pagina di visualizzazione del layout e una casella di testo nella griglia ... Il comportamento predefinito è che la griglia risponderà ma il la casella di testo non lo farà.

Si può anche notare che anche se è disordinato e ogni controllo ha bisogno di un modificatore di controllo come si è fornito per ogni elemento che dovrebbe rispondere al cambiamento di orientamento ... Il vantaggio è che non richiede alcun codice nativo per definire lo stato o la transizione e così i progettisti sono in grado di utilizzare l'aspetto xml allo stesso modo chiamato xaml per descrivere i cambiamenti nella vista sia che si tratti di orientamento o stati di altri controlli.

Se riesci a mettere le mani sul programma Expression Blend è stato realizzato per questo scopo.

Answer 3

Ho scritto un post su StackOverflow qualche volta indietro, che potrebbe essere utile per voi. Fornito con qualche esempio e il codice:

[Orientamento Gestione su Windows 8 apps] [1] Handling Orientation in Windows 8.1 Store app

Messaggio me, se avete più problemi.

Grazie, Ambuj