Основной синтаксис 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
, илиColumnSpan
Column
RowSpan
.Grid.ColumnSpan
Grid.Column
Grid.Row
Вместо этого Grid класс определяет четыре привязываемых свойства с именем RowProperty
, ColumnProperty
и RowSpanProperty
ColumnSpanProperty
, которые являются специальными типами привязываемых свойств, известных как присоединенные свойства. Они определяются классом Grid , но задаются на дочерних элементах Grid.
Примечание.
Если вы хотите использовать эти присоединенные свойства в кодеGrid, класс предоставляет статические методы с именем GetRow
, SetRow
, , GetColumn
, SetColumn
, GetColumnSpan
GetRowSpan
SetRowSpan
и .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
значение для определенной платформы и Value
Thickness
свойства. Кроме того, свойство 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 особенно важны для совместного использования объектов и ссылок на константы, используемые во всем приложении.
Обратная связь
https://aka.ms/ContentUserFeedback.
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделеОтправить и просмотреть отзыв по