Teilen über

Grundlegende XAML-Syntax

  • Artikel

Browse sample. Stichprobe durchsuchen

XAML wurde hauptsächlich zum Instanziieren und Initialisieren von Objekten entwickelt. Eigenschaften müssen jedoch häufig auf komplexe Objekte festgelegt werden, die nicht einfach als XML-Zeichenfolgen dargestellt werden können, und manchmal müssen Eigenschaften, die von einer Klasse definiert werden, für eine untergeordnete Klasse festgelegt werden. Diese beiden Anforderungen erfordern die grundlegenden XAML-Syntaxmerkmale von Eigenschaftselementen und angehängten Eigenschaften.

Property-Elemente

In .NET Multi-platform App UI (.NET MAUI) XAML werden die Eigenschaften von Klassen normalerweise als XML-Attribute festgelegt:

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

Es gibt jedoch eine alternative Möglichkeit zum Festlegen einer Eigenschaft in XAML:

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

Diese beiden Beispiele, die die Eigenschaft TextColor spezifizieren, sind funktional äquivalent und ermöglichen die Einführung einiger grundlegender Terminologie:

  • Label ist ein Objektelement. Es handelt sich um ein .NET MAUI-Objekt, das als XML-Element ausgedrückt wird.
  • Text, VerticalOptions, FontAttributes und FontSize sind Eigenschaftsattribute. Sie sind .NET MAUI-Eigenschaften, die als XML-Attribute ausgedrückt werden.
  • Im zweiten Beispiel ist TextColor zu einem Eigenschaftselement geworden. Es handelt sich um eine .NET MAUI-Eigenschaft, die als XML-Element ausgedrückt wird.

Hinweis

In einem Eigenschaftselement wird der Wert der Eigenschaft immer als Inhalt zwischen den Start- und Endtags des Eigenschaftselements definiert.

Eigenschaftselementsyntax kann auch für mehrere Eigenschaften eines Objekts verwendet werden:

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

Obwohl Eigenschaftselementsyntax möglicherweise unnötig erscheint, ist sie wichtig, wenn der Wert einer Eigenschaft zu komplex ist, um als einfache Zeichenfolge ausgedrückt zu werden. Innerhalb der Eigenschaftselementtags können Sie ein anderes Objekt instanziieren und dessen Eigenschaften festlegen. Das Layout Grid hat zum Beispiel Eigenschaften mit den Namen RowDefinitions und ColumnDefinitions, die vom Typ RowDefinitionCollection bzw. ColumnDefinitionCollection sind. Bei diesen Typen handelt es sich um Sammlungen von RowDefinition- und ColumnDefinition-Objekten, die in der Regel mit der Syntax von Eigenschaftselementen festgelegt werden:

<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>

Angefügte Eigenschaften

Im vorherigen Beispiel haben Sie gesehen, dass die Grid Eigenschaftselemente für die RowDefinitions und ColumnDefinitions Sammlungen benötigt, um die Zeilen und Spalten zu definieren. Dies legt nahe, dass es eine Technik geben muss, um die Zeile und die Spalte anzugeben, in der sich jedes Kind der Grid befindet.

Innerhalb des Tags für jedes untergeordnete Element des Grid geben Sie die Zeile und Spalte dieses untergeordneten Elements mit den Attributen Grid.Row und Grid.Column an, die standardmäßig den Wert 0 haben. Mit den Attributen Grid.RowSpan und Grid.ColumnSpan, die standardmäßig den Wert 1 haben, können Sie auch angeben, ob sich ein Kind über mehr als eine Zeile oder Spalte erstreckt.

Das folgende Beispiel veranschaulicht das Platzieren von untergeordneten Elementen in einer 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>

Dieses XAML führt zu folgendem Layout:

.NET MAUI Grid layout.

Die Attribute Grid.Row, Grid.Column, Grid.RowSpan und Grid.ColumnSpan scheinen Eigenschaften der Klasse Grid zu sein, aber diese Klasse definiert nichts namens Row, Column, RowSpan oder ColumnSpan. Stattdessen definiert die Klasse Grid vier bindungsfähige Eigenschaften mit den Namen RowProperty, ColumnProperty, RowSpanProperty und ColumnSpanProperty, bei denen es sich um spezielle Arten von bindungsfähigen Eigenschaften handelt, die als angefügte Eigenschaften bekannt sind. Sie werden durch die Klasse Grid definiert, aber auf Kinder der Klasse Grid gesetzt.

