ScrollView

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

Основные свойства класса ScrollView:

• Content: представляет содержимое области прокрутки - любой объект типа View.

• ContentSize: значение типа Size, которое хранит размер содержимого. Данное свойство доступно только для чтения.

• HorizontalScrollBarVisibility: значение типа ScrollBarVisibility, которое устанавливает горизонтальную прокрутку.

• Orientation: хранит значение типа ScrollOrientation, которое устанавливает направление прокрутки. По умолчанию имеет значение Vertical.

• ScrollX: значение типа double, которое задает X-позицию скорола. Значение по умолчанию - 0. Данное свойство доступно только для чтения.

• ScrollY: значение типа double, которое задает Y-позицию скорола. Значение по умолчанию - 0. Данное свойство доступно только для чтения

• VerticalScrollBarVisibility: значение типа ScrollBarVisibility, которое устанавливает вертикальную прокрутку.

По умолчанию для объекта ScrollView применяется вертикальная прокрутка. Простейший пример ScrollView в 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">
    <ScrollView>
        <StackLayout Padding="20">
            <Label FontSize="18">
                <Label.Text>
                    <x:String>
«Мой дядя самых честных правил,
Когда не в шутку занемог,
Он уважать себя заставил
И лучше выдумать не мог.
Его пример другим наука;
Но, боже мой, какая скука
С больным сидеть и день и ночь,
Не отходя ни шагу прочь!
Какое низкое коварство
Полуживого забавлять,
Ему подушки поправлять,
Печально подносить лекарство,
Вздыхать и думать про себя:
Когда же черт возьмет тебя!»

Так думал молодой повеса,
Летя в пыли на почтовых,
Всевышней волею Зевеса
Наследник всех своих родных.
Друзья Людмилы и Руслана!
С героем моего романа
Без предисловий, сей же час
Позвольте познакомить вас:
Онегин, добрый мой приятель,
Родился на брегах Невы,
Где, может быть, родились вы
Или блистали, мой читатель;
Там некогда гулял и я:
Но вреден север для меня.
                    </x:String>
                </Label.Text>
            </Label>
        </StackLayout>
    </ScrollView>
</ContentPage>

Аналогичный пример в коде C#:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            Label textLabel = new Label
            {
                FontSize = 18,
                Text = "«Мой дядя самых честных правил,  ...."
            };
            StackLayout stackLayout = new StackLayout 
            { 
                Children = { textLabel},
                Margin = new Thickness(20),
            };
            ScrollView scrollView = new ScrollView { Content = stackLayout };
            Content = scrollView;
        }
    }
}

ScrollView может также быть вложенным элементом внтри других элементов управления и контейнеров компоновки. В этом случае рекомендуется явным образом устанавливать для ScrollView высоту с помощью свойства HeightRequest. Например:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <StackLayout Padding="20, 20,0,0">
        <Label Text="Евгений Онегин" FontSize="22" />
        <ScrollView HeightRequest="300">
            <Label FontSize="18">
                <Label.Text>
                    <x:String>
«Мой дядя самых честных правил........
                    </x:String>
                </Label.Text>
            </Label>
        </ScrollView>
    </StackLayout>
</ContentPage>

В данном случае для ScrollView устанавливается высота в 300 единиц

Аналог в C#:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            StackLayout outerStackLayout = new StackLayout { Padding = new Thickness(20, 20, 0, 0) };

            Label header = new Label { Text = "Евгений Онегин", FontSize = 22 };
            Label textLabel = new Label
            {
                FontSize = 18,
                Text = "«Мой дядя самых честных правил,..."
            };
            ScrollView scrollView = new ScrollView { Content = textLabel , HeightRequest = 300 };
            outerStackLayout.Add(header);
            outerStackLayout.Add(scrollView);
            Content = outerStackLayout;
        }
    }
}

Если же ScrollView помещается в контейнер Grid, то для высоты строки грида, где расположен ScrollView, рекомендуется использовать значение "*". В этом случае ScrollView будет получать все оставшееся пространство:

<?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">
    <Grid Padding="20, 20,0,0" RowDefinitions="Auto, *">
        <Label Text="Евгений Онегин" FontSize="22" Grid.Row="0" />
        <ScrollView Grid.Row="1">
            <Label FontSize="18">
                <Label.Text>
                    <x:String>
«Мой дядя самых честных правил...
                    </x:String>
                </Label.Text>
            </Label>
        </ScrollView>
    </Grid>
</ContentPage>

Аналог в c#:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            Grid grid = new Grid { Padding = new Thickness(20, 20, 0, 0) };
            grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
            grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });

            Label headerLabel = new Label { Text = "Евгений Онегин", FontSize = 22 };
            Label textLabel = new Label
            {
                FontSize = 18,
                Text = "«Мой дядя самых честных правил..."
            };
            ScrollView scrollView = new ScrollView { Content = textLabel };
            grid.Add(headerLabel, row:0);
            grid.Add(scrollView, row: 1);
            Content = grid;
        }
    }
}

Направление прокрутки

С помощью свойства Orientation у элемента ScrollView можно задать направление прокрутки. Это свойство принимает одну из констант перечисления ScrollOrientation:

• Vertical: вертикальная прокрутка, значение по умолчанию

• Horizontal: горизонтальная прокрутка

• Both: сочетание вертикальной и горизонтальной прокрутки

• Neither: отсутствие прокрутки

Например, определение горизонтальной прокрутки:

ScrollView scrollView = new ScrollView {  Orientation = ScrollOrientation.Horizontal };

XAML:

<ScrollView Orientation="Horizontal">

Программная прокрутка

Класс ScrollView определяет метод ScrollToAsync, который позволяет программно прокручивать содержимое элемента. Он имеет две версии:

public Task ScrollToAsync(double x, double y, bool animated);
public Task ScrollToAsync(Element element, ScrollToPosition position, bool animated);

Первая версия производит переход к точке с определенными координатами x (первый параметр) и y (второй параметр). Третий параметр при значении true указывает, что надо использовать анимацию.

Вторая версия принимает элемент, к которому выполняется переход, в виде объекта Element и константу перечисления ScrollToPosition, которая устанавливает позицию скрола:

• MakeVisible: указывает, что элемент может прокручиваться, пока он остается в видимой области ScrollView.

• Start: элемент может прокручиваться до начала ScrollView

• Center: элемент может прокручиваться до центра ScrollView

• End: элемент может прокручиваться до конца ScrollView

Применим первую версию

namespace HelloApp
{
    class StartPage : ContentPage
    {
        ScrollView scrollView = new ScrollView();

        public StartPage()
        {
            StackLayout stackLayout = new StackLayout { Padding = 20 };
            Label textLabel = new Label
            {
                FontSize = 18,
                Text = "«Мой дядя самых честных правил...."
            };

            Button button = new Button { Text = "В начало" };
            button.Clicked += Button_Clicked;
            stackLayout.Add(textLabel);
            stackLayout.Add(button);

            scrollView.Content = stackLayout;

            Content = scrollView;
        }

        private async void Button_Clicked(object sender, EventArgs e)
        {
            await scrollView.ScrollToAsync(0, 20, true);
        }
    }
}

Здесь метод ScrollToAsync по нажатию на кнопку переходит к точке с x=0 и y=20