Typy i właściwości na platformie .NET MAUI XAML

  • 5 min

XAML to deklaratywny język znaczników. Został zaprojektowany z myślą o uproszczeniu procesu tworzenia interfejsu użytkownika. Elementy w języku XAML bezpośrednio reprezentują wystąpienie obiektów, do których uzyskujesz dostęp w plikach za pomocą kodu.

W tej lekcji dowiesz się, jak używać typów dostępnych w języku XAML oraz jak ustawiać i odczytywać właściwości tych typów.

Gdzie są zdefiniowane typy?

Program .NET MAUI implementuje analizator XAML, który analizuje zadeklarowane elementy XAML i tworzy wystąpienie każdego elementu jako typ platformy .NET. Dialekt XAML, który rozumie analizator .NET MAUI, jest specyficzny dla platformy .NET MAUI, chociaż jest podobny do języka XAML innych platform, takich jak Windows Presentation Foundation.

Typy platformy .NET implementujące elementy identyfikujące kod XAML są implementowane przez kod w kilku zestawach platformy .NET. Wiele z tych zestawów jest uwzględnionych w szablonach .NET MAUI. Możesz również użyć innych typów niestandardowych, ładując odpowiednie zestawy w ramach projektu. Wiele zestawów jest dostępnych jako pakiety NuGet. Większość typowych typów używanych przez aplikację MAUI znajduje się w pakietach Microsoft.Maui.Dependencies i Microsoft.Maui.Extensions .

Każdy typ jest definiowany w przestrzeni nazw. W kodzie XAML należy określić przestrzenie nazw dla typów, do których się odwołujesz. Większość kontrolek MAUI znajduje się w przestrzeni nazw Microsoft.Maui.Controls, podczas gdy przestrzeń nazw Microsoft.Maui definiuje typy narzędzi, takie jak , a przestrzeń nazw Microsoft.Maui.Graphics zawiera uogólnione typy, takie jak ThicknessColor. Opcja wprowadzenia typów w ten sposób wyróżnia rozszerzalność języka XAML. Język XAML umożliwia tworzenie interfejsu użytkownika aplikacji z swobodą dołączania elementów XAML dla platformy .NET MAUI, typów platformy .NET i typów niestandardowych. W większości przypadków nie musisz martwić się o te przestrzenie nazw, ponieważ są one wprowadzane przy użyciu niejawnej usings funkcji języka C#, która automatycznie dodaje je do całej aplikacji.

Tworzenie wystąpień typów w języku XAML

Pierwszym krokiem tworzenia interfejsu użytkownika przy użyciu języka XAML jest utworzenie wystąpienia typów kontrolek interfejsu użytkownika. W języku XAML można utworzyć obiekt określonego typu przy użyciu składni elementu obiektu. Składnia elementu obiektu to standardowa, dobrze sformułowana składnia XML do deklarowania elementu. Jeśli na przykład chcesz utworzyć etykietę z określonym kolorem, element XAML będzie wyglądać podobnie do następującego kodu:

<Label TextColor="AntiqueWhite"/>

Analizator XAML XAML programu .NET MAUI analizuje ten element XAML w celu utworzenia wystąpienia obiektu w pamięci. W rzeczywistości przeanalizowana etykieta XAML jest taka sama jak następujący kod języka C#:

var myLabel = new Label
{
  TextColor = Color.FromRgb(255, 255, 100)
};

Co to jest przestrzeń nazw XAML?

Należy pamiętać, że aby analizator XAML pomyślnie przeanalizować definicję XAML kontrolki na stronie, musi mieć dostęp do kodu, który implementuje kontrolkę i definiuje jej właściwości. Kontrolki dostępne dla strony .NET MAUI są implementowane w kolekcji zestawów zainstalowanych w ramach pakietu NuGet Microsoft.Maui . Kontrolki znajdują się w przestrzeni nazw platformy .NET w tych zestawach. W kodzie języka C# dodasz przestrzeń nazw do zakresu z dyrektywą using . Na stronie XAML odwołujesz się do przestrzeni nazw z atrybutem xmlns strony. Poniższy kod przedstawia przestrzenie nazw na stronie XAML utworzonej w poprzedniej lekcji:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             ...>

    ...
</ContentPage>

Pierwsza przestrzeń nazw, http://schemas.microsoft.com/dotnet/2021/maui, jest domyślną przestrzenią nazw strony. Ta forma identyfikatora URI przestrzeni nazw jest typowa dla kodu XML i wygląda nieco inaczej niż w języku C#. Jednak ten identyfikator URI jest po prostu aliasem dla co najmniej jednej przestrzeni nazw zdefiniowanej przez zestawy w pakiecie NuGet Microsoft.Maui, dlatego określenie tej przestrzeni nazw na początku strony powoduje przeniesienie wszystkich typów i kontrolek MAUI platformy .NET do zakresu. Jeśli pominięto tę przestrzeń nazw, nie będzie można używać kontrolek takich jak Button, Label, Entrylub StackLayout.

Druga przestrzeń nazw , odwołuje się do zestawów zawierających różne typy wewnętrzne platformy .NET, http://schemas.microsoft.com/winfx/2009/xamltakie jak ciągi, cyfry i właściwości. W poprzednim kodzie XAML ta przestrzeń nazw jest przypisana alias x. W kodzie XAML dla tej strony odwołujesz się do typów w tej przestrzeni nazw, prefiksując je za pomocą x:. Na przykład każda strona XAML jest kompilowana w klasie i określa nazwę klasy wygenerowanej za pomocą atrybutu x:Class strony:

<ContentPage ...
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiXaml.Page1"
            ...>

    ...
</ContentPage>

