Предыдущий

Следующая

Добавление визуальных элементов управления в приложение .NET MAUI

Завершено

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

В этом уроке вы узнаете больше о стандартных блоках приложения .NET MAUI и структурах навигации.

Что представляет собой проект .NET MAUI?

Напомним, что проект .NET MAUI изначально содержит:

• Файл MauiProgram.cs, содержащий код создания и настройки объекта Application.

• Файлы App.xaml и App.xaml.cs, содержащие ресурсы пользовательского интерфейса и создающие начальное окно приложения.

• Файлы AppShell.xaml и AppShell.xaml.cs, которые указывают начальную страницу приложения и обрабатывают регистрацию страниц для маршрутизации навигации.

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

Вы можете добавить дополнительные страницы в приложение по мере необходимости, и вы можете создать дополнительные классы для реализации бизнес-логики, необходимой приложению.

Проект .NET MAUI также содержит стандартный набор ресурсов приложения, таких как изображения, значки и шрифты, а также стандартный код начальной загрузки приложения для каждой платформы.

Класс Application

Класс App описывает приложение .NET MAUI в целом. Он наследует набор реакций на события по умолчанию от класса Microsoft.Maui.Controls.Application. Помните из предыдущего урока, что это App класс, который код начальной загрузки создает и загружает для каждой платформы. Конструктор App классов, в свою очередь, создает экземпляр AppShell класса и назначает его свойству MainPage . Это код, который управляет первым экраном, который пользователь видит через то, что определено в AppShell.

Класс App также содержит:

• Методы обработки событий жизненного цикла, включая отправку приложения в фон (то есть, когда оно перестает быть приложением переднего плана).

• Методы создания новых объектов Windows для приложения. Приложение .NET MAUI имеет одно окно по умолчанию, но вы можете создать и запустить дополнительные окна, которые полезны в классических и планшетных приложениях.

Shell

Оболочка .NET Multi-Platform App UI (.NET MAUI) упрощает разработку приложений, предоставляя основные функции, необходимые большинству приложений, в том числе:

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

В приложении оболочки .NET MAUI оболочки визуальной иерархии приложения описывается в классе, который подклассирует класс Shell. Этот класс может состоять из трех основных иерархических объектов:

• FlyoutItem или TabBar. Элемент FlyoutItem представляет один или несколько элементов во всплывающем элементе и должен использоваться, когда шаблон навигации для приложения требует всплывающего элемента. Представляет TabBar нижнюю панель вкладок и следует использовать, когда шаблон навигации для приложения начинается с нижних вкладок и не требует всплывающего меню.
• Tab представляет сгруппированное содержимое с навигацией по нижним вкладкам.
• ShellContent, представляющий объекты ContentPage для каждой вкладки.

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

Страницы

Страницы — корневой элемент иерархии пользовательского интерфейса в .NET MAUI внутри Shell. Решение, которое вы уже рассмотрели, содержало класс с именем MainPage. Этот класс является производным от ContentPage, который является самым простым и распространенным типом страницы. Страница содержимого просто отображает свое содержимое. .NET MAUI также имеет несколько других встроенных типов страниц, включая следующие:

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

• FlyoutPage: эта страница позволяет реализовать представление вида "основные и подробные сведения". Всплывающая страница содержит список элементов. При выборе элемента отображается представление с подробными сведениями об этом элементе.

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

Представления

На странице содержимого обычно отображается то или иное представление. Представление позволяет извлекать и представлять данные определенным образом. Представление по умолчанию для страницы содержимого — ContentView; оно отображает элементы как есть. Если вы сжимаете представление, элементы могут исчезать с экрана, пока не измените размер представления. Позволяет ScrollView отображать элементы в окне прокрутки. Если сжать окно, можно прокрутить его вверх и вниз, чтобы отобразить элементы. CarouselView — это представление с прокруткой, позволяющее пользователю пролистывать набор элементов. Представление CollectionView может извлекать данные из именованного источника данных и представлять каждый элемент, используя шаблон в качестве формата. Доступны и другие типы представлений.

Элементы управления и макеты

Представление может содержать элементы управления, например кнопку, метку или текстовые поля. (Строго говоря, представление является элементом управления, поэтому представление может содержать другое представление.) Однако пользовательский интерфейс, ограниченный одним элементом управления, не будет очень полезным, поэтому элементы управления размещаются в макете. Макет определяет правила, по которым элементы управления отображаются относительно друг друга. Макет также является элементом управления, поэтому его можно добавить в представление. Если взглянуть на стандартный файл MainPage.xaml, там можно увидеть в действии всю эту иерархию страниц, представлений, макетов и элементов управления. В этом коде VerticalStackLayout XAML элемент — это просто другой элемент управления, позволяющий точно настроить макет других элементов управления.

