Xamarin.Forms CollectionView Data

Stažení ukázky

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

• _ItemsView_ItemsSource" data-linktype="absolute-path">typu určuje kolekci položek, které se mají ItemsSourceIEnumerable zobrazit, a null má výchozí hodnotu .
• Xamarin_Forms _ItemsView_ItemTemplate" data-linktype="absolute-path">typu určuje šablonu, která se má použít pro každou položku v kolekci položek, ItemTemplate které se mají DataTemplate zobrazit.

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

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

Naplnění objektu CollectionView daty

Objekt se naplní daty nastavením vlastnosti CollectionView Xamarin_Forms CollectionView _ItemsView_ItemsSource" data-linktype="absolute-path">ItemsSource na IEnumerable libovolnou kolekci, která implementuje . Ve výchozím nastavení CollectionView zobrazuje položky ve svislém seznamu.

CollectionViewlze naplnit daty pomocí datové vazby k vytvoření vazby Xamarin_Forms CollectionView _ItemsView_ItemsSource" data-linktype="absolute-path">vlastnost s ItemsSourceIEnumerable kolekcí. V jazyce 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 se Xamarin_Forms _ItemsView_ItemsSource" data-linktype="absolute-path">data vlastnosti váže na vlastnost ItemsSourceMonkeys připojeného modelu viewmodel.

Informace o tom, jak změnit CollectionView rozložení, najdete v tématu Xamarin.Forms CollectionView Layout . Informace o tom, jak definovat vzhled jednotlivých položek v , najdete v CollectionView tématu CollectionView. Další informace o datové vazbě najdete v tématu Xamarin.Forms Data Binding .

Definování vzhledu položky

Vzhled každé položky v objektu lze definovat nastavením vlastnosti CollectionView Xamarin_Forms CollectionView _ItemsView_ItemTemplate" data-linktype="absolute-path">CollectionView.ItemTemplate 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 definují DataTemplate vzhled každé položky v seznamu. V tomto příkladu je rozložení DataTemplate v rámci spravované objektem Grid . objekt obsahuje objekt a GridImage dva Label objekty, které jsou všechny svázání s vlastnostmi 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:

obrazovky s objektem CollectionView, kde je každá položka nastavená podle šablony, va Android

Další informace o šablonách dat najdete v tématu Xamarin.Forms Data Templates .

Volba vzhledu položky za běhu

Vzhled každé položky v objektu lze zvolit za běhu na základě hodnoty položky nastavením vlastnosti CollectionView Xamarin_Forms CollectionView _ItemsView_ItemTemplate" data-linktype="absolute-path">na CollectionView.ItemTemplateDataTemplateSelector 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 Xamarin_Forms _ItemsView_ItemTemplate data-linktype="absolute-path">ItemTemplate je nastavená na MonkeyDataTemplateSelector 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 vlastnosti a , které jsou AmericanMonkeyOtherMonkeyDataTemplate nastaveny na různé datové šablony. Přepsání vrátí šablonu, která zobrazí název a umístění v teal, pokud název opéka obsahuje OnSelectTemplateAmericanMonkey "Ameriku". Pokud název šmídy neobsahuje "Ameriku", přepsání vrátí šablonu, která zobrazí název a umístění této náušnice OnSelectTemplateOtherMonkey ve silver:

Výběr šablony položky modulu runtime Snímek obrazovky s výběrem šablony položky modulu runtimea Androidu – výběr šablony položky modulu runtime v objektu

Další informace o selektorech datových šablon najdete v tématu Create a Xamarin.Forms DataTemplateSelector .

Místní nabídky