Typy można odwoływać się do własnych zestawów w kodzie XAML za pośrednictwem przestrzeni nazw XAML. Jeśli na przykład masz typy i metody, których chcesz użyć w kodzie XAML zdefiniowanym w przestrzeni nazw o nazwie Utils w projekcie, możesz dodać Przestrzeń nazw Utils do strony, jak pokazano w poniższym kodzie. W tym przykładzie uzyskujesz dostęp do typów w tej przestrzeni nazw, prefiksując je za pomocą aliasu mycode.

<ContentPage ...
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mycode="clr-namespace:Utils"
            ...>

    ...
</ContentPage>

Uwaga

W dalszej części tego modułu zobaczysz więcej przykładów tej techniki.

Jak określić wartości właściwości w języku XAML

W formacie XML atrybuty służą do opisywania lub podawania informacji o elemecie. W języku XAML atrybuty służą do ustawiania właściwości typu bazowego. Rozważmy na przykład następujący kod w języku C#:

var label = new Label { Text = "Username", TextColor = Color.Black };

Ta instrukcja tworzy nowy Label obiekt i ustawia Text właściwości i TextColor . Aby ustawić właściwości w języku XAML, należy użyć atrybutów. Odpowiedni kod XAML wygląda następująco:

<Label Text="Username" TextColor="Black" />

Jedną z rzeczy, które można zauważyć, że różni się w kodzie XAML niż kod języka C#, są wartości właściwości. Na przykład w kodzie języka C# należy użyć Color typu właściwości TextColor . Jednak w definicji XAML ustawisz wartość TextColor ciągu. Jest to spowodowane tym, że ciąg jest jedynym prawidłowym elementem, którego można użyć dla wartości atrybutu XML. W związku z tym należy przekonwertować każdą wartość ciągu na poprawny typ. W języku XAML można wykonać tę konwersję przy użyciu konwertera typów.

Co to jest konwerter typów?

Konwerter typów konwertuje atrybut XML określony jako wartość ciągu na poprawny typ. Aby lepiej zrozumieć tę koncepcję, rozważmy następujący przykład:

<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic" />

Ten kod tworzy obiekt Label i ustawia jego Textwłaściwości , TextColor, FontSizei FontAttributes .

Zacznij od pierwszej właściwości . Text Tekst jest już ciągiem, co oznacza, że strona XAML nie potrzebuje konwertera typów. TextColor Następnie użyje Color typu , więc język XAML wymaga konwertera typów, aby przetłumaczyć ciąg na odpowiadającą Color mu wartość. Właściwość FontSize jest liczbą całkowitą, więc XAML wymaga konwertera typów, aby przeanalizować ciąg do liczby całkowitej. FontAttributes Na koniec jest przykładem złożonego obiektu. Wartości można połączyć jako ciąg rozdzielany przecinkami: "Bold,Italic". Ciąg rozdzielany przecinkami jest traktowany jako wyliczenie oparte na flagach, a odpowiedni konwerter typów zastosuje bitową OR wartość do właściwości .

Program .NET MAUI ma konwertery typów dla większości wbudowanych klas i używa tych konwerterów typów automatycznie. Jeśli jednak określony konwerter nie istnieje, możesz napisać własny i skojarzyć go z typem, aby można go było używać w języku XAML.

Przypisanie typu złożonego

Konwertery typów doskonale nadają się do prostych ustawień właściwości; Jednak w niektórych przypadkach należy utworzyć pełny obiekt z własnymi wartościami właściwości. Rozwiązaniem tego problemu jest zmiana przypisania właściwości w celu używania składni opartej na elementach. Ta składnia jest nazywana formularzem Element właściwości. Ta składnia polega na przerwaniu ustawiania właściwości w formularzu nadrzędny-podrzędny, gdzie właściwość jest wyrażona w tagu elementu formularza Type.PropertyName. Załóżmy, że chcesz przypisać rozpoznawanie gestów do etykiety, aby użytkownik aplikacji mógł nacisnąć etykietę. Rozpoznawanie gestów jest obiektem złożonym z własnymi właściwościami. Zazwyczaj te właściwości należy przypisać, aby zapewnić odpowiednią funkcjonalność:

<TapGestureRecognizer NumberOfTapsRequired="2" />

Jeśli musisz przypisać tę wartość do Labelklasy , możesz napisać kod XAML w następujący sposób:

<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic">
    <Label.GestureRecognizers>
        <TapGestureRecognizer NumberOfTapsRequired="2" />
    </Label.GestureRecognizers>
</Label>

Typ Label ma właściwość o nazwie GestureRecognizers. Korzystając z formularza Element właściwości, można dodać element TapGestureRecognizer do listy gestów dla elementu Label.

Domyślna właściwość zawartości

Niektóre kontrolki MAUI platformy .NET mają domyślną właściwość zawartości. Właściwość content umożliwia określenie wartości właściwości w kontrolce bez jawnego określenia jej w języku XAML. Przyjrzyj się następującej części kodu XAML:

<VerticalStackLayout>
    <VerticalStackLayout.Children>
        <Label Text="Please log in" />
    </VerticalStackLayout.Children>
</VerticalStackLayout>

Ten kod tworzy element VerticalStackLayout i dodaje element Label jako element podrzędny. Ponieważ często dodaje się elementy podrzędne do obiektu , jej Children właściwość jest domyślną właściwością VerticalStackLayoutzawartości. Oznacza to, że można dodać element podrzędny bez jawnego określenia elementu Children, w następujący sposób:

<VerticalStackLayout>
    <Label Text="Please log in" />
</VerticalStackLayout>

Test wiedzy

1.

Co robi konwerter typów?

2.

Jak przenieść własne typy niestandardowe do zakresu w pliku XAML?