Заголовок и футер в ListView

Последнее обновление: 23.01.2023

С помощью свойств Header и Footer у ListView можно задать соответственно заголовок и футер. В качестве значения мы можем задать обычные строки:

namespace HelloApp;
class StartPage : ContentPage
{
    public StartPage()
    {
        ListView listView = new ListView();
        listView.RowHeight = 25;
        listView.Header = "Список пользователей";
        listView.Footer = "январь 2023";
        // определяем источник данных
        listView.ItemsSource = new List<string>() { "Tom", "Sam", "Bob", "Alice" };
        Content = new StackLayout { Children = { listView }, Padding=7};
    }
}

Аналог в xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <x:Array x:Key="users" Type="{x:Type x:String}">
                <x:String>Tom</x:String>
                <x:String>Bob</x:String>
                <x:String>Sam</x:String>
                <x:String>Alice</x:String>
            </x:Array>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout Padding="7">
        <ListView ItemsSource="{StaticResource users}" 
                  Header="Список пользователей" Footer="январь 2023" RowHeight="25" />
    </StackLayout>
</ContentPage>

Но в данном случае мы увидим небольшие надписи в начале и в конце списка:

Header и Footer в ListView в .NET MAUI и C#

Настройка шаблона для заголовка и футера

Однако ListView позволяет задать шаблон для их отображения. Эти свойства принимают визуальные элементы, которые будут выполнять роль заголовка или футера. Например:

namespace HelloApp;
class StartPage : ContentPage
{
    public StartPage()
    {
        ListView listView = new ListView();
        listView.RowHeight = 25;
        listView.Header = new Label{Text= "Список пользователей", FontSize=18};
        listView.Footer = new VerticalStackLayout {
            Children = {
                new Label { Text = "METANIT.COM", FontSize = 12 },
                new Label { Text = "январь 2023", FontSize = 12 },
            }
        };
        // определяем источник данных
        listView.ItemsSource = new List<string>() { "Tom", "Sam", "Bob", "Alice" };
        Content = new StackLayout { Children = { listView }, Padding=7};
    }
}

Здесь в качестве заголовка выступает метка Label, а в качестве футера - элемент StackLayout, который, в свою очередь, содержит две метки.

Настройка заголовка и футера в ListView в .NET MAUI и C#

Аналогичный пример в XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <x:Array x:Key="users" Type="{x:Type x:String}">
                <x:String>Tom</x:String>
                <x:String>Bob</x:String>
                <x:String>Sam</x:String>
                <x:String>Alice</x:String>
            </x:Array>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout Padding="7">
        <ListView ItemsSource="{StaticResource users}" RowHeight="25">
            <ListView.Header>
                <Label Text= "Список пользователей" FontSize="18" />
            </ListView.Header>
            <ListView.Footer>
                <VerticalStackLayout>
                    <Label FontSize="12" Text="METANIT.COM" />
                    <Label FontSize="12" Text="январь 2023" />
                </VerticalStackLayout>
            </ListView.Footer>
        </ListView>
    </StackLayout>
</ContentPage>
Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850