Hinweis

Wenn Sie diese angefügten Eigenschaften im Code verwenden möchten, bietet die Klasse Grid statische Methoden mit den Namen GetRow, SetRow, GetColumn, SetColumn, GetRowSpan, SetRowSpan, GetColumnSpan und SetColumnSpan.

Angefügte Eigenschaften sind in XAML als Attribute erkennbar, die sowohl eine Klasse als auch einen Eigenschaftsnamen enthalten, die durch einen Punkt getrennt sind. Sie werden angefügte Eigenschaften genannt, weil sie von einer Klasse (in diesem Fall Grid) definiert werden, aber an andere Objekte (in diesem Fall Kinder der Grid) angehängt sind. Während des Layouts kann Grid die Werte dieser angehängten Eigenschaften abfragen, um zu wissen, wo jedes Kind platziert werden soll.

Content-Eigenschaften

Im vorherigen Beispiel wurde das Grid-Objekt auf die Content-Eigenschaft des ContentPage gesetzt. Die Eigenschaft Content wurde jedoch nicht in der XAML referenziert, kann aber referenziert werden:

<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>

Die Content-Eigenschaft ist in XAML nicht erforderlich, da Elemente, die für die Verwendung in .NET MAUI XAML definiert sind, eine Eigenschaft haben dürfen, die als ContentProperty-Attribut für die Klasse angegeben ist:

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

Jede Eigenschaft, die als ContentProperty einer Klasse angegeben ist, bedeutet, dass die Property-Element-Tags für die Eigenschaft nicht erforderlich sind. Das obige Beispiel legt daher fest, dass jeder XAML-Inhalt, der zwischen dem Start- und End-Tag ContentPage erscheint, der Eigenschaft Content zugewiesen wird.

Viele Klassen haben auch ContentProperty Attributdefinitionen. Die Inhaltseigenschaft von Label ist zum Beispiel Text.

Plattformunterschiede

.NET MAUI-Apps können die Darstellung der Benutzeroberfläche auf Plattformbasis anpassen. Dies kann in XAML mithilfe der Klassen OnPlatform und On erreicht werden:

<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 ist eine generische Klasse; daher müssen Sie das Argument des generischen Typs angeben, in diesem Fall Thickness, das der Typ der Padding-Eigenschaft ist. Dies wird mit dem x:TypeArguments-XAML-Attribut erreicht. Die Klasse OnPlatform definiert eine Default-Eigenschaft, die auf einen Wert gesetzt werden kann, der dann auf alle Plattformen angewendet wird:

<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>

In diesem Beispiel wird die Padding-Eigenschaft unter iOS und Android auf unterschiedliche Werte gesetzt, während die anderen Plattformen auf den Standardwert gesetzt werden.

Die OnPlatform-Klasse definiert auch eine Platforms-Eigenschaft, die IList von On-Objekten ist. Jedes On-Objekt kann die Platform- und Value-Eigenschaft festlegen, um den Thickness-Wert für eine bestimmte Plattform zu definieren. Darüber hinaus ist die Platform-Eigenschaft von On vom Typ IList<string>, sodass Sie mehrere Plattformen einbeziehen können, wenn die Werte gleich sind:

<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>

Dies ist die Standardmethode zum Festlegen einer plattformabhängigen Padding-Eigenschaft in XAML.

Hinweis

Wenn die Value-Eigenschaft eines On-Objekts nicht durch eine einzige Zeichenfolge dargestellt werden kann, können Sie dafür Eigenschaftselemente definieren.

Weitere Informationen erhalten Sie unter Anpassen der Darstellung der Benutzeroberfläche basierend auf der Plattform.

Nächste Schritte

.NET MAUI XAML-Markuperweiterungen ermöglichen das Festlegen von Eigenschaften auf Objekte oder Werte, auf die indirekt aus anderen Quellen verwiesen wird. XAML-Markuperweiterungen sind besonders wichtig für das Freigeben von Objekten und verweisen auf Konstanten, die in einer App verwendet werden.

XAML-Markuperweiterungen