Applicazioni come Facebook ci hanno abituato ad un comportamento molto utile che aiuta a guadagnare spazio quando la nostra applicazione fa un largo uso di liste, utilizzando un'header scrollable.
Con l'header scrollable, quando scrolliamo la nostra ListView verso il basso, l'header stessa viene nascosta, per poi mostrarla nuovamente in caso contrario.
Per aggiungere questo comportamento alla nostra applicazione dobbiamo aggiungere mediante NuGet il riferimento alla library Microsoft.Toolkit.Uwp.UI.Controls. Questa libreria che fa parte del UWP Community Toolkit, una serie di librerie gratuite prodotte dalla community di sviluppatori.
<ListView Name="myListView" ItemsSource="{x:Bind MySource, Mode=OneWay}"> <ListView.Header> <controls:ScrollHeader Mode="Sticky" TargetListViewBase="{x:Bind myListView }"> <TextBlock Text="Header" /> </controls:ScrollHeader> </ListView.Header> </ListView>
L'utilizzo è semplice: l'importante è impostare la proprietà TargetListViewBase che di fatto associa l'header alla ListView, dandole questo nuovo comportamento.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare il colore CSS per migliorare lo stile della pagina
La gestione della riconnessione al server di Blazor in .NET 9
Ottimizzare le performance usando Span<T> e il metodo Split
Configurare lo startup di applicazioni server e client con .NET Aspire
Sfruttare GPT-4o realtime su Azure Open AI per conversazioni vocali
Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
Scrivere selettori CSS più semplici ed efficienti con :is()
Gestione degli eventi nei Web component HTML
Creare una libreria CSS universale: i bottoni
Introduzione ai web component HTML
Rendere le variabili read-only in una pipeline di Azure DevOps
Utilizzare il metodo ExceptBy per eseguire operazione di sottrazione tra liste