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
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Specificare il versioning nel path degli URL in ASP.NET Web API
Copiare automaticamente le secret tra più repository di GitHub
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Configurare policy CORS in Azure Container Apps
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Eseguire le GitHub Actions offline
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Monitorare i server on-premises con Azure Arc
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP