Внешний вид ListView

Статья
12/13/2018

Это Xamarin.FormsListView позволяет настроить представление списка в дополнение к ViewCell экземплярам каждой строки в списке.

Группировка

Большие наборы данных могут стать неуклюжами при просмотре в списке непрерывной прокрутки. Включение группирования может улучшить взаимодействие с пользователем в этих случаях, упорядочение содержимого и активацию элементов управления для конкретной платформы, которые упрощают навигацию по данным.

При активации группировки для ListViewкаждой группы добавляется строка заголовка.

Чтобы включить группирование, выполните приведенные действия.

Создайте список списков (список групп, каждая из которых является списком элементов).
Задайте для ListViewItemsSource этого списка значение s.
IsGroupingEnabled — присвойте значение True.
Задайте GroupDisplayBinding для привязки к свойству групп, которые используются в качестве названия группы.
[Необязательно] Задайте GroupShortNameBinding для привязки к свойству групп, которые используются в качестве короткого имени группы. Короткое имя используется для списков переходов (правый столбец в iOS).

Начните с создания класса для групп:

public class PageTypeGroup : List<PageModel>
    {
        public string Title { get; set; }
        public string ShortName { get; set; } //will be used for jump lists
        public string Subtitle { get; set; }
        private PageTypeGroup(string title, string shortName)
        {
            Title = title;
            ShortName = shortName;
        }

        public static IList<PageTypeGroup> All { private set; get; }
    }

В приведенном выше коде All приведен список, который будет предоставлен нашему ListView в качестве источника привязки. Title и ShortName являются свойствами, которые будут использоваться для заголовков групп.

На этом этапе All это пустой список. Добавьте статический конструктор, чтобы список заполнялся при запуске программы:

static PageTypeGroup()
{
    List<PageTypeGroup> Groups = new List<PageTypeGroup> {
            new PageTypeGroup ("Alpha", "A"){
                new PageModel("Amelia", "Cedar", new switchCellPage(),""),
                new PageModel("Alfie", "Spruce", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ava", "Pine", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Archie", "Maple", new switchCellPage(), "grapefruit.jpg")
            },
            new PageTypeGroup ("Bravo", "B"){
                new PageModel("Brooke", "Lumia", new switchCellPage(),""),
                new PageModel("Bobby", "Xperia", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Bella", "Desire", new switchCellPage(), "grapefruit.jpg"),
                new PageModel("Ben", "Chocolate", new switchCellPage(), "grapefruit.jpg")
            }
        };
        All = Groups; //set the publicly accessible list
}

В приведенном выше коде можно также вызывать Add элементы Groups, которые являются экземплярами типа PageTypeGroup. Этот метод возможен, так как PageTypeGroup наследуется от List<PageModel>.

Ниже приведен КОД XAML для отображения сгруппированного списка:

<?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.GroupingViewPage"
    <ContentPage.Content>
        <ListView  x:Name="GroupedView"
                   GroupDisplayBinding="{Binding Title}"
                   GroupShortNameBinding="{Binding ShortName}"
                   IsGroupingEnabled="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                              Detail="{Binding Subtitle}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

Этот XAML выполняет следующие действия:

Задайте GroupShortNameBinding для свойства, определенного ShortName в классе группы
Задайте GroupDisplayBinding для свойства, определенного Title в классе группы
Задать IsGroupingEnabled значение true
Изменено значение ListView"s" ItemsSource в группованный список

На следующем снимка экрана показан полученный пользовательский интерфейс:

Пример группировки ListView

Настройка группирования

Если группирование включено в списке, можно также настроить заголовок группы.

Аналогично тому, как ListView имеет значение ItemTemplate для определения отображения строк. ListView GroupHeaderTemplate

Ниже показан пример настройки заголовка группы в XAML:

<?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.GroupingViewPage">
    <ContentPage.Content>
        <ListView x:Name="GroupedView"
                  GroupDisplayBinding="{Binding Title}"
                  GroupShortNameBinding="{Binding ShortName}"
                  IsGroupingEnabled="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                              Detail="{Binding Subtitle}"
                              TextColor="#f35e20"
                              DetailColor="#503026" />
                </DataTemplate>
            </ListView.ItemTemplate>
            <!-- Group Header Customization-->
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}"
                              Detail="{Binding ShortName}"
                              TextColor="#f35e20"
                              DetailColor="#503026" />
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <!-- End Group Header Customization -->
        </ListView>
    </ContentPage.Content>
</ContentPage>

Колонтитулы

Представление ListView может представлять верхний и нижний колонтитул, прокручиваемый с элементами списка. Верхний и нижний колонтитул могут быть строками текста или более сложным макетом. Это поведение отличается от групп разделов.

Можно задать Header значение и (или) Footer string значение или задать их для более сложного макета. Существуют также HeaderTemplate и FooterTemplate свойства, которые позволяют создавать более сложные макеты для верхнего и нижнего колонтитулов, поддерживающих привязку данных.

Чтобы создать базовый верхний или нижний колонтитул, просто задайте свойства верхнего или нижнего колонтитула тексту, который требуется отобразить. В коде:

ListView HeaderList = new ListView()
{
    Header = "Header",
    Footer = "Footer"
};

В XAML:

<ListView x:Name="HeaderList" 
          Header="Header"
          Footer="Footer">
    ...
