Xamarin.Forms CollectionView Data

Descarga del ejemplo

CollectionView incluye las siguientes propiedades que definen los datos que se mostrarán y su apariencia:

• _ItemsView_ItemsSource" data-linktype="absolute-path">ItemsSource , IEnumerable de tipo , especifica la colección de elementos que se va a mostrar y tiene un valor predeterminado de null .
• Xamarin_Forms _ItemsView_ItemTemplate" data-linktype="absolute-path">, de tipo , especifica la plantilla que se va a aplicar a cada elemento de la colección de elementos que se va a ItemTemplateDataTemplate mostrar.

Estas propiedades están copiadas por objetos , lo que significa que las BindableProperty propiedades pueden ser destinos de enlaces de datos.

CollectionView admite la virtualización incremental de datos a medida que el usuario se desplaza. Para obtener más información, vea Cargar datos de forma incremental.

Rellenar collectionview con datos

Se rellena con datos estableciendo su propiedad CollectionView Xamarin_Forms CollectionView _ItemsView_ItemsSource" data-linktype="absolute-path">en cualquier colección que ItemsSource implemente IEnumerable . De forma predeterminada, CollectionView muestra los elementos de una lista vertical.

CollectionViewse puede rellenar con datos mediante el enlace de datos para enlazar su propiedad Xamarin_Forms CollectionView _ItemsView_ItemsSource" data-linktype="absolute-path">a una ItemsSourceIEnumerable colección. En XAML, esto se consigue con la extensión Binding de marcado:

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

El código de C# equivalente es el siguiente:

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

En este ejemplo, los datos de Xamarin_Forms _ItemsView_ItemsSource" data-linktype="absolute-path">enlazan a la propiedad del modelo ItemsSource de vista Monkeys conectado.

Para obtener información sobre cómo cambiar el CollectionView diseño, vea Xamarin.Forms CollectionView Layout . Para obtener información sobre cómo definir la apariencia de cada elemento en CollectionView , vea Definir la apariencia del CollectionView. Para obtener más información sobre el enlace de datos, vea Xamarin.Forms Data Binding .

Definición de la apariencia del elemento

La apariencia de cada elemento de se puede definir estableciendo la propiedad CollectionView Xamarin_Forms CollectionView _ItemsView_ItemTemplate" data-linktype="absolute-path">CollectionView.ItemTemplate en 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>

El código de C# equivalente es el siguiente:

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;
});

Los elementos especificados en definen DataTemplate la apariencia de cada elemento de la lista. En el ejemplo, el diseño dentro DataTemplate de se administra mediante un Grid . contiene Grid un objeto y dos objetos que se ImageLabel enlazan a las propiedades de la clase Monkey :

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

En las capturas de pantalla siguientes se muestra el resultado de templar cada elemento de la lista:

pantalla CollectionView de CollectionView donde cada elemento tiene plantilla, en elementos con plantilla dey Android

Para obtener más información sobre las plantillas de datos, vea Xamarin.Forms Data Templates .

Elección de la apariencia del elemento en tiempo de ejecución

La apariencia de cada elemento de se puede elegir en tiempo de ejecución, en función del valor del elemento, estableciendo la propiedad CollectionView Xamarin_Forms CollectionView _ItemsView_ItemTemplate" data-linktype="absolute-path">CollectionView.ItemTemplate en un objeto DataTemplateSelector :

<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>

El código de C# equivalente es el siguiente:

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

La Xamarin_Forms _ItemsView_ItemTemplate" data-linktype="absolute-path">propiedad se ItemTemplate establece en un MonkeyDataTemplateSelector objeto . En el ejemplo siguiente se muestra la MonkeyDataTemplateSelector clase :

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;
    }
}

La MonkeyDataTemplateSelector clase define las propiedades y que se establecen en plantillas de datos AmericanMonkeyOtherMonkeyDataTemplate diferentes. La invalidación devuelve la plantilla, que muestra el nombre del mono y la ubicación en teal, cuando el nombre del mono OnSelectTemplateAmericanMonkey contiene "America". Cuando el nombre del mono no contiene "America", la invalidación devuelve la plantilla, que muestra el nombre y la ubicación del mono OnSelectTemplateOtherMonkey en color silver:

en una captura de pantalla de CollectionView de selección de plantilla de elemento en tiempo de ejecución deen iOS y Android Runtime item template selection in a

Para obtener más información sobre los selectores de plantillas de datos, vea Create a Xamarin.Forms DataTemplateSelector .

Menús contextuales

CollectionView admite menús contextuales para elementos de datos a través de , que SwipeView revela el menú contextual con un gesto de deslizar el dedo. es un control de contenedor que se ajusta alrededor de un elemento de contenido y proporciona elementos SwipeView de menú contextual para ese elemento de contenido. Por lo tanto, los menús contextuales se implementan para un mediante la creación de un que define el contenido que encapsula y los elementos de menú contextual que se revelan mediante el gesto de deslizar CollectionViewSwipeView el SwipeView dedo. Esto se consigue estableciendo como la vista raíz en que define la apariencia de SwipeView cada elemento de datos en DataTemplateCollectionView :

