Udostępnij za pośrednictwem

Podstawowa składnia XAML

  • Artykuł

Browse sample. Przeglądanie przykładu

Język XAML jest przeznaczony głównie do tworzenia wystąpień i inicjowania obiektów. Jednak często właściwości muszą być ustawione na obiekty złożone, których nie można łatwo przedstawić jako ciągów XML, a czasami właściwości zdefiniowane przez jedną klasę muszą być ustawione w klasie podrzędnej. Te dwa potrzeby wymagają podstawowych funkcji składni XAML elementów właściwości i dołączonych właściwości.

Elementy właściwości

W wieloplatformowym interfejsie użytkownika aplikacji platformy .NET (.NET MAUI) XAML właściwości klas są zwykle ustawiane jako atrybuty XML:

<Label Text="Hello, XAML!"
       VerticalOptions="Center"
       FontAttributes="Bold"
       FontSize="18"
       TextColor="Aqua" />

Istnieje jednak alternatywny sposób ustawiania właściwości w języku XAML:

<Label Text="Hello, XAML!"
       VerticalOptions="Center"
       FontAttributes="Bold"
       FontSize="18">
    <Label.TextColor>
        Aqua
    </Label.TextColor>
</Label>

Te dwa przykłady określające TextColor właściwość są funkcjonalnie równoważne i umożliwiają wprowadzenie pewnych podstawowych terminologii:

  • Labeljest elementem obiektu. Jest to obiekt MAUI platformy .NET wyrażony jako element XML.
  • Text, VerticalOptionsi FontSize są atrybutami właściwości. FontAttributes Są to właściwości MAUI platformy .NET wyrażone jako atrybuty XML.
  • W drugim przykładzie TextColor stał się elementem właściwości. Jest to właściwość MAUI platformy .NET wyrażona jako element XML.

Uwaga

W elemecie właściwości wartość właściwości jest zawsze definiowana jako zawartość między tagami start-element-property i end.

Składnia elementu właściwości może być również używana w więcej niż jednej właściwości obiektu:

<Label Text="Hello, XAML!"
       VerticalOptions="Center">
    <Label.FontAttributes>
        Bold
    </Label.FontAttributes>
    <Label.FontSize>
        Large
    </Label.FontSize>
    <Label.TextColor>
        Aqua
    </Label.TextColor>
</Label>

Chociaż składnia właściwości-elementu może wydawać się niepotrzebna, ważne jest, aby wartość właściwości była zbyt złożona, aby była wyrażana jako prosty ciąg. W tagach property-element można utworzyć wystąpienie innego obiektu i ustawić jego właściwości. Na przykład Grid układ ma właściwości o nazwie RowDefinitions i ColumnDefinitions, które są odpowiednio typu RowDefinitionCollection i ColumnDefinitionCollection . Te typy to kolekcje RowDefinition obiektów i ColumnDefinition , a składnia elementu właściwości jest zwykle używana do ich ustawiania:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.GridDemoPage"
             Title="Grid Demo Page">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        ...
    </Grid>
</ContentPage>

Dołączone właściwości

W poprzednim przykładzie pokazano, że Grid element właściwości wymaga elementów RowDefinitions właściwości dla kolekcji i ColumnDefinitions do zdefiniowania wierszy i kolumn. Sugeruje to, że musi istnieć technika wskazująca wiersz i kolumnę, w której znajduje się każde dziecko.Grid

W tagu dla każdego elementu podrzędnego określ wiersz i kolumnę tego elementu podrzędnego Grid przy użyciu Grid.Row atrybutów i Grid.Column , które mają wartości domyślne 0. Można również wskazać, czy element podrzędny obejmuje więcej niż jeden wiersz lub kolumnę z atrybutami Grid.RowSpan i Grid.ColumnSpan , które mają wartości domyślne 1.

W poniższym przykładzie pokazano umieszczenie elementów podrzędnych w obiekcie Grid:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.GridDemoPage"
             Title="Grid Demo Page">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>

        <Label Text="Autosized cell"
               TextColor="White"
               BackgroundColor="Blue" />
        <BoxView Color="Silver"
                 Grid.Column="1" />
        <BoxView Color="Teal"
                 Grid.Row="1" />
        <Label Text="Leftover space"
               Grid.Row="1" Grid.Column="1"
               TextColor="Purple"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
        <Label Text="Span two rows (or more if you want)"
               Grid.Column="2" Grid.RowSpan="2"
               TextColor="Yellow"
               BackgroundColor="Blue"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
        <Label Text="Span two columns"
               Grid.Row="2" Grid.ColumnSpan="2"
               TextColor="Blue"
               BackgroundColor="Yellow"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
        <Label Text="Fixed 100x100"
               Grid.Row="2" Grid.Column="2"
               TextColor="Aqua"
               BackgroundColor="Red"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />

    </Grid>
