Voordelen van het gebruik van XAML
XAML is een opmaaktaal die u kunt gebruiken om uw gebruikersinterface te bouwen in plaats van C#-code. Met XAML kunt u uw gebruikersinterface en gedragscode splitsen om beide eenvoudiger te beheren.
In deze les vergelijkt u het gebruik van XAML met het definiëren van de ui-indeling met behulp van C#-code. U krijgt ook informatie over enkele voordelen van het gebruik van XAML als opmaaktaal om uw gebruikersinterface te definiëren.
Wat is een opmaaktaal?
Een opmaaktaal is een computertaal die u kunt gebruiken om verschillende elementen in een document te introduceren. U beschrijft elementen met behulp van vooraf gedefinieerde tags. De tags hebben specifieke betekenissen in de context van het domein waarin het document wordt gebruikt.
U kunt bijvoorbeeld Hypertext Markup Language (HTML) gebruiken om een webpagina te maken die u in een webbrowser kunt weergeven. U hoeft niet alle tags te begrijpen die we in het volgende voorbeeld gebruiken. Wat belangrijk is om te zien is dat deze code een document beschrijft met de tekst 'Hallo wereld!' als inhoud.
<!DOCTYPE html>
<html>
<body>
<p>Hello <b>World</b>!</p>
</body>
</html>
U hebt waarschijnlijk al gewerkt met een opmaaktaal. Mogelijk hebt u een webpagina gemaakt met HTML of hebt u de XML-definities (Extensible Markup Language) in een Visual Studio-bestand project.csproj gewijzigd. De Microsoft-buildhulpprogramma's parseren en verwerken dit bestand.
Het is gebruikelijk dat bestanden met opmaaktaal worden verwerkt en geïnterpreteerd door andere softwarehulpprogramma's. Deze interpretatieve aard van markeringen is precies hoe XAML moet werken. De softwarehulpprogramma's die deze interpreteren, helpen echter bij het genereren van de gebruikersinterface van de app.
Wat is XAML?
XAML is een declaratieve opmaaktaal die is gemaakt door Microsoft. XAML is ontworpen om het proces van het maken van de gebruikersinterface in toepassingen te vereenvoudigen.
De XAML-documenten die u maakt, bevatten elementen die de UI-elementen van de toepassing declaratief beschrijven. Houd er rekening mee dat deze elementen in XAML rechtstreeks de instantiëring van objecten vertegenwoordigen. Zodra u een element in XAML hebt gedefinieerd, kunt u dit openen in achter code achter bestanden en gedrag definiëren met behulp van C#-code.
Verschil tussen .NET MAUI XAML en Microsoft XAML
XAML is gebaseerd op de Microsoft 2009 XAML-specificatie. Deze specificatie definieert echter alleen de taalsyntaxis. Net als bij Windows Presentation Foundation (WPF), Universeel Windows-platform (UWP) en WinUI 3, die ALLEMAAL gebruikmaken van XAML, worden de elementen die u in de XAML declareert, gewijzigd.
XAML verscheen voor het eerst in 2006 met WPF. Als u al een tijdje met Microsoft XAML werkt, moet de XAML-syntaxis er bekend uitzien.
Er zijn enkele belangrijke verschillen tussen de .NET MAUI-smaak van XAML en XAML die worden gebruikt door andere UI-hulpprogramma's. De structuur en concepten zijn vergelijkbaar, maar sommige namen van de klassen en eigenschappen verschillen.
Een gebruikersinterface maken met .NET MAUI XAML
De beste manier om XAML in actie te zien, is door te kijken naar een voorbeeld van een bestaand C#-gecodeerd ContentPage paginatype. Vervolgens kunt u deze vergelijken met een andere pagina met dezelfde gebruikersinterface die is gedefinieerd met behulp van XAML.
Stel dat u de volgende code hebt in ContentPage uw 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 !");
};
}
}
De pagina bevat een indelingscontainer, twee labels, twee vermeldingen en een knop. De code verwerkt ook de Clicked gebeurtenis voor de knop. Er zijn ook slechts enkele ontwerpeigenschappen ingesteld op de elementen op de pagina. Tijdens runtime ziet de pagina er op een Android-apparaat als volgt uit:
Hoewel de pagina een eenvoudig ontwerp heeft, is het een combinatie van gedrag en ontwerp in hetzelfde bestand.
Dezelfde pagina-indeling die is gedefinieerd met XAML ziet er als volgt uit:
<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>
De C#-code die de pagina initialiseert en de gebeurtenis-handler implementeert voor de gebeurtenis van het ClickedLoginButton besturingselement in het bestand code-behind ziet er als volgt uit:
namespace MauiXaml;
public partial class Page1 : ContentPage, IPage
{
public Page1()
{
InitializeComponent();
}
void LoginButton_Clicked(object sender, EventArgs e)
{
Debug.WriteLine("Clicked !");
}
}
Notitie
De InitializeComponent methode in de paginaconstructor leest de XAML-beschrijving van de pagina, laadt de verschillende besturingselementen van die pagina en stelt de eigenschappen ervan in. U roept deze methode alleen aan als u een pagina definieert met XAML-markeringen. In het vorige voorbeeld ziet u hoe u de gebruikersinterface maakt met C#-code, wordt niet aangeroepen InitializeComponent.
Deze structuur maakt het mogelijk om ontwerp en gedrag te scheiden. De volledige declaratie van de gebruikersinterface bevindt zich in één toegewezen bronbestand, dat losstaat van het gedrag van de gebruikersinterface. Bovendien biedt de XAML-markeringen meer duidelijkheid voor een ontwikkelaar die het uiterlijk en het gevoel van de toepassing probeert te begrijpen.
Voordelen van het gebruik van XAML
Met XAML kunt u de gedragslogica scheiden van het ontwerp van de gebruikersinterface. Deze scheiding helpt u elk stuk onafhankelijk te bouwen en maakt de hele app gemakkelijker te beheren naarmate deze groeit.
Met deze aanpak kan een gespecialiseerde UI-ontwerper ook werken aan het bijwerken van het uiterlijk van de gebruikersinterface met behulp van XAML-bewerkingsprogramma's afzonderlijk van een ontwikkelaar die de UI-logica bijwerkt.