<ContentPage ...>
    <ScrollView ...>
        <VerticalStackLayout>
            <Image ... />
            <Label ... />
            <Label ... />
            <Button ... />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Ниже приведены некоторые распространенные элементы управления, используемые для определения макетов.

• VerticalStackLayout и HorizontalStackLayout, которые оптимизированы для макетов стека, которые размещают элементы управления в верхнем или нижнем или левом стеке справа. Также доступен объект StackLayout , имеющий свойство с именем StackOrientation , которому можно задать Horizontal или Vertical. На планшете или телефоне изменение этого свойства в коде приложения позволяет регулировать отображение содержимого экрана в случае, когда пользователь поворачивает устройство:

  

• AbsoluteLayout — позволяет задать точные координаты элементов управления.

• FlexLayout аналогичен StackLayout, за исключением того, что позволяет переносить содержащиеся в нем дочерние элементы управления в случае, если они не помещаются в одну строку или столбец. Этот макет также предоставляет параметры выравнивания и адаптации к разным размерам экрана. Например, FlexLayout элемент управления может выровнять дочерний элемент управления слева, справа или в центре при вертикальном расположении. При выравнивании по горизонтали можно оправдать элементы управления, чтобы обеспечить даже интервалы. Для отображения горизонтально прокручиваемой серии кадров можно использовать горизонтальный макет FlexLayout внутри представления ScrollView (каждый кадр в свою очередь сам может быть вертикально расположенным элементом FlexLayout):

  

• Grid — размещает свои элементы управления в соответствии с заданным расположением столбцов и строк. Вы можете определить размеры строк и столбцов, а также интервалы, поэтому макеты таблиц необязательно должны выглядеть как "шахматная доска".

На следующем рисунке приведены основные атрибуты этих распространенных типов макетов:

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

Все элементы управления имеют свойства. Начальные значения этих свойств можно задать с помощью XAML. Во многих случаях эти свойства можно изменить в C#-коде приложения. Например, код, обрабатывающий событие Clicked для кнопки с надписью Нажми меня, в стандартном приложении .NET MAUI выглядит следующим образом:

int count = 0;
private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Этот код изменяет свойство Text элемента управления CounterBtn на этой странице. В коде вы можете создавать даже целые страницы, представления и макеты, не используя XAML. Давайте рассмотрим, например, следующее XAML-определение страницы:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Phoneword.MainPage">

    <ScrollView>
        <VerticalStackLayout>
            <Label Text="Current count: 0"
                Grid.Row="0"
                FontSize="18"
                FontAttributes="Bold"
                x:Name="CounterLabel"
                HorizontalOptions="Center" />

            <Button Text="Click me"
                Grid.Row="1"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Эквивалентный код на C# выглядит следующим образом:

public partial class TestPage : ContentPage
{
    int count = 0;
    
    // Named Label - declared as a member of the class
    Label counterLabel;

    public TestPage()
    {       
        var myScrollView = new ScrollView();

        var myStackLayout = new VerticalStackLayout();
        myScrollView.Content = myStackLayout;

        counterLabel = new Label
        {
            Text = "Current count: 0",
            FontSize = 18,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(counterLabel);
        
        var myButton = new Button
        {
            Text = "Click me",
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(myButton);

        myButton.Clicked += OnCounterClicked;

        this.Content = myScrollView;
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;
        counterLabel.Text = $"Current count: {count}";

        SemanticScreenReader.Announce(counterLabel.Text);
    }
}

Код C# более подробный, но обеспечивает дополнительную гибкость, которая позволяет динамически адаптировать пользовательский интерфейс.

Чтобы отобразить эту страницу при запуске приложения, задайте класс TestPage в AppShell качестве основного класса ShellContent:

<ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:TestPage}"
        Route="TestPage" />

Настройка макета

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

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

Еще один полезный параметр для управления свободным пространством — это свойство Spacing макета VerticalStackLayout или HorizontalStackLayout. Это пространство между всеми дочерними элементами макета. Оно дополняет собственное поле элемента управления, так что фактический размер свободного пространства будет равен размеру самого поля плюс указанный интервал.

Проверка знаний

1.

Какой из них не является типом макета в .NET MAUI?

DockableLayout

AbsoluteLayout

StackLayout

Сетка

2.

Какой класс используется для создания экрана в .NET MAUI?

Экран

Стр.

ContentView

Сетка

Вы должны ответить на все вопросы перед проверкой.

Продолжить