CollectionView podporuje místní nabídky pro položky dat prostřednictvím , která zobrazí místní nabídku SwipeView gestem potažení. je ovládací prvek kontejneru, který zalamuje položku obsahu a poskytuje položky místní nabídky SwipeView pro tuto položku obsahu. Proto se kontextové nabídky pro implementují vytvořením objektu , který definuje obsah, který se zalamuje, a položek místní nabídky, které jsou odhaleny gestem CollectionViewSwipeViewSwipeView potažení. Toho se dosáhne nastavením jako kořenového zobrazení v , které definuje vzhled každé položky SwipeViewDataTemplate 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 je obsah , který definuje SwipeView vzhled každé položky v GridCollectionView . Položky potažení se používají k provádění akcí s obsahem a jsou odhaleny, když je ovládací prvek SwipeView potažením prstem z levé strany:

Snímek obrazovky s položkami místní nabídkya AndroiduZobrazování s položkami

SwipeView podporuje čtyři různé směry potažení, kdy směr potažení je definovaný směrovou kolekcí, SwipeItems do SwipeItems které jsou objekty přidány. Ve výchozím nastavení se položka potažením spustí, když na něj uživatel zamíří klep. Po spuštění položky potažení jsou položky potažení skryté a SwipeView obsah se znovu zobrazí. Toto chování však lze změnit.

Další informace o ovládacím SwipeView prvku najdete v tématu Xamarin.Forms SwipeView .

Aktualizace tažením

CollectionView podporuje aktualizaci funkce pull prostřednictvím , která umožňuje aktualizaci zobrazených dat stažením RefreshView seznamu položek. je ovládací prvek kontejneru, který poskytuje funkci vyžádané aktualizace podřízenému prvku za předpokladu, že podřízený prvek RefreshView podporuje posouvatelný obsah. Proto se aktualizace přitažení pro implementuje CollectionView tak, že se nastaví jako podřízený objekt 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, spustí se definice definovaná vlastností , která by ICommandCommand měla aktualizovat zobrazené položky. Během aktualizace se zobrazí vizualizace aktualizace, která se skládá z animovaného kruhu průběhu:

Snímek obrazovky s kolekcíZobrazení aktualizace tažením va AndroiduZobrazení tažením

Hodnota vlastnosti RefreshView.IsRefreshing označuje aktuální stav RefreshView objektu . Když uživatel aktivuje aktualizaci, tato vlastnost se automaticky přechází na true . Po dokončení aktualizace byste měli vlastnost resetovat na false .

Další informace o najdete RefreshView v tématu Xamarin.Forms RefreshView .

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

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

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

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

CollectionView také definuje událost, která se aktivuje, když se posune dostatečně RemainingItemsThresholdReachedCollectionView daleko, že RemainingItemsThreshold se nezobrazují položky. Tato událost se může zpracovat pro načtení dalších položek. Kromě toho se při aktivaci události spustí objekt , který umožňuje provádět přírůstkové načítání dat RemainingItemsThresholdReachedRemainingItemsThresholdReachedCommand v modelu viewmodel.

Výchozí hodnota vlastnosti je RemainingItemsThreshold -1, což znamená, že RemainingItemsThresholdReached událost se nikdy neshodí. Pokud je hodnota vlastnosti 0, událost se bude aktivovat při zobrazení poslední položky v RemainingItemsThresholdReached Xamarin_Forms RemainingItemsThresholdReached _ItemsView_ItemsSource" data-linktype="absolute-path">. ItemsSource Pro hodnoty větší než 0 se událost aktivuje, když objekt obsahuje tento počet položek, na které se RemainingItemsThresholdReachedItemsSource ještě neposouvání.

Následující příklad XAML ukazuje , CollectionView který přírůstkově načítá data:

<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 událost spustí, když se ještě posune 5 položek a v odpovědi spustí RemainingItemsThresholdReached obslužnou OnCollectionViewRemainingItemsThresholdReached rutinu události:

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

Související odkazy

• CollectionView (ukázka)
• Xamarin.Forms RefreshView
• Xamarin.Forms SwipeView
• Xamarin.Forms Data Binding
• Xamarin.Forms Data Templates
• Create a Xamarin.Forms DataTemplateSelector