Настройка внешнего вида ячейки ListViewCustomizing ListView Cell Appearance

Скачать пример Скачать примерDownload Sample Download the sample

ListView Представляет прокручиваемые списки, которые можно настраивать с помощью объекта ViewCells.ListView presents scrollable lists, which can be customized through the use of ViewCells. ViewCells можно использовать для отображения текста и изображений, указывающее состояние true или false и при получении входных данных пользователя.ViewCells can be used for displaying text and images, indicating a true/false state and receiving user input.

Встроенные в ячейкахBuilt in Cells

Xamarin.Forms поставляется с встроенной ячеек, которые работают для многих приложений простой:Xamarin.Forms comes with built-in cells that work for many simple applications:

  • TextCell – для отображения текстаTextCell – for displaying text
  • ImageCell – для отображения изображения с текстом.ImageCell – for displaying an image with text.

Две дополнительные ячейки, SwitchCell и EntryCell доступны, но не часто используются в соответствии с ListView.Two additional cells, SwitchCell and EntryCell are available, however they aren't commonly used with ListView. См. в разделе TableView Дополнительные сведения об этих ячеек.See TableView for more information about these cells.

TextCellTextCell

TextCell представляет собой ячейку для отображения текста, при необходимости с вторая строка обозначается как текст сведений.TextCell is a cell for displaying text, optionally with a second line as detail text.

TextCells подготавливаются к просмотру как собственные элементы управления во время выполнения, поэтому производительность является очень высокой по сравнению с пользовательской ViewCell.TextCells are rendered as native controls at runtime, so performance is very good compared to a custom ViewCell. TextCells являются настраиваемыми, позволяя задавать:TextCells are customizable, allowing you to set:

  • Text – текст, отображаемый в первой строке крупным шрифтом.Text – the text that is shown on the first line, in large font.
  • Detail – текст, который отображается под первой строке, мелким шрифтом.Detail – the text that is shown underneath the first line, in a smaller font.
  • TextColor – цвет текста.TextColor – the color of the text.
  • DetailColor – цвет текста детализацииDetailColor – the color of the detail text

ImageCellImageCell

ImageCell, такие как TextCell, можно использовать для отображения текста и текст дополнительный сведений, и он предлагает превосходную производительность процессов с помощью собственных элементов управления для каждой платформы.ImageCell, like TextCell, can be used for displaying text and secondary detail text, and it offers great performance by using each platform's native controls. ImageCell отличается от TextCell тем, что показывает изображения слева от текста.ImageCell differs from TextCell in that it displays an image to the left of the text.

ImageCell полезно, когда необходимо отобразить список данных с помощью вида, такие как список контактов или фильмах.ImageCell is useful when you need to display a list of data with a visual aspect, such as a list of contacts or movies. ImageCells являются настраиваемыми, позволяя задавать:ImageCells are customizable, allowing you to set:

  • Text – текст, который отображается в первой строке, крупным шрифтомText – the text that is shown on the first line, in large font
  • Detail – текст, который отображается под первой строке, меньший размер шрифтаDetail – the text that is shown underneath the first line, in a smaller font
  • TextColor – цвет текстаTextColor – the color of the text
  • DetailColor – цвет текста детализацииDetailColor – the color of the detail text
  • ImageSource – изображение, отображаемое рядом с текстомImageSource – the image to display next to the text

Пользовательские ячейкиCustom Cells

Если встроенные ячеек не предоставляет необходимые макета, пользовательские ячейки реализации требуется макет.When the built-in cells don't provide the required layout, custom cells implemented the required layout. Например можно представить ячейки с двух меток, которые имеют равный вес.For example, you may want to present a cell with two labels that have equal weight. Объект TextCell будет недостаточно поскольку TextCell содержит одну метку, меньший по размеру.A TextCell would be insufficient because the TextCell has one label that is smaller. Большая часть настройки ячейку добавьте дополнительные данные только для чтения (например, дополнительные метки, изображения или другие сведения для отображения).Most cell customizations add additional read-only data (such as additional labels, images or other display information).

Все пользовательские ячейки должен быть производным от ViewCell , тот же базовый класс, что все ячейки, встроенные типы использования.All custom cells must derive from ViewCell, the same base class that all of the built-in cell types use.

В Xamarin.Forms 2 появился новый поведение кэширования на ListView элемента управления, который можно задать для повышения быстродействия для некоторых типов пользовательских ячеек.Xamarin.Forms 2 introduced a new caching behavior on the ListView control which can be set to improve scrolling performance for some types of custom cells.

