Настройка внешнего вида ListView

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

Разделитель

По умолчанию все элементы списка разделяются горизонтальной чертой, которая служит в качестве разделителя. Однако с помощью свойства SeparatorVisibility можно отключить этот разделитель. Для этого оно получает значение None. В XAML:

<ListView SeparatorVisibility="None" >

В коде C#:

listView.SeparatorVisibility = SeparatorVisibility.None;
Отключение разделителя в ListView в Xamarin Forms

С помощью свойства SeparatorColor можно настроить цвет разделителя. В XAML:

<ListView SeparatorColor="Red" >

В коде C#:

listView.SeparatorColor = Color.Red;
Цвет разделителя в ListView в Xamarin Forms

Высота строк

Свойство RowHeight позволяет задать высоту строки в ListView. Но действовать оно будет только в том случае, если другое свойство в ListView - HasUnevenRows равно false.

Установка в XAML:

<ListView RowHeight="100" >

В коде C#:

listView.RowHeight = 100;

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

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

<?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="HelloApp.MainPage">
    <StackLayout>
        <ListView
              HasUnevenRows="True"
              ItemsSource="{Binding Phones}"
              Header="Header" 
			  Footer="Footer">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding Title}" FontSize="Large" />
                            <Label Text="{Binding Company}" />
                            <Label Text="{Binding Price}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

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

Header и Footer в ListView в Xamarin.Forms

Однако ListView позволяет задать шаблон для их отображения:

<?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="HelloApp.MainPage">
    <StackLayout>
        <ListView
              HasUnevenRows="True"
              ItemsSource="{Binding Phones}">
            <ListView.Header>
                <StackLayout Orientation="Horizontal">
                    <Label Text="Список моделей" FontSize="25" 
                           BackgroundColor="#c5cae9" HorizontalOptions="FillAndExpand" />
                </StackLayout>
            </ListView.Header>
            <ListView.Footer>
                <StackLayout Orientation="Horizontal">
                    <Label Text="Результаты на март 2017 г." FontSize="Large" 
                           TextColor="Gray" BackgroundColor="#c5cae9" HorizontalOptions="FillAndExpand" />
                </StackLayout>
            </ListView.Footer>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding Title}" FontSize="Large" />
                            <Label Text="{Binding Company}" />
                            <Label Text="{Binding Price}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>
Заголовок в ListView в Xamarin.Forms
Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850