Se si parla di applicazioni da contenuti ingegneristici, oppure di LOB in cui sono presenti grandi quantità di dati, oppure di liste in genere, può far comodo nascondere i dettagli che non ci riguardano per impostare il focus solo sui contenuti che contano. Abbiamo già affrontato qualcosa di simile in uno script precedente parlando dell'effetto Fade, ma in questo caso specifico, l'operazione è nascondere il contenuto, dopo aver applicato l'effetto Fade.
Nella Universal Windows Platform non esiste un controllo nativo che permetta di espandere o collassare delle porzioni di interfaccia grafica, sarebbe tutto da costruire in modo personalizzato secondo le nostre esigenze: grazie al Windows Community Toolkit però, è disponibile l'oggetto Expander che si occupa proprio di questo. Per aggiungere questo effetto è sufficiente registrare il controllo nello XAML:
<controls:Expander Header="Header of the expander" Foreground="White" Background="Gray" IsExpanded="True"> <Grid Height="250"> <TextBlock HorizontalAlignment="Center" Text="Questo è il contenuto" VerticalAlignment="Center" /> </Grid> <controls:Expander.ContentOverlay> <Grid MinHeight="250"> <TextBlock Text="Collapsed content" /> </Grid> </controls:Expander.ContentOverlay> </controls:Expander>
Seguendo l'esempio, abbiamo realizzato un contenuto che è visibile solamente quando viene reso visibile dal click dell'utente, mentre l'overlay mostra il contenuto solo quando l'elemento è collassato. Tramite la proprietà ExpandDirection si può anche specificare la modalità di espansione, ma di default è impostata dall'alto verso il basso. Il risultato dell'esempio sarà simile al seguente:
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Installare le Web App site extension tramite una pipeline di Azure DevOps
Gestire undefined e partial nelle reactive forms di Angular
Utilizzare la session affinity con Azure Container Apps
Sfruttare al massimo i topic space di Event Grid MQTT
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Utilizzare i primary constructor in C#
Utilizzare politiche di resiliency con Azure Container App
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Paginare i risultati con QuickGrid in Blazor
- Ottimizzazione dei block template in Angular 17