Ниже приведен пример пользовательского ячейки:This is an example of a custom cell:

XAMLXAML

XAML для создания макета выше приведен ниже:The XAML to create the above layout is below:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="demoListView.ImageCellPage">
    <ContentPage.Content>
        <ListView  x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout BackgroundColor="#eee"
                        Orientation="Vertical">
                            <StackLayout Orientation="Horizontal">
                                <Image Source="{Binding image}" />
                                <Label Text="{Binding title}"
                                TextColor="#f35e20" />
                                <Label Text="{Binding subtitle}"
                                HorizontalOptions="EndAndExpand"
                                TextColor="#503026" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

Делает гораздо выше XAML.The XAML above is doing a lot. Давайте разобьем ее:Let's break it down:

  • Пользовательской ячейки вложен в DataTemplate, который находится внутри ListView.ItemTemplate.The custom cell is nested inside a DataTemplate, which is inside ListView.ItemTemplate. Это же процессе, что с помощью любую другую ячейку.This is the same process as using any other cell.
  • ViewCell — Тип пользовательской ячейки.ViewCell is the type of the custom cell. Дочерним элементом элемента DataTemplate элемент должен быть или являются производными от типа ViewCell.The child of the DataTemplate element must be of or derive from type ViewCell.
  • Обратите внимание, что его в ViewCell, макет находится под управлением StackLayout.Notice that inside the ViewCell, layout is managed by a StackLayout. Этот макет позволяет настроить цвет фона.This layout allows us to customize the background color. Обратите внимание, что любое свойство StackLayout то есть привязки может привязать внутри пользовательских ячейки, несмотря на то, что этот процесс не показан здесь.Note that any property of StackLayout that is bindable can be bound inside a custom cell, although that is not shown here.
  • Внутри ViewCell, макет может управляться любой макет Xamarin.Forms.Inside the ViewCell, layout can be managed by any Xamarin.Forms layout.

C#C#

Указание пользовательских ячейки в C# — чуть более подробным, чем эквивалент XAML.Specifying a custom cell in C# is a bit more verbose than the XAML equivalent. Например:Let's take a look:

Во-первых, определите пользовательский класс ячейки, с помощью ViewCell как базовый класс:First, define a custom cell class, with ViewCell as the base class:

public class CustomCell : ViewCell
    {
        public CustomCell()
        {
            //instantiate each of our views
            var image = new Image ();
            StackLayout cellWrapper = new StackLayout ();
            StackLayout horizontalLayout = new StackLayout ();
            Label left = new Label ();
            Label right = new Label ();

            //set bindings
            left.SetBinding (Label.TextProperty, "title");
            right.SetBinding (Label.TextProperty, "subtitle");
            image.SetBinding (Image.SourceProperty, "image");

            //Set properties for desired design
            cellWrapper.BackgroundColor = Color.FromHex ("#eee");
            horizontalLayout.Orientation = StackOrientation.Horizontal;
            right.HorizontalOptions = LayoutOptions.EndAndExpand;
            left.TextColor = Color.FromHex ("#f35e20");
            right.TextColor = Color.FromHex ("503026");

            //add views to the view hierarchy
            horizontalLayout.Children.Add (image);
            horizontalLayout.Children.Add (left);
            horizontalLayout.Children.Add (right);
            cellWrapper.Children.Add (horizontalLayout);
            View = cellWrapper;
        }
    }

В конструкторе для страницы с ListView, задайте ListView ItemTemplate свойство в новый DataTemplate:In your constructor for the page with the ListView, set the ListView's ItemTemplate property to a new DataTemplate:

public partial class ImageCellPage : ContentPage
    {
        public ImageCellPage ()
        {
            InitializeComponent ();
            listView.ItemTemplate = new DataTemplate (typeof(CustomCell));
        }
    }

Обратите внимание, что конструктор DataTemplate принимает значение типа.Note that the constructor for DataTemplate takes a type. Оператор typeof возвращает тип среды CLR для CustomCell.The typeof operator gets the CLR type for CustomCell.

Изменения контекста привязкиBinding Context Changes

При привязке к ячейки пользовательского типа BindableProperty экземпляров, элементы управления пользовательского интерфейса, отображающие BindableProperty значения следует использовать OnBindingContextChanged переопределение, чтобы задать данные для отображения в Каждая ячейка, а не конструктор ячейки, как показано в следующем примере кода:When binding to a custom cell type's BindableProperty instances, the UI controls displaying the BindableProperty values should use the OnBindingContextChanged override to set the data to be displayed in each cell, rather than the cell constructor, as demonstrated in the following code example:

