Sdílet prostřednictvím

Základní syntaxe XAML

  • Článek

Browse sample. Procházení ukázky

XAML je většinou navržený pro vytváření instancí a inicializaci objektů. Často však musí být vlastnosti nastaveny na složité objekty, které nelze snadno reprezentovat jako řetězce XML, a někdy vlastnosti definované jednou třídou musí být nastaveny v podřízené třídě. Tyto dva požadavky vyžadují základní funkce syntaxe XAML elementů vlastností a připojených vlastností.

Elementy vlastností

V uživatelském rozhraní .NET Multi-Platform App UI (.NET MAUI) XAML se vlastnosti tříd obvykle nastavují jako atributy XML:

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

Existuje však alternativní způsob, jak nastavit vlastnost v XAML:

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

Tyto dva příklady, které určují TextColor vlastnost, jsou funkčně ekvivalentní a umožňují zavedení některé základní terminologie:

  • Label je objektový prvek. Jedná se o objekt .NET MAUI vyjádřený jako element XML.
  • Text, VerticalOptionsFontAttributes a FontSize jsou atributy vlastností. Jedná se o vlastnosti .NET MAUI vyjádřené jako atributy XML.
  • V druhém příkladu TextColor se stal elementem vlastnosti. Jedná se o vlastnost .NET MAUI vyjádřenou jako element XML.

Poznámka:

V elementu vlastnosti je hodnota vlastnosti vždy definována jako obsah mezi počáteční a koncové značky element-element.

Syntaxi elementu property lze použít také u více než jedné vlastnosti objektu:

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

I když se syntaxe elementu property může zdát zbytečná, je nezbytné, když je hodnota vlastnosti příliš složitá, aby byla vyjádřena jako jednoduchý řetězec. V rámci značek elementů vlastností můžete vytvořit instanci jiného objektu a nastavit jeho vlastnosti. Grid Například rozložení má vlastnosti pojmenované RowDefinitions a ColumnDefinitions, které jsou typu RowDefinitionCollection a ColumnDefinitionCollection v uvedeném pořadí. Tyto typy jsou kolekce a ColumnDefinition objekty RowDefinition a obvykle k jejich nastavení používáte syntaxi elementu property:

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

Připojené vlastnosti

V předchozím příkladu jste viděli, že Grid prvky vlastnosti pro objekty RowDefinitions a ColumnDefinitions kolekce definují řádky a sloupce. To naznačuje, že musí existovat technika pro označení řádku a sloupce, kde se nachází každá podřízená položka Grid .

V rámci značky pro každou podřízenou část Grid zadáte řádek a sloupec tohoto podřízeného objektu pomocí Grid.ColumnGrid.Row atributů, které mají výchozí hodnoty 0. Můžete také určit, jestli podřízená položka zahrnuje více než jeden řádek nebo sloupec s Grid.RowSpan atributy, Grid.ColumnSpan které mají výchozí hodnoty 1.

Následující příklad ukazuje umístění podřízených Gridpoložek do :

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

Výsledkem tohoto xaml je následující rozložení:

.NET MAUI Grid layout.

Zdá Grid.Rowse, že Grid vlastnosti třídy , Grid.Column, Grid.RowSpana Grid.ColumnSpan atributy, ale tato třída nedefinuje nic pojmenovaného Row, , ColumnRowSpannebo ColumnSpan. Grid Místo toho třída definuje čtyři bindable vlastnosti s názvem RowProperty, ColumnProperty, RowSpanPropertya ColumnSpanProperty, které jsou speciální typy bindable vlastnosti známé jako připojené vlastnosti. Jsou definovány Grid třídou, ale nastaveny na podřízené Gridpoložky .

Poznámka:

Pokud chcete tyto připojené vlastnosti použít v kódu, Grid třída poskytuje statické metody s názvem GetRow, SetRow, , SetColumnGetColumn, GetRowSpan, SetRowSpan, , GetColumnSpana SetColumnSpan.

Připojené vlastnosti jsou rozpoznatelné v XAML jako atributy obsahující třídu i název vlastnosti oddělené tečkou. Nazývají se připojené vlastnosti , protože jsou definovány jednou třídou (v tomto případě Grid), ale připojeny k jiným objektům (v tomto případě podřízené položky Grid). Během rozložení může interrogovat hodnoty těchto připojených vlastností, abyste věděli, Grid kam umístit jednotlivé podřízené objekty.

Vlastnosti obsahu

V předchozím příkladu Grid byl objekt nastaven na Content vlastnost ContentPage. Na Content vlastnost se ale v XAML neodkazovala, ale může to být:

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

Vlastnost Content není vyžadována v JAZYCE XAML, protože prvky definované pro použití v .NET MAUI XAML mají povoleno mít jednu vlastnost určenou ContentProperty jako atribut třídy:

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

Jakákoli vlastnost zadaná jako ContentProperty třída znamená, že značky elementu property pro vlastnost nejsou vyžadovány. Výše uvedený příklad proto určuje, že k vlastnosti je přiřazen veškerý obsah XAML, který se zobrazí mezi počáteční a koncovou ContentPage značkou Content .

Mnoho tříd má ContentProperty také definice atributů. Například vlastnost Label obsahu je Text.

Rozdíly mezi platformami

Aplikace .NET MAUI můžou přizpůsobit vzhled uživatelského rozhraní na základě jednotlivých platforem. Toho lze dosáhnout v XAML pomocí a OnPlatformOn tříd:

<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 je obecná třída, takže je třeba zadat obecný typ argument, v tomto případě , Thicknesscož je typ Padding vlastnosti. Toho dosáhnete pomocí atributu x:TypeArguments XAML. Třída OnPlatform definuje Default vlastnost, která se dá nastavit na hodnotu, která se použije na všechny platformy:

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

V tomto příkladu Padding je vlastnost nastavena na různé hodnoty v iOSu a Androidu, přičemž ostatní platformy jsou nastaveny na výchozí hodnotu.

Třída OnPlatform také definuje Platforms vlastnost, která je objekty IListOn . Každý On objekt může nastavit Platform hodnotu a Value vlastnost pro definování Thickness hodnoty pro konkrétní platformu. Kromě toho Platform vlastnost On je typu IList<string>, takže můžete zahrnout více platforem, pokud jsou hodnoty stejné:

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

Toto je standardní způsob nastavení vlastnosti závislé Padding na platformě v JAZYCE XAML.

Poznámka:

Value Pokud vlastnost objektu On nemůže být reprezentována jedním řetězcem, můžete pro něj definovat prvky vlastnosti.

Další informace najdete v tématu Přizpůsobení vzhledu uživatelského rozhraní na základě platformy.

Další kroky

Rozšíření značek .NET MAUI XAML umožňují nastavit vlastnosti na objekty nebo hodnoty, na které se odkazuje nepřímo z jiných zdrojů. Rozšíření značek XAML jsou zvláště důležitá pro sdílení objektů a odkazování na konstanty používané v celé aplikaci.

Rozšíření značek XAML