<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>

El código de C# equivalente es el siguiente:

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;
});

En este ejemplo, el SwipeView contenido es un que define la apariencia de cada elemento de GridCollectionView . Los elementos de deslizar rápidamente se usan para realizar acciones en el contenido y se revelan cuando el control se desliza SwipeView desde el lado izquierdo:

Captura de pantalla de elementos de menú contextualen iOS y Android

SwipeView admite cuatro direcciones de deslizamiento diferentes, con la dirección de deslizamiento definida por la colección direccional a la que se SwipeItemsSwipeItems agregan los objetos. De forma predeterminada, se ejecuta un elemento de deslizar el dedo cuando el usuario lo pulsa. Además, una vez que se ha ejecutado un elemento de deslizar el dedo, los elementos de deslizamiento se ocultan y se vuelve a SwipeView mostrar el contenido. Sin embargo, estos comportamientos se pueden cambiar.

Para obtener más información sobre el SwipeView control , vea Xamarin.Forms SwipeView .

Extraer para actualizar

CollectionView admite la funcionalidad de extracción para actualizar a través de , que permite actualizar los datos que se muestran al extraer de la RefreshView lista de elementos. es un control de contenedor que proporciona la funcionalidad de extracción para actualizar a su elemento secundario, siempre que RefreshView el elemento secundario admita contenido desplazable. Por lo tanto, la extracción para actualizar se implementa para un CollectionView estableciendo como el elemento secundario de RefreshView :

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

El código de C# equivalente es el siguiente:

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;
// ...

Cuando el usuario inicia una actualización, se ejecuta el definido por la propiedad , que debe ICommand actualizar los elementos que se Command muestran. Se muestra una visualización de actualización mientras se produce la actualización, que consta de un círculo de progreso animado:

Captura de pantalla dey Android

El valor de RefreshView.IsRefreshing la propiedad indica el estado actual de RefreshView . Cuando el usuario desencadena una actualización, esta propiedad pasa automáticamente a true . Una vez completada la actualización, debe restablecer la propiedad a false .

Para obtener más información sobre RefreshView, vea Xamarin.Forms RefreshView.

Carga incremental de datos

CollectionView admite la virtualización incremental de datos a medida que el usuario se desplaza. Esto permite escenarios como la carga asincrónica de una página de datos desde un servicio web, a medida que el usuario se desplaza. Además, el punto en el que se cargan más datos es configurable para que los usuarios no vean espacio en blanco o se detengan para desplazarse.

CollectionView define las siguientes propiedades para controlar la carga incremental de datos:

• RemainingItemsThreshold, de tipo int , el umbral de elementos que aún no están visibles en la lista en la que se desencadena el RemainingItemsThresholdReached evento.
• RemainingItemsThresholdReachedCommand, de tipo ICommand , que se ejecuta cuando se alcanza RemainingItemsThreshold .
• RemainingItemsThresholdReachedCommandParameter, de tipo object, que es el parámetro que se pasa a RemainingItemsThresholdReachedCommand.

CollectionView también define un RemainingItemsThresholdReached evento que se desencadena cuando se desplaza lo suficiente como para que los elementos no se hayan CollectionViewRemainingItemsThreshold mostrado. Este evento se puede controlar para cargar más elementos. Además, cuando se desencadena el evento, se ejecuta , lo que permite que la carga incremental de datos se lleve a cabo RemainingItemsThresholdReached en un modelo de RemainingItemsThresholdReachedCommand vista.

El valor predeterminado de la RemainingItemsThreshold propiedad es -1, lo que indica que el RemainingItemsThresholdReached evento nunca se desencadena. Cuando el valor de propiedad es 0, el evento se desencadena cuando se muestra el elemento final de RemainingItemsThresholdReached Xamarin_Forms RemainingItemsThresholdReached _ItemsView_ItemsSource" data-linktype="absolute-path">. ItemsSource Para los valores mayores que 0, el evento se desencadena cuando contiene ese número de elementos a los que todavía no RemainingItemsThresholdReachedItemsSource se ha desplazado.

En el ejemplo xaml siguiente se muestra CollectionView un objeto que carga los datos de forma incremental:

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

El código de C# equivalente es el siguiente:

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

En este ejemplo de código, el evento se produce cuando hay 5 elementos que aún no se han desplazado a y, en RemainingItemsThresholdReached respuesta, ejecuta el controlador OnCollectionViewRemainingItemsThresholdReached de eventos:

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

Vínculos relacionados

• CollectionView (ejemplo)
• Xamarin.Forms RefreshView
• Xamarin.Forms SwipeView
• Xamarin.Forms Data Binding
• Xamarin.Forms Data Templates
• Create a Xamarin.Forms DataTemplateSelector