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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Limitare le richieste lato server con l'interactive routing di Blazor 8
Copiare automaticamente le secret tra più repository di GitHub
Creare un'applicazione React e configurare Tailwind CSS
Eseguire attività basate su eventi con Azure Container Jobs
Le novità di Angular: i miglioramenti alla CLI
Evitare la script injection nelle GitHub Actions
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Generare file PDF da Blazor WebAssembly con iText
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
Creare alias per tipi generici e tuple in C#
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet