Xamarin.Forms CollectionView Data

Download Sample Stažení ukázky

CollectionView obsahuje následující vlastnosti, které definují data, která se mají zobrazit, a jeho vzhled:

  • ItemsSource, typu IEnumerable, určuje kolekci položek, které se mají zobrazit, a má výchozí hodnotu .null
  • ItemTemplate, typu DataTemplate, určuje šablonu, která se má použít pro každou položku v kolekci položek, které se mají zobrazit.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že vlastnosti mohou být cíle datových vazeb.

Poznámka

CollectionViewItemsUpdatingScrollMode definuje vlastnost, která představuje chování CollectionView posouvání při přidání nových položek do ní. Další informace o této vlastnosti naleznete v tématu Řízení pozice posouvání při přidání nových položek.

CollectionView podporuje přírůstkovou virtualizaci dat při posouvání uživatelů. Další informace najdete v tématu Přírůstkové načítání dat.

Naplnění objektu CollectionView daty

A CollectionView se naplní daty nastavením jeho ItemsSource vlastnosti na libovolnou kolekci, která implementuje IEnumerable. Ve výchozím nastavení CollectionView se zobrazují položky ve svislém seznamu.

Důležité

CollectionView Pokud je nutné aktualizovat položky při přidávání, odebírání nebo změnách v podkladové kolekci, měla by podkladová kolekce být IEnumerable kolekce, která odesílá oznámení o změnách vlastností, například ObservableCollection.

CollectionView data lze naplnit daty pomocí datové vazby k vytvoření vazby jeho ItemsSource vlastnosti k kolekci IEnumerable . V XAML se toho dosahuje pomocí Binding rozšíření značek:

<CollectionView ItemsSource="{Binding Monkeys}" />

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

V tomto příkladu ItemsSource jsou data vlastnosti svázaná s Monkeys vlastností propojeného modelu zobrazení.

Poznámka

Kompilované vazby je možné povolit ke zlepšení výkonu datových vazeb v Xamarin.Forms aplikacích. Další informace najdete v tématu Kompilované vazby.

Informace o tom, jak změnit CollectionView rozložení, najdete v tématu Xamarin.Forms Rozložení CollectionView. Informace o tom, jak definovat vzhled každé položky v části CollectionView, viz Definice vzhledu položky. Další informace o datové vazbě najdete v tématu Xamarin.Forms Datová vazba.

Upozornění

CollectionView vyvolá výjimku, pokud ItemsSource se aktualizuje mimo vlákno uživatelského rozhraní.

Definování vzhledu položky

Vzhled každé položky v objektu CollectionView lze definovat nastavením CollectionView.ItemTemplate vlastnosti na :DataTemplate

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
    ...
</CollectionView>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

collectionView.ItemTemplate = new DataTemplate(() =>
{
    Grid grid = new Grid { Padding = 10 };
    grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });

    Image image = new Image { Aspect = Aspect.AspectFill, HeightRequest = 60, WidthRequest = 60 };
    image.SetBinding(Image.SourceProperty, "ImageUrl");

    Label nameLabel = new Label { FontAttributes = FontAttributes.Bold };
    nameLabel.SetBinding(Label.TextProperty, "Name");

    Label locationLabel = new Label { FontAttributes = FontAttributes.Italic, VerticalOptions = LayoutOptions.End };
    locationLabel.SetBinding(Label.TextProperty, "Location");

    Grid.SetRowSpan(image, 2);

    grid.Children.Add(image);
    grid.Children.Add(nameLabel, 1, 0);
    grid.Children.Add(locationLabel, 1, 1);

    return grid;
});

Prvky zadané v definici DataTemplate vzhledu každé položky v seznamu. V příkladu je rozložení uvnitř spravované DataTemplate pomocí Grid. Obsahuje GridImage objekt a dva Label objekty, které všechny vazby k vlastnostem Monkey třídy:

public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string Details { get; set; }
    public string ImageUrl { get; set; }
}

Následující snímky obrazovky ukazují výsledek šablonování jednotlivých položek v seznamu:

Screenshot of CollectionView where each item is templated, on iOS and Android

Další informace o datových šablonách najdete v tématu Xamarin.Forms Šablony dat.

Volba vzhledu položky za běhu

Vzhled každé položky v modulu CollectionView runtime lze zvolit na základě hodnoty položky nastavením CollectionView.ItemTemplate vlastnosti na DataTemplateSelector objekt:

<ContentPage ...
             xmlns:controls="clr-namespace:CollectionViewDemos.Controls">
    <ContentPage.Resources>
        <DataTemplate x:Key="AmericanMonkeyTemplate">
            ...
        </DataTemplate>

        <DataTemplate x:Key="OtherMonkeyTemplate">
            ...
        </DataTemplate>

        <controls:MonkeyDataTemplateSelector x:Key="MonkeySelector"
                                             AmericanMonkey="{StaticResource AmericanMonkeyTemplate}"
                                             OtherMonkey="{StaticResource OtherMonkeyTemplate}" />
    </ContentPage.Resources>

    <CollectionView ItemsSource="{Binding Monkeys}"
                    ItemTemplate="{StaticResource MonkeySelector}" />
</ContentPage>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    ItemTemplate = new MonkeyDataTemplateSelector { ... }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Vlastnost ItemTemplate je nastavena MonkeyDataTemplateSelector na objekt. Následující příklad ukazuje MonkeyDataTemplateSelector třídu:

public class MonkeyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate AmericanMonkey { get; set; }
    public DataTemplate OtherMonkey { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((Monkey)item).Location.Contains("America") ? AmericanMonkey : OtherMonkey;
    }
}

Třída MonkeyDataTemplateSelector definuje AmericanMonkey a OtherMonkeyDataTemplate vlastnosti, které jsou nastavené na různé šablony dat. Přepsání OnSelectTemplate vrátí AmericanMonkey šablonu, která zobrazuje název opice a umístění v tealu, když název opice obsahuje "Amerika". Pokud název opice neobsahuje "Amerika", OnSelectTemplate vrátí OtherMonkey přepsání šablonu, která zobrazí název opice a umístění ve stříbrě:

Screenshot of CollectionView runtime item template selection, on iOS and Android

Další informace o selektorech šablon dat najdete v tématu Vytvoření Xamarin.Forms prvku DataTemplateSelector.

Důležité

Při použití CollectionViewnikdy nenastavujte kořenový prvek objektů DataTemplate na ViewCellhodnotu . Výsledkem bude vyvolání výjimky, protože CollectionView nemá žádný koncept buněk.

Místní nabídky

CollectionView podporuje místní nabídky pro položky dat prostřednictvím SwipeView, která odhalí místní nabídku gestem potáhnutí prstem. Jedná se SwipeView o ovládací prvek kontejneru, který obtéká kolem položky obsahu a poskytuje položky místní nabídky pro danou položku obsahu. Kontextové nabídky se proto implementují tak CollectionView , že vytvoří SwipeView obsah, který definuje obsah, který SwipeView se obtéká kolem, a položky místní nabídky, které jsou odhaleny gestem potáhnutí prstem. Toho dosáhnete nastavením SwipeView jako kořenového zobrazení v DataTemplate zobrazení, které definuje vzhled každé položky dat v :CollectionView

<CollectionView x:Name="collectionView"
                ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <SwipeView>
                <SwipeView.LeftItems>
                    <SwipeItems>
                        <SwipeItem Text="Favorite"
                                   IconImageSource="favorite.png"
                                   BackgroundColor="LightGreen"
                                   Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.FavoriteCommand}"
                                   CommandParameter="{Binding}" />
                        <SwipeItem Text="Delete"
                                   IconImageSource="delete.png"
                                   BackgroundColor="LightPink"
                                   Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.DeleteCommand}"
                                   CommandParameter="{Binding}" />
                    </SwipeItems>
                </SwipeView.LeftItems>
                <Grid BackgroundColor="White"
                      Padding="10">
                    <!-- Define item appearance -->
                </Grid>
            </SwipeView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

collectionView.ItemTemplate = new DataTemplate(() =>
{
    // Define item appearance
    Grid grid = new Grid { Padding = 10, BackgroundColor = Color.White };
    // ...

    SwipeView swipeView = new SwipeView();
    SwipeItem favoriteSwipeItem = new SwipeItem
    {
        Text = "Favorite",
        IconImageSource = "favorite.png",
        BackgroundColor = Color.LightGreen
    };
    favoriteSwipeItem.SetBinding(MenuItem.CommandProperty, new Binding("BindingContext.FavoriteCommand", source: collectionView));
    favoriteSwipeItem.SetBinding(MenuItem.CommandParameterProperty, ".");

    SwipeItem deleteSwipeItem = new SwipeItem
    {
        Text = "Delete",
        IconImageSource = "delete.png",
        BackgroundColor = Color.LightPink
    };
    deleteSwipeItem.SetBinding(MenuItem.CommandProperty, new Binding("BindingContext.DeleteCommand", source: collectionView));
    deleteSwipeItem.SetBinding(MenuItem.CommandParameterProperty, ".");

    swipeView.LeftItems = new SwipeItems { favoriteSwipeItem, deleteSwipeItem };
    swipeView.Content = grid;    
    return swipeView;
});

V tomto příkladu SwipeView je Grid obsah, který definuje vzhled každé položky v souboru CollectionView. Položky potáhnutí prstem slouží k provádění akcí v SwipeView obsahu a zobrazí se, když je ovládací prvek potáhnutím prstem z levé strany:

Screenshot of CollectionView context menu items, on iOS and Android

SwipeView podporuje čtyři různé směry potáhnutí, přičemž směr potáhnutí určuje směrová SwipeItems kolekce SwipeItems objektů, do které se objekty přidají. Ve výchozím nastavení se po klepnutí uživatelem spustí položka potáhnutí prstem. Kromě toho po spuštění položky potáhnutí prstem jsou položky potáhnutí skryté a SwipeView obsah se znovu zobrazí. Toto chování se ale dá změnit.

