Основной синтаксис XAML
Обзор примераXAML в основном предназначен для создания экземпляров и инициализации объектов. Но часто свойства должны быть заданы для сложных объектов, которые не могут быть легко представлены как XML-строки, а иногда свойства, определенные одним классом, должны быть заданы в дочернем классе. Для этих двух потребностей требуются основные функции синтаксиса XAML элементов свойств и присоединенных свойств.
Элементы свойства
В XAML многоплатформенного пользовательского интерфейса приложений .NET (.NET MAUI) свойства классов обычно задаются как XML-атрибуты:
<Label Text="Hello, XAML!"
VerticalOptions="Center"
FontAttributes="Bold"
FontSize="18"
TextColor="Aqua" />
Однако существует альтернативный способ задания свойства в XAML:
<Label Text="Hello, XAML!"
VerticalOptions="Center"
FontAttributes="Bold"
FontSize="18">
<Label.TextColor>
Aqua
</Label.TextColor>
</Label>
Эти два примера, указывающие TextColor свойство функционально эквивалентны, и включите введение некоторых основных терминов:
- Label— это элемент объекта. Это объект .NET MAUI, выраженный как XML-элемент.
Text,VerticalOptionsиFontSizeявляются атрибутами свойств.FontAttributesОни являются свойствами .NET MAUI, выраженными как XML-атрибуты.- Во втором примере
TextColorстал элементом свойства. Это свойство .NET MAUI, выраженное как XML-элемент.
Примечание.
В элементе свойства значение свойства всегда определяется как содержимое между начальными и конечными тегами элемента свойства.
Синтаксис элемента свойства также можно использовать для нескольких свойств объекта:
<Label Text="Hello, XAML!"
VerticalOptions="Center">
<Label.FontAttributes>
Bold
</Label.FontAttributes>
<Label.FontSize>
Large
</Label.FontSize>
<Label.TextColor>
Aqua
</Label.TextColor>
</Label>
Хотя синтаксис элемента свойства может показаться ненужным, важно, если значение свойства слишком сложно, чтобы быть выражено как простая строка. В тегах элемента свойства можно создать экземпляр другого объекта и задать его свойства. Например, Grid макет имеет свойства с именем RowDefinitions и ColumnDefinitions, которые имеют тип RowDefinitionCollection и ColumnDefinitionCollection соответственно. Эти типы являются коллекциями и ColumnDefinition объектамиRowDefinition, и обычно используется синтаксис элемента свойства для их задания:
<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>
Вложенные свойства
В предыдущем примере вы узнали, что Grid для определения строк и столбцов требуются элементы RowDefinitions свойств и ColumnDefinitions коллекции. Это означает, что должен быть метод для указания строки и столбца, в котором находится каждый дочерний элемент Grid .
В теге для каждого дочернего Grid элемента указывается строка и столбец этого дочернего элемента с помощью Grid.Row атрибутов и Grid.Column значений по умолчанию 0. Можно также указать, охватывает ли дочерний элемент несколько строк или столбцов с Grid.RowSpan атрибутами и Grid.ColumnSpan значениями по умолчанию 1.
В следующем примере показано размещение дочерних элементов в пределах 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>
Этот КОД XAML приводит к следующему макету:
Атрибуты , Grid.RowSpanи атрибуты, как представляется, представляются свойствами класса, но этот класс не определяет ничего именованного GridRow, илиColumnSpanColumnRowSpan.Grid.ColumnSpanGrid.ColumnGrid.Row Вместо этого Grid класс определяет четыре привязываемых свойства с именем RowProperty, ColumnPropertyи RowSpanPropertyColumnSpanProperty, которые являются специальными типами привязываемых свойств, известных как присоединенные свойства. Они определяются классом Grid , но задаются на дочерних элементах Grid.
Примечание.
Если вы хотите использовать эти присоединенные свойства в кодеGrid, класс предоставляет статические методы с именем GetRow, SetRow, , GetColumn, SetColumn, GetColumnSpanGetRowSpanSetRowSpanи .SetColumnSpan
Присоединенные свойства распознаются в XAML как атрибуты, содержащие как класс, так и имя свойства, разделенное точкой. Они называются присоединенными свойствами , так как они определяются одним классом (в данном случае Grid), но присоединены к другим объектам (в данном случае дочерние Gridобъекты). Во время макета можно провести допрос значений этих присоединенных свойств, Grid чтобы узнать, где разместить каждый дочерний элемент.
Свойства содержимого
В предыдущем примере Grid объект был задан свойству Content объекта ContentPage. Однако свойство не ссылалось на XAML, Content но может быть следующим:
<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>
Свойство Content не требуется в XAML, так как элементы, определенные для использования в XAML .NET MAUI, могут иметь одно свойство, указанное в качестве ContentProperty атрибута класса:
[ContentProperty("Content")]
public class ContentPage : TemplatedPage
{
...
}
Любое свойство, указанное как ContentProperty класс, означает, что теги элементов свойства для свойства не требуются. Поэтому в приведенном выше примере указывается, что любому содержимому XAML, отображаемому между тегами начала и окончания ContentPage , присваивается свойству Content .
Многие классы также имеют ContentProperty определения атрибутов. Например, свойство содержимого Label имеет значение Text.
Различия между платформами
Приложения .NET MAUI могут настраивать внешний вид пользовательского интерфейса на основе каждой платформы. Это можно сделать в XAML с помощью OnPlatform и 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является универсальным классом и поэтому необходимо указать аргумент универсального Padding типа, в данном случае Thickness— тип свойства. Это достигается с помощью атрибута x:TypeArguments XAML. Класс OnPlatform определяет Default свойство, которое можно задать для значения, которое будет применяться ко всем платформам:
<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>
В этом примере Padding свойство имеет разные значения в iOS и Android, а другие платформы задают значение по умолчанию.
Класс OnPlatform также определяет Platforms свойство, которое является IList объектами On . Каждый On объект может задать Platform значение для определенной платформы и ValueThickness свойства. Кроме того, свойство On типаIList<string>, 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, Android" Value="10,20,20,10" />
</OnPlatform>
</ContentPage.Padding>
...
</ContentPage>
Это стандартный способ задать свойство, зависимое от Padding платформы, в XAML.
Примечание.
Value Если свойство On объекта не может быть представлено одной строкой, можно определить для него элементы свойств.
Дополнительные сведения см. в разделе "Настройка внешнего вида пользовательского интерфейса на основе платформы".
Следующие шаги
Расширения разметки XAML .NET MAUI позволяют задать свойства объектам или значениям, на которые ссылаются косвенно из других источников. Расширения разметки XAML особенно важны для совместного использования объектов и ссылок на константы, используемые во всем приложении.
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по