</ListView>

ListView с верхним и нижним колонтитулов

Чтобы создать настраиваемый верхний и нижний колонтитул, определите представления верхних и нижних колонтитулов:

<ListView.Header>
    <StackLayout Orientation="Horizontal">
        <Label Text="Header"
               TextColor="Olive"
               BackgroundColor="Red" />
    </StackLayout>
</ListView.Header>
<ListView.Footer>
    <StackLayout Orientation="Horizontal">
        <Label Text="Footer"
               TextColor="Gray"
               BackgroundColor="Blue" />
    </StackLayout>
</ListView.Footer>

ListView с настроенным верхним и нижним колонтитулов

Видимость полосы прокрутки

Класс ListView имеет HorizontalScrollBarVisibility и VerticalScrollBarVisibility свойства, которые получают или задают ScrollBarVisibility значение, представляющее, когда отображается горизонтальная или вертикальная полоса прокрутки. Оба свойства можно задать следующими значениями:

Default указывает поведение полосы прокрутки по умолчанию для платформы и является значением по умолчанию для HorizontalScrollBarVisibility свойств и VerticalScrollBarVisibility свойств.
Always указывает, что полосы прокрутки будут видимыми, даже если содержимое помещается в представление.
Never указывает, что полосы прокрутки не будут видимыми, даже если содержимое не помещается в представление.

Разделители строк

Линии разделителя отображаются между ListView элементами по умолчанию в iOS и Android. Если вы предпочитаете скрыть строки разделителя в iOS и Android, задайте SeparatorVisibility свойство в ListView. Ниже приведены следующие варианты SeparatorVisibility :

По умолчанию отображается строка разделителя в iOS и Android.
Нет — скрывает разделитель на всех платформах.

Видимость по умолчанию:

C#.

SeparatorDemoListView.SeparatorVisibility = SeparatorVisibility.Default;

XAML:

<ListView x:Name="SeparatorDemoListView" SeparatorVisibility="Default" />

ListView с разделителями строк по умолчанию

None:

C#.

SeparatorDemoListView.SeparatorVisibility = SeparatorVisibility.None;

XAML:

<ListView x:Name="SeparatorDemoListView" SeparatorVisibility="None" />

ListView без разделителей строк

Можно также задать цвет линии разделителя с помощью SeparatorColor свойства:

C#.

SeparatorDemoListView.SeparatorColor = Color.Green;

XAML:

<ListView x:Name="SeparatorDemoListView" SeparatorColor="Green" />

ListView с разделителями зеленых строк

Примечание.

Установка любого из этих свойств в Android после загрузки ListView вызывает большую штрафную производительность.

Высота строки

Все строки в ListView имеют одинаковую высоту по умолчанию. ListView имеет два свойства, которые можно использовать для изменения этого поведения:

HasUnevenRows — true/false значение, строки имеют различные высоты, если задано trueзначение . По умолчанию — false.
RowHeight — задает высоту каждой строки, когда HasUnevenRows есть false.

Высоту всех строк можно задать, задав RowHeight для свойства значение ListView.

Настраиваемая фиксированная высота строки

C#.

RowHeightDemoListView.RowHeight = 100;

XAML:

<ListView x:Name="RowHeightDemoListView" RowHeight="100" />

ListView с фиксированной высотой строки

Неровные строки

Если вы хотите, чтобы отдельные строки имели разные высоты, можно задать HasUnevenRows для trueсвойства значение . Высоты строк не обязательно устанавливать вручную один разHasUnevenRows, trueтак как высоты будут автоматически вычисляться.Xamarin.Forms

C#.

RowHeightDemoListView.HasUnevenRows = true;

XAML:

<ListView x:Name="RowHeightDemoListView" HasUnevenRows="true" />

ListView с неровными строками

Изменение размера строк во время выполнения

Отдельные ListView строки могут быть программно изменены во время выполнения, при условии, что HasUnevenRows для свойства задано значение true. Метод Cell.ForceUpdateSize обновляет размер ячейки, даже если она в настоящее время не видна, как показано в следующем примере кода:

void OnImageTapped (object sender, EventArgs args)
{
    var image = sender as Image;
    var viewCell = image.Parent.Parent as ViewCell;

    if (image.HeightRequest < 250) {
        image.HeightRequest = image.Height + 100;
        viewCell.ForceUpdateSize ();
    }
}

Обработчик OnImageTapped событий выполняется в ответ на Image касание ячейки и увеличивает размер Image отображаемого в ячейке, чтобы его можно было легко просмотреть.

ListView с изменением размера строк среды выполнения

Предупреждение

Превышение размера строк среды выполнения может привести к снижению производительности.

Поделиться через

Внешний вид ListView

Группировка

Настройка группирования

Колонтитулы

Видимость полосы прокрутки

Разделители строк

Высота строки

Настраиваемая фиксированная высота строки

Неровные строки

Изменение размера строк во время выполнения

Дополнительные ресурсы

Поделиться через

Внешний вид ListView

Группировка

Настройка группирования

Колонтитулы

Видимость полосы прокрутки

Разделители строк

Высота строки

Настраиваемая фиксированная высота строки

Неровные строки

Изменение размера строк во время выполнения

Дополнительные ссылки

Дополнительные ресурсы