</ContentPage>

Ten kod XAML powoduje następujący układ:

.NET MAUI Grid layout.

Atrybuty , , i wydają się być właściwościami Grid klasy, ale ta klasa nie definiuje niczego o nazwie Row, , ColumnRowSpanlub ColumnSpan.Grid.ColumnSpan Grid.RowSpanGrid.ColumnGrid.Row Grid Zamiast tego klasa definiuje cztery właściwości możliwe do powiązania o nazwach RowProperty, ColumnProperty, RowSpanPropertyi ColumnSpanProperty, które są specjalnymi typami powiązanych właściwości znanych jako dołączone właściwości. Są one definiowane przez klasę Grid , ale ustawiane dla elementów podrzędnych klasy Grid.

Uwaga

Jeśli chcesz użyć tych dołączonych właściwości w kodzie, Grid klasa udostępnia metody statyczne o nazwie GetRow, , SetRow, SetColumnGetColumnSetRowSpanGetRowSpan, GetColumnSpan, i .SetColumnSpan

Dołączone właściwości są rozpoznawalne w języku XAML jako atrybuty zawierające zarówno klasę, jak i nazwę właściwości oddzieloną kropką. Są one nazywane dołączonymi właściwościami , ponieważ są definiowane przez jedną klasę (w tym przypadku Grid), ale dołączone do innych obiektów (w tym przypadku elementów podrzędnych klasy Grid). Podczas układu program może przesłuchić wartości tych dołączonych właściwości, Grid aby wiedzieć, gdzie umieścić poszczególne elementy podrzędne.

Właściwości zawartości

W poprzednim przykładzie Grid obiekt został ustawiony na Content właściwość ContentPage. Jednak właściwość nie odwoływała się do kodu XAML, Content ale może być następująca:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.XamlPlusCodePage"
             Title="XAML + Code Page">
    <ContentPage.Content>
        <Grid>
            ...
        </Grid>
    </ContentPage.Content>
</ContentPage>

Właściwość nie jest wymagana Content w języku XAML, ponieważ elementy zdefiniowane do użycia w języku .NET MAUI XAML mogą mieć jedną właściwość określoną jako ContentProperty atrybut klasy:

[ContentProperty("Content")]
public class ContentPage : TemplatedPage
{
    ...
}

Każda właściwość określona jako ContentProperty klasa oznacza, że tagi property-element dla właściwości nie są wymagane. W związku z tym powyższy przykład określa, że do właściwości jest przypisywana dowolna zawartość XAML wyświetlana między tagami początkowymi i końcowymi ContentPage Content .

Wiele klas ma ContentProperty również definicje atrybutów. Na przykład właściwość content obiektu Label to Text.

Różnice między platformami

Aplikacje MAUI platformy .NET mogą dostosowywać wygląd interfejsu użytkownika dla poszczególnych platform. Można to osiągnąć w języku XAML przy użyciu OnPlatform klas i :On

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

OnPlatform jest klasą ogólną i dlatego należy określić argument typu ogólnego, w tym przypadku , Thicknessktóry jest typem Padding właściwości. Jest to osiągane za pomocą atrybutu x:TypeArguments XAML. Klasa OnPlatform definiuje Default właściwość, którą można ustawić na wartość, która zostanie zastosowana do wszystkich platform:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

W tym przykładzie Padding właściwość jest ustawiana na różne wartości w systemach iOS i Android, a inne platformy są ustawione na wartość domyślną.

Klasa OnPlatform definiuje również właściwość , która jest obiektem IList On.Platforms Każdy On obiekt może ustawić Platform właściwość i Value , aby zdefiniować Thickness wartość dla określonej platformy. Ponadto Platform właściwość typu On jest typu IList<string>, więc można uwzględnić wiele platform, jeśli wartości są takie same:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS, Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

Jest to standardowy sposób ustawiania właściwości zależnej od Padding platformy w języku XAML.

Uwaga

Value Jeśli właściwość On obiektu nie może być reprezentowana przez pojedynczy ciąg, możesz zdefiniować dla niego elementy właściwości.

Aby uzyskać więcej informacji, zobacz Dostosowywanie wyglądu interfejsu użytkownika na podstawie platformy.

Następne kroki

Rozszerzenia znaczników XAML dla platformy .NET MAUI umożliwiają ustawianie właściwości na obiekty lub wartości, do których odwołuje się pośrednio z innych źródeł. Rozszerzenia znaczników XAML są szczególnie ważne w przypadku udostępniania obiektów i odwoływania się do stałych używanych w całej aplikacji.

Rozszerzenia znaczników XAML