public class CustomCell : ViewCell
{
    Label nameLabel, ageLabel, locationLabel;

    public static readonly BindableProperty NameProperty =
        BindableProperty.Create ("Name", typeof(string), typeof(CustomCell), "Name");
    public static readonly BindableProperty AgeProperty =
        BindableProperty.Create ("Age", typeof(int), typeof(CustomCell), 0);
    public static readonly BindableProperty LocationProperty =
        BindableProperty.Create ("Location", typeof(string), typeof(CustomCell), "Location");

    public string Name {
        get { return(string)GetValue (NameProperty); }
        set { SetValue (NameProperty, value); }
    }

    public int Age {
        get { return(int)GetValue (AgeProperty); }
        set { SetValue (AgeProperty, value); }
    }

    public string Location {
        get { return(string)GetValue (LocationProperty); }
        set { SetValue (LocationProperty, value); }
    }
    ...

    protected override void OnBindingContextChanged ()
    {
        base.OnBindingContextChanged ();

        if (BindingContext != null) {
            nameLabel.Text = Name;
            ageLabel.Text = Age.ToString ();
            locationLabel.Text = Location;
        }
    }
}

OnBindingContextChanged Переопределение будет выполнен при вызове BindingContextChanged вызывает событие, в ответ на значение BindingContext изменение свойства.The OnBindingContextChanged override will be called when the BindingContextChanged event fires, in response to the value of the BindingContext property changing. Таким образом, когда BindingContext изменяется, элементы управления пользовательского интерфейса, отображающие BindableProperty значения следует задать свои данные.Therefore, when the BindingContext changes, the UI controls displaying the BindableProperty values should set their data. Обратите внимание, что BindingContext должны проверяться null значение, как это может быть переведена с Xamarin.Forms для сборки мусора, что в свою очередь приведет к OnBindingContextChanged переопределить вызова.Note that the BindingContext should be checked for a null value, as this can be set by Xamarin.Forms for garbage collection, which in turn will result in the OnBindingContextChanged override being called.

Кроме того, можно привязать элементы управления пользовательского интерфейса к BindableProperty экземпляров, чтобы отобразить их значения, которые устраняет необходимость в Переопределите OnBindingContextChanged метод.Alternatively, UI controls can bind to the BindableProperty instances to display their values, which removes the need to override the OnBindingContextChanged method.

Примечание

При переопределении метода OnBindingContextChanged, убедитесь, что базовый класс OnBindingContextChanged метод вызывается, чтобы зарегистрированные делегаты получили BindingContextChanged событий.When overriding OnBindingContextChanged, ensure that the base class's OnBindingContextChanged method is called so that registered delegates receive the BindingContextChanged event.

В XAML привязка пользовательского типа ячейки к данным может осуществляться как показано в следующем примере кода:In XAML, binding the custom cell type to data can be achieved as shown in the following code example:

<ListView x:Name="listView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:CustomCell Name="{Binding Name}" Age="{Binding Age}" Location="{Binding Location}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Этот код привязывает Name, Age, и Location свойства связывания в CustomCell экземпляра, Name, Age, и Location свойства каждого объекта в базовой коллекции.This binds the Name, Age, and Location bindable properties in the CustomCell instance, to the Name, Age, and Location properties of each object in the underlying collection.

В следующем примере кода показан эквивалентный привязки на языке C#:The equivalent binding in C# is shown in the following code example:

var customCell = new DataTemplate (typeof(CustomCell));
customCell.SetBinding (CustomCell.NameProperty, "Name");
customCell.SetBinding (CustomCell.AgeProperty, "Age");
customCell.SetBinding (CustomCell.LocationProperty, "Location");

var listView = new ListView {
    ItemsSource = people,
    ItemTemplate = customCell
};

В iOS и Android Если ListView перезапускается элементов и пользовательской ячейки использует пользовательское средство отрисовки, пользовательское средство отрисовки должен правильно реализовывать уведомления об изменении свойства.On iOS and Android, if the ListView is recycling elements and the custom cell uses a custom renderer, the custom renderer must correctly implement property change notification. При повторно ячеек используются значения свойств изменится при обновлении контекста привязки, доступные ячейки, с помощью PropertyChanged вызванных событий.When cells are reused their property values will change when the binding context is updated to that of an available cell, with PropertyChanged events being raised. Дополнительные сведения см. в разделе Настройка ViewCell.For more information, see Customizing a ViewCell. Дополнительные сведения о перезапуске ячейки, см. в разделе стратегии кэширования.For more information about cell recycling, see Caching Strategy.