Nonostante l'enorme quantità di device in commercio, troviamo una caratteristica che li accomuna tutti: lo spazio non è mai abbastanza. Le informazioni da visualizzare sono sempre molte di più dello spazio disponibile a schermo, devono essere rappresentate con un layout user-friendly, chiaro e capibile. Occorre quindi riuscire a compartimentare le informazioni e mostrare solo le principali, per poi dare all'utente la possibilità di entrare nello specifico.
A questo scopo possiamo utilizzare il nuovo componente Expander che, essendo un elemento sperimentale, occorre abilitare il flag all'interno della classe App:
Device.SetFlags(new string[]{ "Expander_Experimental" });
Nell'expander, oltre al contenuto, abbiamo la possibilità di impostare un Header, che sarà la parte del componente sempre visibile all'interno dell'interfaccia:
<Expander> <Expander.Header> <Label Text="Componente expander"/> </Expander.Header> <Grid Padding="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Label Text="Colonna 0" /> <Label Grid.Column="1" Text="Colonna 1" /> </Grid> </Expander>
Questo approccio fa si che il contenuto venga inserito in pagina immediatamente durante il caricamento della stessa. Viceversa, se utilizzassimo proprietà in binding, ed inserissimo il layout all'interno di un ContentTemplate, il layout verrà caricato in pagina solo al momento dell'apertura del controllo.
Per rendere l'utente a conoscenza del contenuto espandibile è possibile inserire all'interno dell'header una immagine, la cui source si baserà sulla proprietà IsExpanded del controllo:
<Expander.Header> <Grid> <Label Text="{Binding Title}" /> <Image Source="expand.png" HorizontalOptions="End" VerticalOptions="Start"> <Image.Triggers> <DataTrigger TargetType="Image" Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}" Value="True"> <Setter Property="Source" Value="collapse.png" /> </DataTrigger> </Image.Triggers> </Image> </Grid> </Expander.Header>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire dati sensibili nella configurazione in ASP.NET Core
Taggare automaticamente un repository con un workflow di GitHub
Utilizzare la cancellazione logica in Azure Container Registry
Usare gateway dedicati con Azure Cosmos DB per migliorare le prestazioni
Creare velocemente microservice grazie a minimal API di ASP.NET Core 6
Creare automaticamente una pipeline YAML da una sua definizione in Azure DevOps
Le novità di .NET 7 e C# 11
Utilizzare le Promise in Javascript - prima parte
Le novità di .NET 7 e C# 11
Autenticazione basata su certificati con ASP.NET Core
Miglioramenti alla leggibilità delle Media Query con le specifiche di livello 4
Test reporting in un workflow di GitHub
I più letti di oggi
- Abilitare automaticamente Dependabot in tutti i repository di una organizzazione su GitHub
- Creare attributi generici in C#
- Montare blob e file share su Azure App Service
- Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
- Velocity arriva alla CTP3