Fördelar med att använda XAML

5 minuter

XAML är ett markeringsspråk som du kan använda för att skapa användargränssnittet i stället för C#-kod. Med hjälp av XAML kan du dela upp användargränssnittet och beteendekoden för att göra båda enklare att hantera.

I den här lektionen jämför du användningen av XAML med att definiera användargränssnittslayouten med hjälp av C#-kod. Du får också lära dig om några av fördelarna med att använda XAML som ett markeringsspråk för att definiera användargränssnittet.

Vad är ett påläggsspråk?

Ett påläggsspråk är ett datorspråk som du kan använda för att introducera olika element i ett dokument. Du beskriver element med fördefinierade taggar. Taggarna har specifika betydelser i kontexten för domänen där dokumentet används.

Du kan till exempel använda Hypertext Markup Language (HTML) för att skapa en webbsida som du kan visa i en webbläsare. Du behöver inte förstå alla taggar som vi använder i följande exempel. Det som är viktigt att se är att den här koden beskriver ett dokument som har texten "Hello World!" som innehåll.

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

Du har förmodligen redan arbetat med ett påläggsspråk. Du kan ha skapat en webbsida med HTML, eller så kanske du har ändrat XML-definitionerna (Extensible Markup Language) i en Visual Studio-projekt.csproj-fil. Microsofts byggverktyg parsar och bearbetar den här filen.

Det är vanligt att filer som innehåller påläggsspråk bearbetas och tolkas av andra programvaruverktyg. Den här tolkningskaraktären av markering är exakt hur XAML är avsett att fungera. De programvaruverktyg som tolkar det hjälper dock till att generera appens användargränssnitt.

Vad är XAML?

XAML är ett deklarativt påläggsspråk som skapats av Microsoft. XAML har utformats för att förenkla processen med att skapa användargränssnittet i program.

De XAML-dokument som du skapar innehåller element som deklarativt beskriver programmets gränssnittselement. Tänk på att dessa element i XAML direkt representerar instansiering av objekt. När du har definierat ett element i XAML kan du komma åt det i kod bakom filer och definiera beteende med hjälp av C#-kod.

Skillnad mellan .NET MAUI XAML och Microsoft XAML

XAML baseras på Microsoft 2009 XAML-specifikationen. Den specifikationen definierar dock endast språksyntaxen. Precis som med Windows Presentation Foundation (WPF), Universell Windows-plattform (UWP) och WinUI 3, som alla använder XAML, ändras de element som du deklarerar i XAML.

XAML dök först upp 2006 med WPF. Om du har arbetat med Microsoft XAML ett tag bör XAML-syntaxen se bekant ut.

Det finns några viktiga skillnader mellan .NET MAUI-smaken av XAML och XAML som används av andra UI-verktyg. Strukturen och begreppen är liknande, men några av namnen på klasserna och egenskaperna är olika.

Skapa ett användargränssnitt med hjälp av .NET MAUI XAML

Det bästa sättet att se XAML i praktiken är att titta på ett exempel på en befintlig C#-kodad ContentPage sidtyp. Du kan sedan jämföra den med en annan sida som har samma användargränssnitt definierat med XAML.

Anta att du har följande kodad ContentPage i din app:

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

Sidan innehåller en layoutcontainer, två etiketter, två poster och en knapp. Koden hanterar Clicked även händelsen för knappen. Det finns också bara några designegenskaper som angetts för elementen på sidan. Vid körning på en Android-enhet ser sidan ut så här:

Skärmbild av inloggningssidan som genereras av C#-koden. Den visar en rubrik, två textrutor för användarnamn och lösenord och en knapp som du vill logga in med.

Även om sidan har en enkel design är det en blandning av beteende och design i samma fil.

Samma sidlayout som definierats med XAML ser ut så här:

<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#-koden som initierar sidan och implementerar händelsehanteraren för Clicked kontrollens händelse LoginButton i filen bakom koden ser ut så här:

namespace MauiXaml;

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

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

Kommentar

Metoden InitializeComponent i sidkonstruktorn läser sidans XAML-beskrivning, läser in sidans olika kontroller och anger deras egenskaper. Du anropar bara den här metoden om du definierar en sida med XAML-markering. Det föregående exemplet som visar hur du skapar användargränssnittet med C#-kod anropar InitializeComponentinte .

Den här strukturen möjliggör separation av design och beteende. Användargränssnittets hela deklaration finns i en enda dedikerad källfil, som är separat från användargränssnittets beteende. Dessutom ger XAML-markering större klarhet för en utvecklare som försöker förstå programmets utseende och känsla.