Страницы приложения .NET MAUI. Класс Page

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

Класс Page

Класс Page в основном выступает в качестве базового класса для более полезных производных типов. Так, например, мы, при изучении различных элементов управления в .NET MAUI использовали один из производных от Page классов страниц — ContentPage:

<?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="MauiApp7.MainPage">
</ContentPage>

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

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

Рассмотрим основные свойства класса Page, которые мы будем в дальнейшем использовать в работе (часть из этих свойств унаследованы от класса VisualElement):

Часть из этих свойств мы будем подробно изучать в других частях руководства, например, свойства Behaviors и Triggers, а с некоторыми из представленных выше свойств мы можем познакомиться сейчас. Например, создадим новое приложение .NET MAUI и изменим код страницы MainPage.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="MauiApp7.MainPage"
             Title="Главная страница"
             Background="Coral"
             Padding="20">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Кнопка 1"/>
        <ToolbarItem Text="Кнопка 2"/>
        <ToolbarItem Text="Кнопка 3"/>
    </ContentPage.ToolbarItems>

    <Button Text="Пример элемента управления"/>

</ContentPage>

Здесь мы установили цвет фона страницы, определили её заголовок, внутренние отступы, а также воспользовались свойством ToolbarItems и разместили на панели управления три кнопки (пока без каких-либо обработчиков). Теперь, если запустить приложение, то мы увидим следующую страницу приложения:

События класса Page

Также класс Page предоставляет нам достаточно много различных событий, используя которые мы можем выполнять какую-либо полезную работу, например, при загрузке страницы, переходе со страницы на страницу и так далее. Опять же, с частью этих событий мы познакомимся далее, но стоит отметить такое часто используемое событие:

public event EventHandler Appearing;

Это событие генерируется, когда страница становится видимой на экране устройства и может использоваться, например, для подготовки каких-либо данных. В качестве примера, допишем XAML-код страницы MainPage.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="MauiApp7.MainPage"
             Title="Главная страница"
             Background="Coral"
             Padding="20"
             Appearing="ContentPage_Appearing">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Кнопка 1" x:Name="ToolButton"/>
        <ToolbarItem Text="Кнопка 2"/>
        <ToolbarItem Text="Кнопка 3"/>
    </ContentPage.ToolbarItems>

    <Button Text="Пример элемента управления"/>

</ContentPage>

Здесь мы определили обработчик события Appearing страницы, а также тег x:Name для первой кнопки в панели управления. Теперь изменим файл отдельного кода MainPage.xaml.cs следующим образом:

namespace MauiApp7
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void ContentPage_Appearing(object sender, EventArgs e)
        {
            ToolButton.Clicked += Click;
        }

        public void Click(object sender, EventArgs e)
        {
            Background = Color.FromRgb(255, 0, 0);
        }
    }
}

Здесь мы создали обработчик события Click для кнопки, в котором меняем цвет фона страницы:

public void Click(object sender, EventArgs e)
{
    Background = Color.FromRgb(255, 0, 0);
}

и в обработчике ContentPage_Appearing назначаем кнопке с x:Name="ToolButton" созданный обработчик:

private void ContentPage_Appearing(object sender, EventArgs e)
{
    ToolButton.Clicked += Click;
}

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

Таким образом, обработчик события для кнопки назначается именно в момент отображения страницы на экране. Аналогичным образом, используя событие Appearing, мы могли бы выполнять и другую работу приложения.

Противоположным событием является событие

public event EventHandler Disappearing;

которое генерируется в тот момент, когда страница визуально исчезает с экрана.

Методы класса Page. Диалоговые окна

Среди множества методов класса Page стоит выделить методы, позволяющие отображать на экране устройства различные диалоговые окна. Рассмотрим эти методы более подробно.

DisplayActionSheet

public Task<string> DisplayActionSheet(string title, string cancel, string destruction, params string[] buttons);

Метод позволяет вывести на экран диалоговое окно в котором пользователь может сделать выбор из нескольких действий. Параметры метода:

