loading experience

.NET MAUI

CollectionView in .NET MAUI: liste veloci e flessibili

Il controllo da usare per qualsiasi elenco: layout a lista o griglia, selezione, raggruppamento e caricamento progressivo.

CollectionView in .NET MAUI: liste veloci e flessibili

Con la deprecazione di ListView in .NET 10, CollectionView è il controllo per mostrare elenchi di dati. È più flessibile e più efficiente, perché ricicla le celle durante lo scorrimento.

Si caricano solo i dati che l'utente sta per vedere.
Si caricano solo i dati che l'utente sta per vedere.

Una lista con modello per gli elementi

<CollectionView ItemsSource="{Binding Prodotti}"
                SelectionMode="Single"
                SelectionChangedCommand="{Binding ApriCommand}"
                SelectionChangedCommandParameter="{Binding SelectedItem, Source={RelativeSource Self}}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:Prodotto">
            <Grid Padding="12" ColumnDefinitions="*,Auto">
                <Label Text="{Binding Nome}" FontAttributes="Bold" />
                <Label Grid.Column="1" Text="{Binding Prezzo, StringFormat='{0:C}'}" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
    <CollectionView.EmptyView>
        <Label Text="Nessun prodotto trovato" HorizontalOptions="Center" />
    </CollectionView.EmptyView>
</CollectionView>

Griglia invece di lista

<CollectionView.ItemsLayout>
    <GridItemsLayout Orientation="Vertical" Span="2" HorizontalItemSpacing="8" VerticalItemSpacing="8" />
</CollectionView.ItemsLayout>

Caricamento progressivo

Per elenchi lunghi si caricano i dati a pagine quando l'utente si avvicina alla fine:

<CollectionView ItemsSource="{Binding Prodotti}"
                RemainingItemsThreshold="5"
                RemainingItemsThresholdReachedCommand="{Binding CaricaAltriCommand}" />

Consigli per le prestazioni

  • Usa ObservableCollection e aggiungi elementi invece di sostituire tutta la collezione.
  • Mantieni i modelli delle celle semplici: pochi livelli di layout annidati.
  • Imposta x:DataType nei DataTemplate per i binding compilati.
  • Ridimensiona le immagini lato server: caricare foto enormi in una lista è il modo più rapido per rallentarla.
Commenti (0)

Nessun commento ancora.

Lascia un commento