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
Eseguire operazioni con timeout in React
Utilizzare la session affinity con Azure Container Apps
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Miglioramenti nell'accessibilità con Angular CDK
Usare le variabili per personalizzare gli stili CSS
Hosting di componenti WebAssembly in un'applicazione Blazor static
Utilizzare gli snapshot con Azure File shares
Usare il versioning con i controller di ASP.NET Core Web API
Utilizzare Tailwind CSS all'interno di React: primi componenti
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Generare token per autenicarsi sulle API di GitHub