Typer och egenskaper i .NET MAUI XAML
XAML är ett deklarativt påläggsspråk. Den är utformad med idén att förenkla processen med att skapa användargränssnittet. Elementen i XAML representerar direkt instansiering av objekt som du kommer åt i kod bakom filer.
I den här lektionen får du lära dig hur du använder de typer som är tillgängliga i XAML och hur du anger och läser egenskaper för dessa typer.
Var definieras typer?
.NET MAUI implementerar en XAML-parser som parsar dina deklarerade XAML-element och instansierar varje element som en .NET-typ. XAML-dialekten som .NET MAUI-parsern förstår är specifik för .NET MAUI, även om den liknar XAML andra ramverk, till exempel Windows Presentation Foundation.
De .NET-typer som implementerar objekten som XAML-kod identifierar implementeras med kod i flera .NET-sammansättningar. Många av dessa sammansättningar ingår som en del av .NET MAUI-mallarna. Du kan också använda andra anpassade typer genom att läsa in lämpliga sammansättningar som en del av projektet. Många sammansättningar är tillgängliga som NuGet-paket. De flesta av de vanligaste typerna som en MAUI-app använder finns i paketen Microsoft.Maui.Dependencies och Microsoft.Maui.Extensions .
Varje typ definieras i ett namnområde. I XAML-koden anger du namnrymderna för de typer som du refererar till. De flesta MAUI-kontroller finns i namnområdet Microsoft.Maui.Controls , medan namnområdet Microsoft.Maui definierar verktygstyper som Thickness, och namnområdet Microsoft.Maui.Graphics innehåller generaliserade typer som Color. Alternativet att introducera typer på det här sättet visar utökningsbarheten för XAML. Med XAML kan du skapa appens användargränssnitt med friheten att inkludera .NET MAUI XAML-element, .NET-typer och anpassade typer. För det mesta behöver du inte bekymra dig om dessa namnområden eftersom de tas in med hjälp av C#:s implicita usings funktion som automatiskt lägger till dem i hela appen.
Så här instansierar du typer i XAML
Det första steget i att använda XAML för att skapa ett användargränssnitt är att instansiera UI-kontrolltyperna. I XAML kan du skapa ett objekt av en angiven typ med hjälp av objektelementsyntax. Objektelementsyntax är en standard, välformulerad XML-syntax för att deklarera ett element. Om du till exempel vill skapa en etikett med en viss färg ser XAML-elementet ut som följande kod:
<Label TextColor="AntiqueWhite"/>
.NET MAUI XAML parser parsar det här XAML-elementet för att instansiera objektet i minnet. I själva verket är den parsade XAML-etiketten samma som följande C#-kod:
var myLabel = new Label
{
TextColor = Color.FromRgb(255, 255, 100)
};
Vad är ett XAML-namnområde?
Kom ihåg att för att XAML-parsaren ska kunna parsa XAML-definitionen av en kontroll på en sida måste den ha åtkomst till koden som implementerar kontrollen och definierar dess egenskaper. Kontrollerna som är tillgängliga för en .NET MAUI-sida implementeras i en samling sammansättningar som är installerade som en del av Microsoft.Maui NuGet-paketet. Kontrollerna finns i ett .NET-namnområde i dessa sammansättningar. I C#-kod tar du med ett namnområde i omfånget using med direktivet. På en XAML-sida refererar du till ett namnområde med xmlns sidans attribut. Följande kod visar de namnområden som XAML-sidan som skapades i föregående enhet använder:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...>
...
</ContentPage>
Det första namnområdet, http://schemas.microsoft.com/dotnet/2021/maui, är sidans standardnamnområde. Den här URI-formen av namnrymd är typisk för XML och ser något annorlunda ut än de som du kanske är bekant med i C#. Den här URI:n är dock bara ett alias för en eller flera av de namnområden som definieras av sammansättningarna i Microsoft.Maui NuGet-paketet, så om du anger det här namnområdet i början av sidan hamnar alla .NET MAUI-typer och kontroller i omfånget. Om du utelämnar det här namnområdet kan du inte använda kontroller som Button, Label, Entryeller StackLayout.
Det andra namnområdet, http://schemas.microsoft.com/winfx/2009/xaml, refererar till de sammansättningar som innehåller de olika inbyggda .NET-typerna, till exempel strängar, numeriska värden och egenskaper. I den föregående XAML-koden tilldelas det här namnområdet aliaset x. I XAML-koden för den här sidan refererar du till typerna i det här namnområdet genom att prefixa dem med x:. Till exempel kompileras varje XAML-sida till en klass och du anger namnet på klassen som genereras med x:Class-attributet på sidan:
<ContentPage ...
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiXaml.Page1"
...>
...
</ContentPage>
Du kan referera till typer i dina egna sammansättningar i XAML-kod via ett XAML-namnområde. Om du till exempel har typer och metoder som du vill använda i XAML-koden som definierats i ett namnområde med namnet Utils i projektet, kan du lägga till Utils-namnområdet på sidan enligt följande kod. I det här exemplet får du åtkomst till typerna i det här namnområdet genom att prefixa dem med alias-mycode.
<ContentPage ...
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mycode="clr-namespace:Utils"
...>
...
</ContentPage>
Kommentar
Du ser fler exempel på den här tekniken senare i den här modulen.
Så här anger du egenskapsvärden i XAML
I XML använder du attribut för att beskriva eller ange information om ett element. I XAML använder du attribut för att ange egenskaper för den underliggande typen. Du kan till exempel överväga följande C#-kod:
var label = new Label { Text = "Username", TextColor = Color.Black };
Den här instruktionen Text skapar ett nytt Label objekt och anger egenskaperna ochTextColor. Om du vill ange egenskaper i XAML använder du attribut. Motsvarande XAML-kod ser ut så här:
<Label Text="Username" TextColor="Black" />
En sak som du kanske märker som skiljer sig i XAML-koden än C#-koden är egenskapsvärdena. I C#-koden använder Color du till exempel egenskapens TextColor typ. I XAML-definitionen anger TextColor du dock med ett strängvärde. Det beror på att en sträng är det enda giltiga elementet som du kan använda för ett XML-attributvärde. Därför måste det finnas ett sätt att konvertera varje strängvärde till rätt typ. I XAML kan du göra den här konverteringen med hjälp av en typkonverterare.
Vad är en typkonverterare?
En typkonverterare konverterar ett XML-attribut som anges som ett strängvärde till rätt typ. Tänk på följande exempel för att förstå det här konceptet bättre:
<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic" />
Den här koden skapar en Label och anger dess Textegenskaper , TextColor, FontSizeoch FontAttributes .
Börja med den första egenskapen, Text. Texten är redan en sträng, vilket innebär att XAML-sidan inte behöver någon typkonverterare. TextColor Därefter använder typenColor, så XAML kräver en typkonverterare för att översätta strängen till motsvarande Color värde. Egenskapen FontSize är ett heltal, så XAML kräver en typkonverterare för att parsa strängen till ett heltal. FontAttributes Slutligen är ett exempel på ett komplext objekt. Du kan kombinera värdena som en kommaavgränsad sträng: "Bold,Italic". Den kommaavgränsade strängen behandlas som en [Flags]-baserad uppräkning och lämplig typkonverterare tillämpar bitvis OR värdet på egenskapen.
.NET MAUI har typkonverterare för de flesta av de inbyggda klasserna och använder dessa typkonverterare automatiskt. Men om det inte finns någon specifik konverterare kan du skriva din egen och associera den med din typ för att göra den användbar i XAML.
Komplex typtilldelning
Typkonverterare är bra för enkla egenskapsinställningar. I vissa fall måste du dock skapa ett fullständigt objekt med egna egenskapsvärden. Lösningen på det här problemet är att ändra egenskapstilldelningen så att den använder en elementbaserad syntax. Den här syntaxen kallas formuläret Egenskapselement. Den här syntaxen innebär att egenskapsuppsättningen delas in i det överordnade-underordnade formuläret, där egenskapen uttrycks i en elementtagg i formuläret Type.PropertyName. Anta att du vill tilldela en gestigenkänning till en etikett så att appanvändaren kan trycka på etiketten. Gestigenkänningen är ett komplext objekt med sina egna egenskaper. Dessa egenskaper måste vanligtvis tilldelas för att säkerställa rätt funktioner:
<TapGestureRecognizer NumberOfTapsRequired="2" />
Om du behöver tilldela det här värdet till en Labelkan du skriva XAML så här:
<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic">
<Label.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2" />
</Label.GestureRecognizers>
</Label>
Typen Label har en egenskap med namnet GestureRecognizers. Genom att använda formuläret Egenskapselement kan du lägga till en TapGestureRecognizer i listan med gester för Label.
Standardinnehållsegenskap
Vissa .NET MAUI-kontroller har en standardinnehållsegenskap. Med innehållsegenskapen kan du ange värdet för en egenskap på en kontroll utan att uttryckligen ange den i XAML. Ta en titt på följande XAML-fragment:
<VerticalStackLayout>
<VerticalStackLayout.Children>
<Label Text="Please log in" />
</VerticalStackLayout.Children>
</VerticalStackLayout>
Den här koden skapar och VerticalStackLayout lägger till ett Label som ett underordnat element. Eftersom det är vanligt att lägga till underordnade i en VerticalStackLayoutär dess Children egenskap standardinnehållsegenskap. Det innebär att du kan lägga till ett underordnat objekt utan att uttryckligen Childrenange , enligt följande:
<VerticalStackLayout>
<Label Text="Please log in" />
</VerticalStackLayout>