Condividi tramite

Sintassi XAML essenziale

  • Articolo

Browse sample. Esplorare l'esempio

XAML è progettato principalmente per la creazione di istanze e l'inizializzazione di oggetti. Spesso, tuttavia, le proprietà devono essere impostate su oggetti complessi che non possono essere facilmente rappresentati come stringhe XML e talvolta le proprietà definite da una classe devono essere impostate su una classe figlio. Queste due esigenze richiedono le funzionalità di sintassi XAML essenziali degli elementi delle proprietà e delle proprietà associate.

Elementi della proprietà

In XAML .NET Multipiattaforma App UI (.NET MAUI) le proprietà delle classi vengono in genere impostate come attributi XML:

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

Esiste tuttavia un modo alternativo per impostare una proprietà in XAML:

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

Questi due esempi che specificano la TextColor proprietà sono equivalenti a livello funzionale e consentono l'introduzione di alcuni termini di base:

  • Labelè un elemento dell'oggetto. Si tratta di un oggetto MAUI .NET espresso come elemento XML.
  • Text, VerticalOptionsFontAttributes e FontSize sono attributi di proprietà. Sono proprietà MAUI .NET espresse come attributi XML.
  • Nel secondo esempio, TextColor è diventato un elemento di proprietà. Si tratta di una proprietà MAUI .NET espressa come elemento XML.

Nota

In un elemento property il valore della proprietà viene sempre definito come contenuto tra i tag iniziale e finale dell'elemento proprietà.

La sintassi degli elementi proprietà può essere usata anche in più proprietà di un oggetto:

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

Anche se la sintassi degli elementi di proprietà potrebbe sembrare superflua, è essenziale quando il valore di una proprietà è troppo complesso da esprimere come stringa semplice. All'interno dei tag property-element è possibile creare un'istanza di un altro oggetto e impostarne le proprietà. Ad esempio, il Grid layout ha proprietà denominate RowDefinitions e ColumnDefinitions, rispettivamente di tipo RowDefinitionCollection e ColumnDefinitionCollection . Questi tipi sono raccolte di oggetti e ColumnDefinition e in genere si usa la sintassi degli RowDefinition elementi di proprietà per impostarli:

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

Proprietà associate

Nell'esempio precedente è stato rilevato che l'oggetto Grid richiede elementi di proprietà per le RowDefinitions raccolte e ColumnDefinitions per definire le righe e le colonne. Ciò suggerisce che deve essere presente una tecnica per indicare la riga e la colonna in cui risiede ogni elemento figlio dell'oggetto Grid .

All'interno del tag per ogni elemento figlio di Grid si specifica la riga e la colonna di tale elemento figlio usando gli Grid.Row attributi e Grid.Column , con valori predefiniti pari a 0. È anche possibile indicare se un elemento figlio si estende su più righe o colonne con gli Grid.RowSpan attributi e Grid.ColumnSpan con valori predefiniti pari a 1.

Nell'esempio seguente viene illustrato l'inserimento di elementi figlio all'interno di un Gridoggetto :

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

Questo codice XAML restituisce il layout seguente:

.NET MAUI Grid layout.

Gli Grid.Rowattributi , Grid.RowSpanGrid.Column, e Grid.ColumnSpan sembrano essere proprietà della Grid classe , ma questa classe non definisce alcun elemento denominato Row, ColumnRowSpan, o ColumnSpan. La classe definisce invece Grid quattro proprietà associabili denominate RowProperty, ColumnProperty, RowSpanPropertye ColumnSpanProperty, che sono tipi speciali di proprietà associabili note come proprietà associate. Sono definiti dalla Grid classe ma impostati sugli elementi figlio di Grid.

Nota

Quando si desidera usare queste proprietà associate nel codice, la Grid classe fornisce metodi statici denominati GetRow, GetRowSpanSetRowSetColumnSetRowSpanGetColumnGetColumnSpane .SetColumnSpan

Le proprietà associate sono riconoscibili in XAML come attributi contenenti sia una classe che un nome di proprietà separati da un punto. Vengono chiamate proprietà associate perché sono definite da una classe (in questo caso , Grid) ma associate ad altri oggetti (in questo caso, elementi figlio di Grid). Durante il layout, può Grid interrogare i valori di queste proprietà associate per sapere dove posizionare ogni figlio.

Proprietà del contenuto

Nell'esempio precedente l'oggetto Grid è stato impostato sulla Content proprietà dell'oggetto ContentPage. Tuttavia, la Content proprietà non è stata fatto riferimento in XAML, ma può essere:

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

La Content proprietà non è necessaria in XAML perché gli elementi definiti per l'uso in XAML MAUI .NET possono avere una proprietà specificata come ContentProperty attributo nella classe :

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

Qualsiasi proprietà specificata come ContentProperty di una classe indica che i tag dell'elemento proprietà per la proprietà non sono obbligatori. Di conseguenza, l'esempio precedente specifica che qualsiasi contenuto XAML visualizzato tra i tag iniziale e finale ContentPage viene assegnato alla Content proprietà .

Molte classi hanno ContentProperty anche definizioni di attributi. Ad esempio, la proprietà content di Label è Text.

Differenze tra le piattaforme

Le app MAUI .NET possono personalizzare l'aspetto dell'interfaccia utente in base alla piattaforma. Questa operazione può essere ottenuta in XAML usando le OnPlatform classi e 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 è una classe generica ed è quindi necessario specificare l'argomento di tipo generico, in questo caso , Thicknessche è il tipo di Padding proprietà. Questo risultato viene ottenuto con l'attributo x:TypeArguments XAML. La OnPlatform classe definisce una Default proprietà che può essere impostata su un valore che verrà applicato a tutte le piattaforme:

<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 questo esempio la Padding proprietà è impostata su valori diversi in iOS e Android, con le altre piattaforme impostate sul valore predefinito.

La OnPlatform classe definisce anche una Platforms proprietà , ovvero un IList oggetto di On oggetti . Ogni On oggetto può impostare la Platform proprietà e Value per definire il Thickness valore per una piattaforma specifica. Inoltre, la Platform proprietà di On è di tipo IList<string>, quindi è possibile includere più piattaforme se i valori sono gli stessi:

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

Questo è il modo standard per impostare una proprietà dipendente dalla Padding piattaforma in XAML.

Nota

Se la Value proprietà di un On oggetto non può essere rappresentata da una singola stringa, è possibile definirne gli elementi di proprietà.

Per altre informazioni, vedere Personalizzare l'aspetto dell'interfaccia utente in base alla piattaforma.

Passaggi successivi

Le estensioni di markup XAML .NET MAUI consentono di impostare le proprietà su oggetti o valori a cui si fa riferimento indirettamente da altre origini. Le estensioni di markup XAML sono particolarmente importanti per la condivisione degli oggetti e il riferimento alle costanti usate in un'app.

Estensioni di markup XAML