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
Catturare la telemetria degli eventi di output cache in ASP.NET Core
Verificare la provenienza di un commit tramite le GitHub Actions
Gestione degli environment per il deploy con un workflow di GitHub
Eseguire una GroupBy per entity in Entity Framework
Creare gruppi di client per Event Grid MQTT
Reactive form tipizzati con modellazione del FormBuilder in Angular
Utilizzare gli snapshot con Azure File shares
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Evitare la script injection nelle GitHub Actions
Implementare il throttling in ASP.NET Core
Evitare il flickering dei componenti nel prerender di Blazor 8