Grundlegende XAML-Syntax
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
undFontSize
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:
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.