Преимущества использования XAML
XAML — это язык разметки, который можно использовать для создания пользовательского интерфейса вместо кода C#. С помощью XAML можно разделить код пользовательского интерфейса и код поведения, чтобы ими было проще управлять.
В этом уроке вы сравните код XAML с определением макета пользовательского интерфейса с помощью кода C#. Вы также узнаете о некоторых преимуществах использования XAML в качестве языка разметки для определения пользовательского интерфейса.
Что такое язык разметки?
Язык разметки — это язык, который можно использовать для представления различных элементов в документе. Вы описываете элементы с помощью стандартных тегов. Теги имеют определенные значения в контексте домена, в котором используется документ.
Например, с помощью языка HTML можно создать веб-страницу, которая отображается в веб-браузере. Вам не нужно понимать все теги, которые мы используем в следующем примере; Важно видеть, что этот код описывает документ с текстом "Hello World!" в качестве его содержимого.
<!DOCTYPE html>
<html>
<body>
<p>Hello <b>World</b>!</p>
</body>
</html>
Вы, скорее всего, уже работали с языком разметки. Возможно, вы создали веб-страницу с помощью HTML-кода или могли изменить определения расширяемого языка разметки (XML) в файле project.csproj Visual Studio. Средства сборки Майкрософт анализируют и обрабатывают этот файл.
Обычно файлы, содержащие язык разметки, обрабатываются и интерпретируются другими инструментами программного обеспечения. Этот интерпретативный характер разметки и составляет суть XAML. Однако средства программного обеспечения, которые интерпретируют его, помогают создать пользовательский интерфейс приложения.
Что это такое XAML?
XAML — это декларативный язык разметки от Майкрософт. XAML был разработан для упрощения процесса создания пользовательского интерфейса в приложениях.
Создаваемые документы XAML содержат элементы, декларативно описывающие элементы пользовательского интерфейса приложения. Имейте в виду, что эти элементы в XAML напрямую представляют создание экземпляров объектов. Определив элемент в XAML, вы можете получить доступ к нему в файлах программной части и определить поведение с помощью кода C#.
Разница между .NET MAUI XAML и Microsoft XAML
XAML базируется на спецификации XAML Microsoft 2009. Однако эта спецификация определяет только синтаксис языка. Как и в Windows Presentation Foundation (WPF), Universal Windows Platform (UWP) и WinUI 3, каждая из которых использует XAML, элементы, которые в XAML вы помечаете «объявлениями», будут меняться.
XAML впервые появился в 2006 году с WPF. Если вы работали с Microsoft XAML какое-то время, синтаксис XAML должен выглядеть знакомо.
Существует несколько существенных различий между XAML, используемым в .NET MAUI и XAML, используемым другими средствами пользовательского интерфейса. Структура и понятия аналогичны, но некоторые имена классов и свойств отличаются.
Создание пользовательского интерфейса с помощью XAML в .NET MAUI
Лучший способ увидеть XAML в действии — просмотреть пример существующего типа закодированных ContentPage страниц C#. Таким образом мы можем сравнить его с другим типом страницы, имеющим такой же пользовательский интерфейс, но созданный с помощью XAML.
Предположим, вы закодировали ContentPage следующее в приложении:
namespace MauiCode;
public partial class MainPage : ContentPage
{
Button loginButton;
VerticalStackLayout layout;
public MainPage()
{
this.BackgroundColor = Color.FromArgb("512bdf");
layout = new VerticalStackLayout
{
Margin = new Thickness(15, 15, 15, 15),
Padding = new Thickness(30, 60, 30, 30),
Children =
{
new Label { Text = "Please log in", FontSize = 30, TextColor = Color.FromRgb(255, 255, 100) },
new Label { Text = "Username", TextColor = Color.FromRgb(255, 255, 255) },
new Entry (),
new Label { Text = "Password", TextColor = Color.FromRgb(255, 255, 255) },
new Entry { IsPassword = true }
}
};
loginButton = new Button { Text = "Login", BackgroundColor = Color.FromRgb(0, 148, 255) };
layout.Children.Add(loginButton);
Content = layout;
loginButton.Clicked += (sender, e) =>
{
Debug.WriteLine("Clicked !");
};
}
}
Страница содержит контейнер макета, две метки, две записи и одну кнопку. Код также управляет событием Clicked для кнопки. Кроме того, существует только несколько свойств дизайна, заданных для элементов на странице. На устройстве Android во время выполнения кода страница выглядит следующим образом:
Несмотря на то, что у страницы простой вид, она представляет собой комбинацию элементов реакции на событие и элементов дизайна, собранных в одном файле.
Тот же самый макет страницы, определенный с помощью XAML, выглядит следующим образом:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiXaml.Page1"
BackgroundColor="#512bdf">
<VerticalStackLayout Margin="15" Padding="30, 60, 30, 30">
<Label Text="Please log in" FontSize="30" TextColor="AntiqueWhite"/>
<Label Text="Username" TextColor="White" />
<Entry />
<Label Text="Password" TextColor="White" />
<Entry IsPassword="True" />
<Button Text="Log in" BackgroundColor="#0094FF" Clicked="LoginButton_Clicked" />
</VerticalStackLayout>
</ContentPage>
Код C#, который инициализирует страницу и применяет обработчик событий для события по щелчку Clicked в элементе управленияLoginButton, который находится в файле кода программной части, выглядит следующим образом:
namespace MauiXaml;
public partial class Page1 : ContentPage, IPage
{
public Page1()
{
InitializeComponent();
}
void LoginButton_Clicked(object sender, EventArgs e)
{
Debug.WriteLine("Clicked !");
}
}
Примечание.
Метод InitializeComponent в конструкторе страниц считывает описание XAML страницы, загружает различные элементы управления этой страницы и задает их свойства. Этот метод вызывается только при определении страницы с помощью разметки XAML. В предыдущем примере, показывающем как создать пользовательский интерфейс с помощью кода C# метод InitializeComponent вызвать нельзя.
Данная структура позволяет разделять дизайн и реакцию на событие. Все объявление пользовательского интерфейса содержится в одном выделенном исходном файле, который отличается от поведения пользовательского интерфейса. Кроме того, разметка XAML обеспечивает большую ясность для разработчика, пытающегося понять внешний вид и чувство приложения.
Преимущества использования XAML
Использование XAML позволяет отделять логику поведения от конструктора пользовательского интерфейса. Это разделение помогает создавать каждый элемент независимо друг от друга и упрощает управление всем приложением по мере роста.
Этот подход также позволяет специалисту конструктору пользовательского интерфейса работать над обновлением внешнего вида и чувства пользовательского интерфейса с помощью средств редактирования XAML отдельно от разработчика, обновляя логику пользовательского интерфейса.