Поделиться через

Руководство. Создание приложения .NET MAUI с помощью разметки C# и сообщества набор средств

  • Статья

Создайте приложение .NET MAUI с пользовательским интерфейсом, созданным без XAML, с помощью разметки C# из набор средств сообщества .NET MAUI.

Введение

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

Настройка среды

Если вы еще не настроили среду для разработки .NET MAUI, выполните действия, описанные в статье " Начало работы с .NET MAUI в Windows".

Создание проекта .NET MAUI

Примечание.

Если вы уже знакомы с настройкой проекта .NET MAUI, перейдите к следующему разделу.

Запустите Visual Studio и в окне запуска нажмите кнопку "Создать проект ", чтобы создать новый проект.

В окне "Создание проекта" выберите MAUI в раскрывающемся списке "Все типы проектов", выберите шаблон приложения .NET MAUI и нажмите кнопку "Далее":

.NET MAUI App template.

Затем на экране "Настройка нового проекта " укажите имя проекта, выберите расположение и нажмите кнопку "Далее ".

На последнем экране нажмите кнопку "Создать".

Дождитесь создания проекта и восстановления его зависимостей.

На панели инструментов Visual Studio нажмите кнопку "Компьютер Windows", чтобы создать и запустить приложение. Нажмите кнопку "Щелкните меня " и убедитесь, что содержимое кнопки обновляется с количеством щелчков.

Теперь, когда вы убедились, что приложение .NET MAUI в Windows работает должным образом, мы можем интегрировать пакеты MVVM набор средств и разметки C#. В следующем разделе вы добавите эти пакеты в новый проект.

Добавление разметки C# из набор средств сообщества .NET MAUI

Теперь, когда у вас есть приложение .NET MAUI, работающее в Windows, мы добавим в проект несколько пакетов NuGet для интеграции с MVVM набор средств и разметкой C# из набор средств сообщества .NET MAUI.

Щелкните проект правой кнопкой мыши в Обозреватель решений и выберите пункт "Управление пакетами NuGet..." в контекстном меню.

В окне диспетчер пакетов NuGet откройте вкладку "Обзор" и найдите сообщество набор средств. MVVM:

CommunityToolkit.MVVM package.

Добавьте последнюю стабильную версию сообщества набор средств. Пакет MVVM в проект, нажав кнопку "Установить".

Затем выполните поиск сообщества набор средств. Мауи:

CommunityToolkit.Maui packages.

Добавьте последнюю стабильную версию сообщества набор средств. Пакет Maui.Markup в проект, нажав кнопку "Установить".

Закройте окно диспетчер пакетов NuGet после завершения установки новых пакетов.

Добавление ViewModel в проект

Мы добавим простую реализацию Model-View-ViewModel (MVVM) с набор средств MVVM. Начнем с создания модели представления для связывания с нашим представлением (MainPage). Снова щелкните проект правой кнопкой мыши и нажмите кнопку "Добавить" | Класс из контекстного меню.

В появившемся окне "Добавить новый элемент" назовите класс MainViewModel и нажмите кнопку "Добавить".

Adding a MainViewModel class to the project.

Мы собираемся использовать силу MVVM набор средств.MainViewModel Замените содержимое класса следующим кодом:

using CommunityToolkit.Mvvm.ComponentModel;
using System.ComponentModel;
using System.Diagnostics;

namespace MauiMarkupSample
{
    [INotifyPropertyChanged]
    public partial class MainViewModel
    {
        [ObservableProperty]
        private string name;
        partial void OnNameChanging(string value)
        {
            Debug.WriteLine($"Name is about to change to {value}");
        }
        partial void OnNameChanged(string value)
        {
            Debug.WriteLine($"Name has changed to {value}");
        }
    }
}

Если вы завершили сборку первого приложения MAUI для .NET для Windows , вы узнаете, что делает приведенный выше код. Класс MainViewModel украшен INotifyPropertyChanged атрибутом, который позволяет MVVM набор средств создавать INotifyPropertyChanged реализацию для класса. partial class Маркировка MainViewModel как требуется для работы генератора источников .NET. Атрибут ObservableProperty в name частном поле добавит Name свойство для класса с правильной INotifyPropertyChanged реализацией в созданном частичном классе. Добавление и OnNameChanged частичные OnNameChanging методы являются необязательными, но позволяет добавлять пользовательскую логику при Name изменении или изменении свойства.

Создание пользовательского интерфейса с помощью разметки C#

При создании пользовательского интерфейса с помощью разметки C# сначала необходимо обновить CreateMauiApp() метод в MauiProgram.cs. Замените содержимое метода следующим кодом:

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();

    builder
        .UseMauiApp<App>()
        .UseMauiCommunityToolkitMarkup();

    return builder.Build();
}