• title — заголовок окна
• cancel — текст для кнопки отмены (для скрытия кнопки необходимо указать null)
• destruction — текст для кнопки удаления (для скрытия кнопки необходимо указать null).
• buttons — текстовые метки для дополнительных кнопок

В качестве результата метод возвращает текст нажатой пользователем кнопки. В качестве примера, продолжим работу над нашим приложением и изменим обработчик Click кнопки следующим образом:

public async void Click(object sender, EventArgs e)
{
    var result = await DisplayActionSheet("Выберите цвет фона", "Отмена", null, ["Красный", "Зеленый", "Синий"]);

    switch (result)
    {
        case "Красный": 
            {
                Background = Color.FromRgb(255, 0, 0);
                break;
            }
        case "Зеленый":
            {
                Background = Color.FromRgb(0, 255, 0);
                break;
            }
        case "Синий":
            {
                Background = Color.FromRgb(0, 0, 255);
                break;
            }
    }
}

Здесь мы вызываем с помощью метода DisplayActionSheet() диалоговое окно, в котором предлагаем пользователю выбрать цвет фона страницы или отменить действие. Запустим приложение и проверим результат. Вызов диалогового окна при клике по кнопке:

После выбора одного из действий:

Метод DisplayAlert

public Task<bool> DisplayAlert(string title, string message, string accept, string cancel);

Метод выводит диалоговое окно с каким-либо сообщением и двумя кнопками «Принять» и «Отмена». Параметры метода следующие:

• title — заголовок окна
• message — сообщение пользователю
• accept — текст кнопки «Принять»
• cancel — текст кнопки «Отмена»

Результатом выполнения метода является значение bool, которое указывает принял ли пользователь сообщение (true) или нажал кнопку «Отмена» (false).  Используем этот метод в нашем приложении, изменив метод Click() следующим образом:

public async void Click(object sender, EventArgs e)
{
    var result = await DisplayAlert("Вопрос", "Изменить цвет фона страницы на зеленый?", "Да", "Нет");
    if (result)
    {
        Background = Color.FromRgb(0, 255, 0);
    }
}

Запустим приложение и проверим результат:

Если нажать кнопку «Да», то цвет фона страницы изменится и станет как на рисунке выше. Если вам необходимо просто уведомить пользователя о чем-то, то можно использовать переопределенную версию метода в которой отсутствует параметр accept.

Метод DisplayPromptAsync

public Task<string> DisplayPromptAsync(string title, string message, string accept = "OK", string cancel = "Cancel", string placeholder = default, int maxLength = -1, Keyboard keyboard = default, string initialValue = "");

Этот метод позволяет вывести на экран диалоговое окно в котором пользователь должен ввести некоторое значение. Параметры метода следующие:

• title — заголовок окна
• message — сообщение пользователю
• accept — текст кнопки «Принять»
• cancel — текст кнопки «Отмена»
• placeholder — строка-«заменитель», которая показывается в текстовом поле, когда оно не содержит никакого значения
• maxLength — максимально допустимая длина вводимого пользователем текста
• Keyboard — клавиатура, которая будет показана пользователю (если приложение запускается, например, в Android)
• initialValue — начальное значение в поле ввода

Результатом выполнения метода будет введенное пользователем значение. Если пользователь нажмет кнопку «Отмена», то результатом метода будет null. Например,

public async void Click(object sender, EventArgs e)
{
    var result = await DisplayPromptAsync("Вопрос", "Напишите \"Да\", если хотите изменить цвет фона на красный");
    if ((result != null) && (result.ToUpper()=="ДА" ))
    {
        Background = Color.FromRgb(255, 0, 0);
    }
}

Теперь, чтобы сменить цвет фона нам необходимо ввести строку:

Итого

Класс Page является базовым для прочих страниц приложения и, при этом, предоставляет нам достаточно много разнообразных свойств, событий и методов для работы. Так, в классе Page определены методы для вывода диалоговых окон, события, генерируемые при визуальном отображении страницы на экране и так далее.