Sviluppo di Windows 10: interfaccia utente adattiva

Un'applicazione UWP (Universal Windows Platform) può essere eseguita su molti dispositivi diversi e ogni dispositivo ha la propria forma di input, risoluzioni dello schermo, densità DPI e altre caratteristiche uniche.

In Windows 10, con l'aiuto di nuovi controlli universali, pannelli di layout e strumenti puoi adattare facilmente la tua interfaccia utente ai dispositivi su cui può essere eseguita l'applicazione. Ad esempio, quando la tua applicazione UWP è in esecuzione su un computer desktop, un dispositivo mobile o un tablet, puoi personalizzare l'interfaccia utente per sfruttare la diversa risoluzione dello schermo, dimensioni dello schermo e densità DPI.

In Windows 10, puoi facilmente indirizzare la tua interfaccia utente a più dispositivi con le seguenti funzionalità:

  • Puoi migliorare la tua interfaccia utente per diverse risoluzioni e dimensioni dello schermo utilizzando controlli universali e pannelli di layout.

  • La gestione comune dell'input consente di ricevere l'input tramite un touch pad, una penna, un mouse, una tastiera o un controller come un controller Xbox Microsoft.

  • Con l'aiuto di Strumenti, puoi progettare l'interfaccia utente dell'applicazione che può adattarsi a diverse risoluzioni dello schermo.

  • Il ridimensionamento adattivo si adatta alla risoluzione e alle differenze DPI tra i dispositivi.

In Windows 10, puoi facilmente organizzare, ridimensionare e posizionare le applicazioni nel modo che preferisci. Offre inoltre una sorta di flessibilità all'utente per utilizzare l'applicazione nel modo desiderato. In Windows 10, ci sono vari modi per implementare tecniche reattive nella tua applicazione UWP, quindi ha un aspetto fantastico indipendentemente dalle dimensioni dello schermo o della finestra.

VisualStateManager

In Windows 10, il VisualStateManagerclass ha due nuovi meccanismi con l'aiuto dei quali puoi implementare un design reattivo nelle tue applicazioni UWP. Il nuovoVisualState.StateTriggers consente allo sviluppatore di controllare determinate condizioni come l'altezza o la larghezza della finestra e quindi il file VisualState.Setters Le API definiscono gli stati visivi in ​​risposta a quelle determinate condizioni.

Diamo un'occhiata all'esempio fornito di seguito in cui alcuni controlli vengono aggiunti nel pannello dello stack.

<Page 
   x:Class = "UWPAdaptiveUI.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPAdaptiveUI" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <VisualStateManager.VisualStateGroups>
		
         <VisualStateGroup>
			
            <VisualState>
				
               <VisualState.StateTriggers>
                  <!-- VisualState to be triggered when window 
                     width is >=720 effective pixels. -->
                  <AdaptiveTrigger MinWindowWidth = "720" />
               </VisualState.StateTriggers>
					
               <VisualState.Setters>
                  <Setter Target = "myPanel.Orientation" Value = "Horizontal" />
               </VisualState.Setters>
					
            </VisualState>
				
         </VisualStateGroup>
			
      </VisualStateManager.VisualStateGroups>
		
      <StackPanel x:Name = "myPanel" Orientation = "Vertical">
		
         <TextBlock Text = "Windows 10 Tutorials: Text block 1. " 
            Style = "{ThemeResource BodyTextBlockStyle}"/>
				
         <TextBlock Text = "Windows 10 Tutorials: Text block 2. " 
            Style = "{ThemeResource BodyTextBlockStyle}"/>
				
         <TextBlock Text = "Windows 10 Tutorials: Text block 3. " 
            Style = "{ThemeResource BodyTextBlockStyle}"/>
				
      </StackPanel> 
		
   </Grid>
	
</Page>

Adesso VisualStateManager, regolerà l'orientamento del pannello sovrapposto in base alla larghezza della finestra. Se la larghezza è> = 720, l'orientamento diventerà orizzontale altrimenti rimarrà verticale. Quando il codice sopra è stato compilato ed eseguito, vedrai la seguente finestra, che contiene tre blocchi di testo in ordine verticale.

Ridimensioniamo la larghezza della finestra sopra e vedrai la seguente finestra:

Ora puoi vedere che i blocchi di testo sono in ordine orizzontale.

RelativePanel

RelativePanelpuò essere utilizzato per disporre gli elementi dell'interfaccia utente esprimendo le relazioni spaziali tra gli elementi. Facciamo un esempio in cui vengono creati dei rettangoli nel relativo pannello.

<Page 
   x:Class = "UWPAdaptiveUI.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPAdaptiveUI" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
	
      <VisualStateManager.VisualStateGroups> 
		
         <VisualStateGroup> 
			
            <VisualState> 
				
               <VisualState.StateTriggers> 
                  <AdaptiveTrigger MinWindowWidth = "720" /> 
               </VisualState.StateTriggers> 
					
               <VisualState.Setters> 
                  <Setter Target = "GreenRect.(RelativePanel.RightOf)"
                     Value = "BlueRect" /> 
                  <Setter Target = "GreenRect.(RelativePanel.AlignRightWithPanel)" 
                     Value = "True" /> 
               </VisualState.Setters> 
					
            </VisualState> 
				
         </VisualStateGroup>
			
      </VisualStateManager.VisualStateGroups>
		
      <RelativePanel BorderBrush = "Gray" BorderThickness = "10"> 
         <Rectangle x:Name = "RedRect" Fill = "Red" MinHeight = "100" 
            MinWidth = "100"/> 
				
         <Rectangle x:Name = "BlueRect" Fill = "Blue" MinHeight = "100" 
            MinWidth = "100" RelativePanel.RightOf = "RedRect" /> 
				
         <!-- Width is not set on the green and yellow rectangles. 
            It's determined by the RelativePanel properties. --> 
				
         <Rectangle x:Name = "GreenRect" Fill = "Green" MinHeight = "100" 
            RelativePanel.Below = "BlueRect" RelativePanel.AlignLeftWith = "RedRect" 
            RelativePanel.AlignRightWith = "BlueRect"/> 
				
         <Rectangle Fill = "Yellow" MinHeight = "100" RelativePanel.Below = "GreenRect" 
            RelativePanel.AlignLeftWith = "BlueRect"
            RelativePanel.AlignRightWithPanel = "True"/> 
				
      </RelativePanel> 
		
   </Grid> 
	
</Page>

Quando il codice sopra è stato compilato ed eseguito, vedrai la seguente finestra.

Quando ridimensionate la finestra sopra, vedrete che il rettangolo verde è ora regolato nella riga in alto a sinistra del rettangolo blu come mostrato di seguito.