Gestione responsive dei layout con il pannello RelativePanel in Windows 10

di Alessio Leoncini, in Windows 10,

Una delle caratteristiche più importanti delle Universal Windows app è che possono essere eseguite su tutti i device con Windows 10, anche con schermi di diverse risoluzioni o grandezze.
Per semplificare lo sviluppo di un'app, il cui frontend possa adattarsi automaticamente a tutti questi contesti, nella Universal Windows Platform (UWP) è stato introdotto un nuovo oggetto di tipo Panel: il RelativePanel.

Questo Panel permette il posizionamento relativo degli oggetti gli uni rispetto agli altri, esclusivamente attraverso Attached Properties, di seguito elencate:

  • RelativePanel.Above
  • RelativePanel.Below
  • RelativePanel.LeftOf
  • RelativePanel.RightOf

Oltre al posizionamento, ce ne sono anche per l'allineamento relativo:

  • RelativePanel.AlignTopWith
  • RelativePanel.AlignBottomWith
  • RelativePanel.AlignLeftWith
  • RelativePanel.AlighRightWith

Con tali proprietà possiamo dichiarare il nome dell'oggetto a cui l'attuale elemento interno al Panel deve posizionarsi o allinearsi, come possiamo vedere nel seguente snippet:

<RelativePanel BorderThickness="1,1,1,1"
         BorderBrush="Black">
  <Border x:Name="ThePurple"
      Width="200"
      Height="200"
      Background="Purple" />
  <Border x:Name="TheRed"
      Width="100"
      Height="100"
      Background="Red"
      RelativePanel.AlignVerticalCenterWith="ThePurple"
      RelativePanel.AlignHorizontalCenterWith="ThePurple" />
  <Border x:Name="TheBlue"
      Background="Blue"
      RelativePanel.RightOf="TheRed"
      RelativePanel.AlignVerticalCenterWith="TheRed"
      Height="100"
      Width="200" />
  <Border x:Name="TheGreen"
      Width="200"
      Background="Green"
      RelativePanel.AlignHorizontalCenterWith="ThePurple"
      RelativePanel.Below="ThePurple"
      Height="400" />
</RelativePanel>


Oltre al posizionamento e allineamento relativo degli oggetti interni, RelativePanel espone una serie di Attached Properties specifiche per l'allineamento degli oggetti rispetto al pannello stesso; nell'elenco di seguito vediamo queste proprietà, il loro valore di default e la corrispondente proprietà ereditata da FrameworkElement, ancora disponibile.

  • RelativePanel.AlignTopWithPanel: true (VerticalAlignment="Top")
  • RelativePanel.AlignBottomWithPanel: false (VerticalAlignment="Bottom")
  • RelativePanel.AlignHorizontalCenterWithPanel: false (HorizontalAlignment="Center")
  • RelativePanel.AlignVerticalCenterWithPanel: false (VerticalAlignment="Center")
  • RelativePanel.AlignLeftWithPanel: true (HorizontalAlignment="Left")
  • RelativePanel.AlignRightWithPanel: false (HorizontalAlignment="Right")

Tutte queste proprietà possono essere combinate per ottenere il layout desiderato, è importante considerare che queste sono applicate nel seguente ordine:

  • Allineamento relativo al Panel (es. AlignTopWithPanel)
  • Allineamento relativo (es. AlignTopWith)
  • Posizionamento relativo (es. LeftOf)

Nella realizzazione di frontend portabili, RelativePanel esprime il massimo della propria utilità insieme agli AdaptiveTrigger, con i quali possiamo cambiare facilmente le relazioni tra gli oggetti a seguito di determinate condizioni.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi