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
Utilizzare Model as a Service su Microsoft Azure
Generare file per il download da Blazor WebAssembly
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Utilizzare ChatGPT con Azure OpenAI
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Gestire domini wildcard in Azure Container Apps
.NET Conference Italia 2023
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Creare gruppi di client per Event Grid MQTT
Supportare il sorting di dati tabellari in Blazor con QuickGrid