Кроме того, необходимо добавить новую using инструкцию в верхнюю часть файла: using CommunityToolkit.Maui.Markup; Вызов UseMauiCommunityToolkitMarkup() добавит поддержку разметки C# в приложение, что позволяет создавать пользовательский интерфейс с помощью кода C# вместо XAML.

Файл MainPage.xaml больше не будет использоваться при отрисовке пользовательского интерфейса, чтобы удалить содержимое файла 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="MauiMarkupSample.MainPage">
</ContentPage>

В MainPage.xaml.cs удалите обработчик событий click и добавьте три частных члена в класс:

private readonly MainViewModel ViewModel = new();
private enum Row { TextEntry }
private enum Column { Description, Input }

Свойство ViewModel создаст экземпляр MainViewModel класса, который будет использоваться при привязке данных к пользовательскому интерфейсу. Column Перечисления Row будут использоваться для определения макета пользовательского интерфейса с помощью разметки C#. Это простой пользовательский интерфейс с одной строкой и двумя столбцами, которые мы определим на следующем шаге.

Так как элементы пользовательского интерфейса будут определены в коде C#, InitializeComponent() метод не потребуется. Удалите вызов и замените его следующим кодом, чтобы создать пользовательский интерфейс:

public MainPage()
{
    Content = new Grid
    {
        RowDefinitions = Rows.Define(
            (Row.TextEntry, 36)),

        ColumnDefinitions = Columns.Define(
            (Column.Description, Star),
            (Column.Input, Stars(2))),

        Children =
        {
            new Label()
                .Text("Customer name:")
                .Row(Row.TextEntry).Column(Column.Description),

            new Entry
            {
                Keyboard = Keyboard.Numeric,
                BackgroundColor = Colors.AliceBlue,
            }.Row(Row.TextEntry).Column(Column.Input)
                .FontSize(15)
                .Placeholder("Enter name")
                .TextColor(Colors.Black)
                .Height(44)
                .Margin(6, 6)
                .Bind(Entry.TextProperty, nameof(ViewModel.Name), BindingMode.TwoWay)
        }
    };
}

Новый код в конструкторе MainPage использует разметку C# для определения пользовательского интерфейса. Для страницы задано Content значение AGrid. Наша новая сетка определяет строку с высотой 36 пикселей и двумя столбцами с их шириной, определенной с помощью значений Star , а не абсолютных значений пикселей. Столбец Input всегда будет в два раза больше ширины столбца Description . Эквивалентным xaml для этих определений будет:

<Grid.RowDefinitions>
    <RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>

Остальная часть кода для создания сетки добавляет два Children, а Label и .Entry Свойства Textи Column свойства задаются в элементе Label и Entry создаются со следующими Rowсвойствами:

Свойство Значение Описание
Row Row.TextEntry Определяет номер строки.
Column Column.Input Определяет номер столбца.
FontSize 15 Задает размер шрифта.
Placeholder "Enter name" Задает текст заполнителя, отображаемый при пустом элементе.
TextColor Colors.Black Задает цвет текста.
Height 44 Задает высоту элемента.
Margin 6, 6 Определяет поле вокруг элемента.
Bind Entry.TextProperty, nameof(ViewModel.Name), BindingMode.TwoWay Привязывает Text свойство элемента к Name свойству модели представления с помощью двусторонней привязки данных.

Эквивалентом XAML для определения этих дочерних элементов будет следующее:

<Label Text="Customer name:"
       Grid.Row="0" Grid.Column="0" />
<Entry Grid.Row="1" Grid.Column="0"
       FontSize="15"
       Placeholder="Enter name"
       HeightRequest="44"
       Margin="6, 6"
       Text="{Binding Path=ViewModel.Name, Mode=TwoWay}" />

Возможно, вы заметили, что TextColor свойство не задано в разметке выше. TextColor Для настройки элемента управления требуется настройка пользовательского стиля. Дополнительные сведения об использовании стилей в .NET MAUI см. в разделе "Стили приложений с помощью XAML". Это один из примеров, когда параметры свойств в разметке C# можно упростить, чем эквивалентный XAML. Однако использование стилей в добавлении простоты повторного использования и наследования.

Теперь вы готовы запустить приложение. Нажмите клавишу F5 для сборки и запуска проекта. Приложение должно выглядеть следующим образом:

Run your .NET MAUI C# Markup app.

Теперь вы создали первое приложение разметки C# в Windows с помощью .NET MAUI. Дополнительные сведения о том, что можно сделать с помощью разметки C#, см . в документации по разметке C#.

Ресурсы для обучения .NET MAUI

Документация по набор средств сообщества .NET MAUI

Документация по разметке C#