Zalety korzystania z języka XAML

XAML to język znaczników, którego można użyć do kompilowania interfejsu użytkownika zamiast kodu języka C#. Za pomocą języka XAML możesz podzielić interfejs użytkownika i kod zachowania, aby ułatwić zarządzanie nimi.

W tej lekcji porównasz język XAML z definiowaniem układu interfejsu użytkownika przy użyciu kodu języka C#. Poznasz również niektóre korzyści wynikające z używania języka XAML jako języka znaczników do definiowania interfejsu użytkownika.

Co to jest język znaczników?

Język znaczników to język komputerowy, którego można użyć do wprowadzenia różnych elementów w dokumencie. Elementy są opisywane przy użyciu wstępnie zdefiniowanych tagów. Tagi mają określone znaczenie w kontekście domeny, w której jest używany dokument.

Na przykład możesz użyć języka Hypertext Markup Language (HTML), aby utworzyć stronę internetową, którą można wyświetlić w przeglądarce internetowej. Nie musisz rozumieć wszystkich tagów używanych w poniższym przykładzie; Ważne jest, aby zobaczyć, że ten kod opisuje dokument zawierający tekst "Hello World!" jako jego zawartość.

<!DOCTYPE html>
<html>
    <body>
        <p>Hello <b>World</b>!</p>
    </body>
</html>

Prawdopodobnie znasz już język znaczników. Być może utworzono stronę internetową przy użyciu języka HTML lub zmodyfikowano definicje Extensible Markup Language (XML) w pliku project.csproj programu Visual Studio. Narzędzia kompilacji firmy Microsoft analizują i przetwarzają ten plik.

Często pliki zawierające język znaczników są przetwarzane i interpretowane przez inne narzędzia programowe. Ten interpretacyjny charakter znaczników jest dokładnie taki, jak kod XAML ma działać. Jednak narzędzia programowe, które interpretują go, pomagają wygenerować interfejs użytkownika aplikacji.

Co to jest XAML?

XAML to deklaratywny język znaczników utworzony przez firmę Microsoft. Język XAML został zaprojektowany w celu uproszczenia procesu tworzenia interfejsu użytkownika w aplikacjach.

Tworzone dokumenty XAML zawierają elementy deklaratywne opisujące elementy interfejsu użytkownika aplikacji. Należy pamiętać, że te elementy w języku XAML bezpośrednio reprezentują wystąpienie obiektów. Po zdefiniowaniu elementu w języku XAML możesz uzyskać do niego dostęp w plikach kodu i zdefiniować zachowanie przy użyciu kodu C#.

Różnica między językami XAML i Microsoft XAML na platformie .NET MAUI

Język XAML jest oparty na specyfikacji XAML platformy Microsoft 2009. Jednak ta specyfikacja definiuje tylko składnię języka. Podobnie jak w przypadku programu Windows Presentation Foundation (WPF), platforma uniwersalna systemu Windows (UWP) i WinUI 3, wszystkie z nich używają języka XAML, elementy zadeklarowane w języku XAML zostaną zmienione.

XAML pojawił się po raz pierwszy w 2006 roku z WPF. Jeśli od jakiegoś czasu pracujesz z językiem Microsoft XAML, składnia XAML powinna wyglądać znajomo.

Istnieją pewne kluczowe różnice między wersją XAML platformy .NET MAUI i XAML używanymi przez inne narzędzia interfejsu użytkownika. Struktura i pojęcia są podobne, ale niektóre nazwy klas i właściwości są różne.

Tworzenie interfejsu użytkownika za pomocą języka .NET MAUI XAML

Najlepszym sposobem na sprawdzenie kodu XAML w działaniu jest przyjrzenie się przykładowi istniejącego typu strony kodowanej ContentPage w języku C#. Następnie możesz porównać ją z inną stroną, która ma ten sam interfejs użytkownika zdefiniowany przy użyciu języka XAML.

Załóżmy, że masz następujący kod w ContentPage aplikacji:

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 !");
        };
    }
}

Strona zawiera kontener układu, dwie etykiety, dwa wpisy i przycisk. Kod obsługuje Clicked również zdarzenie dla przycisku. Istnieje również kilka właściwości projektu ustawionych na elementach na stronie. W czasie wykonywania na urządzeniu z systemem Android strona wygląda następująco:

Mimo że strona ma prosty projekt, jest to mieszanka zachowania i projektowania w tym samym pliku.

Ten sam układ strony zdefiniowany przy użyciu języka XAML wygląda następująco:

<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>

Kod języka C#, który inicjuje stronę i implementuje procedurę obsługi zdarzeń dla Clicked zdarzenia LoginButton kontrolki w pliku za pomocą kodu, wygląda następująco:

namespace MauiXaml;

public partial class Page1 : ContentPage, IPage
{
    public Page1()
    {
        InitializeComponent();
    }

    void LoginButton_Clicked(object sender, EventArgs e)
    {
        Debug.WriteLine("Clicked !");
    }
}

Ta struktura umożliwia rozdzielenie projektowania i zachowania. Cała deklaracja interfejsu użytkownika znajduje się w jednym dedykowanym pliku źródłowym, który jest oddzielony od zachowania interfejsu użytkownika. Ponadto znaczniki XAML zapewniają większą przejrzystość dla dewelopera próbującego zrozumieć wygląd i działanie aplikacji.

Zalety korzystania z języka XAML

Użycie języka XAML umożliwia oddzielenie logiki zachowania od projektu interfejsu użytkownika. Ta separacja ułatwia niezależne tworzenie poszczególnych elementów i ułatwia zarządzanie całą aplikacją w miarę jej rozwoju.

Takie podejście umożliwia również specjalistycznemu projektantowi interfejsu użytkownika pracę nad aktualizowaniem wyglądu i działania interfejsu użytkownika przy użyciu narzędzi edycji XAML niezależnie od dewelopera aktualizującego logikę interfejsu użytkownika.