Общие сведения о шаблонах данных Xamarin.FormsIntroduction to Xamarin.Forms Data Templates

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

Шаблоны данных Xamarin.Forms дают возможность настраивать представление данных в поддерживаемых элементах управления. В этой статье описываются шаблоны данных и объясняется их необходимость.Xamarin.Forms data templates provide the ability to define the presentation of data on supported controls. This article provides an introduction to data templates, examining why they are necessary.

Предположим, имеется элемент ListView, в котором отображается коллекция объектов Person.Consider a ListView that displays a collection of Person objects. В следующем примере кода показано определение класса Person.The following code example shows the definition of the Person class:

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Location { get; set; }
}

В классе Person определены свойства Name, Age и Location, которые можно задать при создании объекта Person.The Person class defines Name, Age, and Location properties, which can be set when a Person object is created. Элемент ListView используется для отображения коллекции объектов Person, как показано в следующем примере кода XAML.The ListView is used to display the collection of Person objects, as shown in the following XAML code example:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             ...>
    <StackLayout Margin="20">
        ...
        <ListView Margin="0,20,0,0">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type local:Person}">
                    <local:Person Name="Steve" Age="21" Location="USA" />
                    <local:Person Name="John" Age="37" Location="USA" />
                    <local:Person Name="Tom" Age="42" Location="UK" />
                    <local:Person Name="Lucas" Age="29" Location="Germany" />
                    <local:Person Name="Tariq" Age="39" Location="UK" />
                    <local:Person Name="Jane" Age="30" Location="USA" />
                </x:Array>
            </ListView.ItemsSource>
        </ListView>
    </StackLayout>
</ContentPage>

Элементы добавляются в ListView в XAML путем инициализации свойства ItemsSource на основе массива экземпляров Person.Items are added to the ListView in XAML by initializing the ItemsSource property from an array of Person instances.

Примечание

Обратите внимание на то, что для элемента x:Array требуется атрибут Type, указывающий тип элементов в массиве.Note that the x:Array element requires a Type attribute indicating the type of the items in the array.

Эквивалентная страница на C# показана в следующем примере кода, в котором свойство ItemsSource инициализируется с помощью списка List экземпляров Person:The equivalent C# page is shown in the following code example, which initializes the ItemsSource property to a List of Person instances:

public WithoutDataTemplatePageCS()
{
    ...
    var people = new List<Person>
    {
        new Person { Name = "Steve", Age = 21, Location = "USA" },
        new Person { Name = "John", Age = 37, Location = "USA" },
        new Person { Name = "Tom", Age = 42, Location = "UK" },
        new Person { Name = "Lucas", Age = 29, Location = "Germany" },
        new Person { Name = "Tariq", Age = 39, Location = "UK" },
        new Person { Name = "Jane", Age = 30, Location = "USA" }
    };

    Content = new StackLayout
    {
        Margin = new Thickness(20),
        Children = {
            ...
            new ListView { ItemsSource = people, Margin = new Thickness(0, 20, 0, 0) }
        }
    };
}

При отображении объектов в коллекции ListView вызывает ToString.The ListView calls ToString when displaying the objects in the collection. Так как переопределения Person.ToString нет, ToString возвращает имя типа каждого объекта, как показано на следующих снимках экрана.Because there is no Person.ToString override, ToString returns the type name of each object, as shown in the following screenshots:

Объект Person может переопределять метод ToString для отображения осмысленных данных, как показано в следующем примере кода.The Person object can override the ToString method to display meaningful data, as shown in the following code example:

public class Person
{
  ...
  public override string ToString ()
  {
    return Name;
  }
}

В результате в ListView отображается значение свойства Person.Name для каждого объекта в коллекции, как показано на следующих снимках экрана.This results in the ListView displaying the Person.Name property value for each object in the collection, as shown in the following screenshots:

Переопределение Person.ToString могло бы возвращать форматированную строку, состоящую из значений свойств Name, Age и Location.The Person.ToString override could return a formatted string consisting of the Name, Age, and Location properties. Однако такой подход не позволяет полностью контролировать внешний вид каждого элемента данных.However, this approach offers only a limited control over the appearance of each item of data. Чтобы добиться большей гибкости, можно создать шаблон DataTemplate, определяющий внешний вид данных.For more flexibility, a DataTemplate can be created that defines the appearance of the data.

Создание DataTemplateCreating a DataTemplate

Шаблон DataTemplate используется для определения внешнего вида данных и обычно привязывается к данным для отображения.A DataTemplate is used to specify the appearance of data, and typically uses data binding to display data. Стандартный сценарий его использования — отображение данных из коллекции объектов в ListView.Its common usage scenario is when displaying data from a collection of objects in a ListView. Например, если элемент ListView привязан к коллекции объектов Person, свойству ListView.ItemTemplate присваивается шаблон DataTemplate, определяющий внешний вид каждого объекта Person в ListView.For example, when a ListView is bound to a collection of Person objects, the ListView.ItemTemplate property will be set to a DataTemplate that defines the appearance of each Person object in the ListView. Шаблон DataTemplate будет содержать элементы, привязанные к значениям свойств каждого объекта Person.The DataTemplate will contain elements that bind to property values of each Person object. Дополнительные сведения о привязке данных см. в статье Основы привязки данных.For more information about data binding, see Data Binding Basics.

Шаблон DataTemplate можно использовать в качестве значения следующих свойств:A DataTemplate can be used as a value for the following properties:

Примечание

Обратите внимание на то, что, хотя представление TableView использует объекты Cell, оно не использует шаблон DataTemplate.Note that although the TableView makes uses of Cell objects, it does not use a DataTemplate. Связано это с тем, что привязки данных всегда задаются непосредственно для объектов Cell.This is because data bindings are always set directly on Cell objects.

Шаблон DataTemplate, являющийся прямым потомком перечисленных выше свойств, называется встроенным.A DataTemplate that's placed as a direct child of the properties listed above is known as an inline template. Кроме того, шаблон DataTemplate можно определить как ресурс на уровне элемента управления, страницы или приложения.Alternatively, a DataTemplate can be defined as a control-level, page-level, or application-level resource. От того, где определен шаблон DataTemplate, зависит то, где его можно использовать.Choosing where to define a DataTemplate impacts where it can be used:

  • Шаблон DataTemplate, определенный на уровне элемента управления, можно применять только к элементу управления.A DataTemplate defined at the control level can only be applied to the control.
  • Шаблон DataTemplate, определенный на уровне страницы, можно применять к допустимым элементам управления на странице.A DataTemplate defined at the page level can be applied to multiple valid controls on the page.
  • Шаблон DataTemplate, определенный на уровне приложения, можно применять к допустимым элементам управления в приложении.A DataTemplate defined at the application level can be applied to valid controls throughout the application.

Шаблоны данных, которые находятся ниже в иерархии представлений, имеют приоритет над определенными выше в иерархии, если они имеют общие атрибуты x:Key.Data templates lower in the view hierarchy take precedence over those defined higher up when they share x:Key attributes. Например, шаблон данных на уровне приложения переопределяется шаблоном данных на уровне страницы, а шаблон данных на уровне страницы переопределяется шаблоном данных на уровне элемента управления или встроенным шаблоном данных.For example, an application-level data template will be overridden by a page-level data template, and a page-level data template will be overridden by a control-level data template, or an inline data template.