Fordeler ved å bruke XAML
- 5 minutter
XAML er et markeringsspråk som du kan bruke til å bygge brukergrensesnittet i stedet for C#-kode. Ved hjelp av XAML kan du dele opp brukergrensesnittet og virkemåtekoden for å gjøre begge deler enklere å administrere.
I denne enheten sammenligner du bruk av XAML med å definere grensesnittoppsettet ved hjelp av C#-kode. Du vil også lære om noen av fordelene ved å bruke XAML som et markeringsspråk for å definere brukergrensesnittet.
Hva er et markeringsspråk?
Et markeringsspråk er et datamaskinspråk som du kan bruke til å introdusere ulike elementer i et dokument. Du beskriver elementer ved hjelp av forhåndsdefinerte koder. Kodene har spesifikke betydninger i konteksten til domenet der dokumentet brukes.
Du kan for eksempel bruke Hypertext Markup Language (HTML) til å opprette en nettside som du kan vise i en nettleser. Du trenger ikke å forstå alle kodene vi bruker i eksemplet nedenfor. Det som er viktig å se, er at denne koden beskriver et dokument som har teksten «Hello World!» som innhold.
<!DOCTYPE html>
<html>
<body>
<p>Hello <b>World</b>!</p>
</body>
</html>
Du har sannsynligvis allerede jobbet med et markeringsspråk. Du kan ha opprettet en nettside ved hjelp av HTML, eller du kan ha endret XML-definisjonene (Extensible Markup Language) i en Visual Studio project.csproj-fil. Microsoft-byggverktøyene analyserer og behandler denne filen.
Det er vanlig at filer som inneholder markeringsspråk, behandles og tolkes av andre programvareverktøy. Denne tolkende karakteren av markering er nøyaktig hvordan XAML er ment å fungere. Programvareverktøyene som tolker det, bidrar imidlertid til å generere brukergrensesnittet for apper.
Hva er XAML?
XAML er et deklarativt markeringsspråk opprettet av Microsoft. XAML ble utformet for å forenkle prosessen med å opprette brukergrensesnittet i programmer.
XAML-dokumentene du oppretter, inneholder elementer som deklarativt beskriver programmets grensesnittelementer. Husk at disse elementene i XAML direkte representerer forekomster av objekter. Når du har definert et element i XAML, kan du få tilgang til det i kode-bak-filer og definere virkemåte ved hjelp av C#-kode.
Forskjellen mellom .NET MAUI XAML og Microsoft XAML
XAML er basert på Microsoft 2009 XAML-spesifikasjonen. Denne spesifikasjonen definerer imidlertid bare språksyntaksen. Som med Windows Presentation Foundation (WPF), Universal Windows Platform (UWP) og WinUI 3, som alle bruker XAML, endres elementene du erklærer i XAML.
XAML dukket først opp i 2006 med WPF. Hvis du har jobbet med Microsoft XAML en stund, bør XAML-syntaksen se kjent ut.
Det er noen viktige forskjeller mellom .NET MAUI-smaken av XAML og XAML som brukes av andre grensesnittverktøy. Strukturen og konseptene er like, men noen av navnene på klassene og egenskapene er forskjellige.
Opprette et brukergrensesnitt ved hjelp av .NET MAUI XAML
Den beste måten å se XAML i aksjon på, er å se på et eksempel på en eksisterende C#-kodet ContentPage sidetype. Du kan deretter sammenligne den med en annen side som har samme brukergrensesnitt definert ved hjelp av XAML.
La oss si at du har følgende kodede ContentPage i appen:
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 !");
};
}
}
Siden inneholder en oppsettbeholder, to etiketter, to oppføringer og en knapp. Koden håndterer også Clicked hendelsen for knappen. Det er også bare noen få utformingsegenskaper som er angitt på elementene på siden. På kjøretid, på en Android-enhet, ser siden slik ut:
Selv om siden har en enkel utforming, er det en blanding av virkemåte og utforming i samme fil.
Det samme sideoppsettet som er definert ved hjelp av XAML, ser slik ut:
<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 initialiserer siden og implementerer hendelsesbehandlingen for Clicked hendelsen i LoginButton-kontrollen i den kodede filen, ser slik ut:
namespace MauiXaml;
public partial class Page1 : ContentPage, IPage
{
public Page1()
{
InitializeComponent();
}
void LoginButton_Clicked(object sender, EventArgs e)
{
Debug.WriteLine("Clicked !");
}
}
Notat
Den InitializeComponent metoden i sidekonstruktøren leser sidens XAML-beskrivelse, laster inn sidens ulike kontroller og angir egenskapene. Du kaller bare denne metoden hvis du definerer en side ved hjelp av XAML-markering. Det forrige eksemplet som viser hvordan du oppretter brukergrensesnittet ved hjelp av C#-kode, aktiveres ikke InitializeComponent.
Denne strukturen gjør det mulig å skille utforming og virkemåte. Hele brukergrensesnittets deklarasjon finnes i én dedikert kildefil, som er atskilt fra brukergrensesnittets virkemåte. I tillegg gir XAML-markeringen større klarhet for en utvikler som prøver å forstå programmets utseende og funksjonalitet.
Fordeler ved å bruke XAML
Ved hjelp av XAML kan du skille virkemåtelogikken fra grensesnittutformingen. Denne separasjonen hjelper deg med å bygge hver del uavhengig og gjør hele appen enklere å administrere etter hvert som den vokser.
Denne fremgangsmåten gjør det også mulig for en spesialist utforming av brukergrensesnittet å arbeide med å oppdatere brukergrensesnittets utseende og funksjonalitet ved hjelp av XAML-redigeringsverktøy separat fra en utvikler som oppdaterer brukergrensesnittlogikken.