Xamarin. Forms CollectionView de dadosXamarin.Forms CollectionView Data

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

CollectionView Define as seguintes propriedades que definem os dados a ser exibido e sua aparência:CollectionView defines the following properties that define the data to be displayed, and its appearance:

  • ItemsSource, do tipo IEnumerable, especifica a coleção de itens a serem exibidos, e tem um valor padrão de null.ItemsSource, of type IEnumerable, specifies the collection of items to be displayed, and has a default value of null.
  • ItemTemplate, do tipo DataTemplate , especifica o modelo a ser aplicado a cada item na coleção de itens a serem exibidos.ItemTemplate, of type DataTemplate, specifies the template to apply to each item in the collection of items to be displayed.

Essas propriedades têm o respaldo BindableProperty objetos, o que significa que as propriedades podem ser alvos de vinculações de dados.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

Preencher um CollectionView de dadosPopulate a CollectionView with data

Um CollectionView é preenchida com dados, definindo sua ItemsSource propriedade para qualquer coleção que implemente IEnumerable.A CollectionView is populated with data by setting its ItemsSource property to any collection that implements IEnumerable. Itens podem ser adicionados no XAML, inicializando o ItemsSource propriedade de uma matriz de cadeias de caracteres:Items can be added in XAML by initializing the ItemsSource property from an array of strings:

<CollectionView>
  <CollectionView.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:String>Baboon</x:String>
      <x:String>Capuchin Monkey</x:String>
      <x:String>Blue Monkey</x:String>
      <x:String>Squirrel Monkey</x:String>
      <x:String>Golden Lion Tamarin</x:String>
      <x:String>Howler Monkey</x:String>
      <x:String>Japanese Macaque</x:String>
    </x:Array>
  </CollectionView.ItemsSource>
</CollectionView>

Observação

Observe que o elemento x:Array requer um atributo Type que indica o tipo dos itens na matriz.Note that the x:Array element requires a Type attribute indicating the type of the items in the array.

O código C# equivalente é:The equivalent C# code is:

CollectionView collectionView = new CollectionView();
collectionView.ItemsSource = new string[]
{
    "Baboon",
    "Capuchin Monkey",
    "Blue Monkey",
    "Squirrel Monkey",
    "Golden Lion Tamarin",
    "Howler Monkey",
    "Japanese Macaque"
};

Importante

Se o CollectionView é necessária para atualizada à medida que itens são adicionados, removidos ou alterados na coleção subjacente, a coleção subjacente deve ser um IEnumerable coleção que envia a propriedade notificações de alteração, como ObservableCollection.If the CollectionView is required to refresh as items are added, removed, or changed in the underlying collection, the underlying collection should be an IEnumerable collection that sends property change notifications, such as ObservableCollection.

Por padrão, CollectionView exibe itens em uma lista vertical, conforme mostrado nas capturas de tela seguir:By default, CollectionView displays items in a vertical list, as shown in the following screenshots:

Captura de tela de CollectionView que contém os itens de texto, no iOS e AndroidScreenshot of CollectionView containing text items, on iOS and Android

Para obter informações sobre como alterar o CollectionView layout, consulte Especifica um Layout.For information on how to change the CollectionView layout, see Specify a Layout. Para obter informações sobre como definir a aparência de cada item na CollectionView, consulte definem a aparência do item.For information on how to define the appearance of each item in the CollectionView, see Define item appearance.

Associação de dadosData binding

CollectionView pode ser preenchido com dados usando associação de dados para associar seu ItemsSource propriedade para um IEnumerable coleção.CollectionView can be populated with data by using data binding to bind its ItemsSource property to an IEnumerable collection. No XAML, isso é feito com o Binding extensão de marcação:In XAML, this is achieved with the Binding markup extension:

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

O código C# equivalente é:The equivalent C# code is:

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

Neste exemplo, o ItemsSource associa dados de propriedade para o Monkeys propriedade do modelo de exibição conectado.In this example, the ItemsSource property data binds to the Monkeys property of the connected view model.

Observação

Associações compiladas podem ser habilitadas para melhorar o desempenho de associação de dados em aplicativos xamarin. Forms.Compiled bindings can be enabled to improve data binding performance in Xamarin.Forms applications. Para obter mais informações, consulte compilado associações.For more information, see Compiled Bindings.

Para obter mais informações sobre associação de dados, confira Associação de Dados do Xamarin.Forms.For more information about data binding, see Xamarin.Forms Data Binding.

Definir a aparência do itemDefine item appearance

A aparência de cada item na CollectionView pode ser definida ao configurar o CollectionView.ItemTemplate propriedade para um DataTemplate :The appearance of each item in the CollectionView can be defined by setting the CollectionView.ItemTemplate property to a 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>

O código C# equivalente é:The equivalent C# code is:

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

Os elementos especificados na DataTemplate definem a aparência de cada item na lista.The elements specified in the DataTemplate define the appearance of each item in the list. No exemplo, o layout do DataTemplate é gerenciada por um Grid .In the example, layout within the DataTemplate is managed by a Grid. O Grid contém uma Image objeto e duas Label objetos, que todos se associar a propriedades do Monkey classe:The Grid contains an Image object, and two Label objects, that all bind to properties of the Monkey class:

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

As capturas de tela a seguir mostram o resultado da modelagem de cada item na lista:The following screenshots show the result of templating each item in the list:

Captura de tela de CollectionView onde cada item é modelado no iOS e AndroidScreenshot of CollectionView where each item is templated, on iOS and Android

Para obter mais informações sobre modelos de dados, confira Modelos de dados do Xamarin.Forms.For more information about data templates, see Xamarin.Forms Data Templates.

Escolha a aparência do item em tempo de execuçãoChoose item appearance at runtime

A aparência de cada item na CollectionView pode ser escolhido no tempo de execução, com base no valor do item, definindo o CollectionView.ItemTemplate propriedade para um DataTemplateSelector objeto:The appearance of each item in the CollectionView can be chosen at runtime, based on the item value, by setting the CollectionView.ItemTemplate property to a DataTemplateSelector object:

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

O código C# equivalente é:The equivalent C# code is:

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

O ItemTemplate estiver definida como um MonkeyDataTemplateSelector objeto.The ItemTemplate property is set to a MonkeyDataTemplateSelector object. A exemplo a seguir mostra o MonkeyDataTemplateSelector classe:The following example shows the MonkeyDataTemplateSelector class:

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

O MonkeyDataTemplateSelector classe define AmericanMonkey e OtherMonkey DataTemplate propriedades que são definidas para modelos de dados diferentes.The MonkeyDataTemplateSelector class defines AmericanMonkey and OtherMonkey DataTemplate properties that are set to different data templates. O OnSelectTemplate substituir retorna o AmericanMonkey modelo, que exibe o monkey nome e local na turquesa, quando o nome do monkey contém "América".The OnSelectTemplate override returns the AmericanMonkey template, which displays the monkey name and location in teal, when the monkey name contains "America". Quando o nome do monkey não contém "América", o OnSelectTemplate substituir retorna o OtherMonkey modelo, que exibe o nome do monkey e o local em prata:When the monkey name doesn't contain "America", the OnSelectTemplate override returns the OtherMonkey template, which displays the monkey name and location in silver:

Captura de tela de CollectionView runtime item seleção de modelo, no iOS e AndroidScreenshot of CollectionView runtime item template selection, on iOS and Android

Para obter mais informações sobre os seletores de modelo de dados, consulte criar um xamarin. Forms DataTemplateSelector.For more information about data template selectors, see Create a Xamarin.Forms DataTemplateSelector.