Další informace o ovládacím SwipeView prvku najdete v tématuXamarin.Forms Potáhnutí prstem.

Stažení změn k aktualizaci

CollectionView podporuje funkci aktualizace prostřednictvím RefreshViewfunkce , která umožňuje, aby se data zobrazovaná v seznamu položek aktualizovala. Jedná se RefreshView o ovládací prvek kontejneru, který poskytuje funkci aktualizace obsahu podřízenosti za předpokladu, že podřízený prvek podporuje posouvání obsahu. Proto se aktualizace přijetí změn implementuje CollectionView tak, že ji nastavíte jako podřízený prvek RefreshView:

<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}">
    <CollectionView ItemsSource="{Binding Animals}">
        ...
    </CollectionView>
</RefreshView>

Ekvivalentní kód jazyka C# je:

RefreshView refreshView = new RefreshView();
ICommand refreshCommand = new Command(() =>
{
    // IsRefreshing is true
    // Refresh data here
    refreshView.IsRefreshing = false;
});
refreshView.Command = refreshCommand;

CollectionView collectionView = new CollectionView();
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");
refreshView.Content = collectionView;
// ...

Když uživatel zahájí aktualizaci, ICommand spustí se definovaná Command vlastnost, která by měla aktualizovat zobrazené položky. Při aktualizaci se zobrazí vizualizace aktualizace, která se skládá z animovaného kruhu průběhu:

Screenshot of CollectionView pull-to-refresh, on iOS and Android

Hodnota RefreshView.IsRefreshing vlastnosti označuje aktuální stav objektu RefreshView. Při aktivaci aktualizace uživatelem se tato vlastnost automaticky převede na true. Po dokončení aktualizace byste měli vlastnost obnovit na false.

Další informace o RefreshViewnástroji Xamarin.Forms RefreshView

Přírůstkové načítání dat

CollectionView podporuje přírůstkovou virtualizaci dat při posouvání uživatelů. To umožňuje scénáře, jako je asynchronní načítání stránky dat z webové služby, jako je posouvání uživatelů. Kromě toho je bod, ve kterém je načteno více dat, konfigurovatelné tak, aby uživatelé neviděli prázdné místo nebo se přestali posouvat.

CollectionView definuje následující vlastnosti pro řízení přírůstkového načítání dat:

  • RemainingItemsThreshold, typu int, prahová hodnota položek, které ještě nejsou viditelné v seznamu, ve kterém RemainingItemsThresholdReached se událost aktivuje.
  • RemainingItemsThresholdReachedCommand, typu ICommand, který se spustí při RemainingItemsThreshold dosažení.
  • RemainingItemsThresholdReachedCommandParameter, typu object, což je parametr, který je předán do RemainingItemsThresholdReachedCommandsouboru .

CollectionView také definuje RemainingItemsThresholdReached událost, která se aktivuje, když CollectionView je posunován dostatečně daleko, že RemainingItemsThreshold položky nebyly zobrazeny. Tato událost se dá zpracovat a načíst další položky. Kromě toho, když RemainingItemsThresholdReached se událost aktivuje, spustí se RemainingItemsThresholdReachedCommand a umožní přírůstkové načítání dat probíhat v modelu zobrazení.

Výchozí hodnota RemainingItemsThreshold vlastnosti je -1, což znamená, že RemainingItemsThresholdReached událost se nikdy neaktivuje. Když je hodnota vlastnosti 0, událost se aktivuje, RemainingItemsThresholdReached když se zobrazí konečná položka v objektu ItemsSource . U hodnot větších než 0 se událost aktivuje, RemainingItemsThresholdReached když ItemsSource se tento počet položek ještě neposouvá.

Poznámka

CollectionViewRemainingItemsThreshold ověří vlastnost tak, aby její hodnota byla vždy větší nebo rovna -1.

Následující příklad XAML ukazuje CollectionView , že se data načítají přírůstkově:

<CollectionView ItemsSource="{Binding Animals}"
                RemainingItemsThreshold="5"
                RemainingItemsThresholdReached="OnCollectionViewRemainingItemsThresholdReached">
    ...
</CollectionView>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    RemainingItemsThreshold = 5
};
collectionView.RemainingItemsThresholdReached += OnCollectionViewRemainingItemsThresholdReached;
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Animals");

V tomto příkladu kódu se RemainingItemsThresholdReached událost aktivuje, když se ještě neposouvají 5 položek a v odpovědi se spustí OnCollectionViewRemainingItemsThresholdReached obslužná rutina události:

void OnCollectionViewRemainingItemsThresholdReached(object sender, EventArgs e)
{
    // Retrieve more data here and add it to the CollectionView's ItemsSource collection.
}

Poznámka

Data lze také načíst přírůstkově vazbou RemainingItemsThresholdReachedCommand na implementaci ICommand v modelu viewmodel.