Delen via

XAML-markeringsextensies gebruiken

  • Artikel

Blader door het voorbeeld. Blader door het voorbeeld

.NET Multi-platform App UI (.NET MAUI) XAML markerextensies helpen de kracht en flexibiliteit van XAML te verbeteren doordat elementkenmerken vanuit verschillende bronnen kunnen worden ingesteld.

U stelt bijvoorbeeld meestal de eigenschap Color van BoxView als volgt in:

<BoxView Color="Blue" />

In plaats daarvan kunt u het kenmerk Color instellen op basis van een waarde die is opgeslagen in een resourcewoordenlijst, of van de waarde van een statische eigenschap van een klasse die u hebt gemaakt, of van een eigenschap van het type Color van een ander element op de pagina, of samengesteld uit afzonderlijke tint-, verzadigings- en helderheidswaarden. Al deze opties zijn mogelijk met behulp van XAML-markeringsextensies.

Een markeringsextensie is een andere manier om een kenmerk van een element uit te drukken. .NET MAUI XAML-markeringsextensies zijn meestal identificeerbaar door een kenmerkwaarde die is ingesloten in accolades:

<BoxView Color="{StaticResource themeColor}" />

Elke kenmerkwaarde in accolades is altijd een XAML markup-extensie. Er kan echter ook naar XAML-markupextensies worden verwezen zonder gebruik te maken van accolades.

Notitie

Verschillende XAML-markeringsextensies maken deel uit van de XAML 2009-specificatie. Deze worden weergegeven in XAML-bestanden met het aangepaste x naamruimtevoorvoegsel en worden meestal aangeduid met dit voorvoegsel.

Naast de markeringsextensies die in dit artikel worden besproken, worden de volgende markeringsextensies opgenomen in .NET MAUI en besproken in andere artikelen:

x:Static markup extension

De x:Static-extensie voor markeringen wordt ondersteund door de StaticExtension-klasse. De klasse heeft één eigenschap met de naam Member van het type string die u instelt op de naam van een openbare constante, statische eigenschap, statisch veld of opsommingslid.

Een manier om x:Static te gebruiken, is door eerst een klasse te definiëren met enkele constanten of statische variabelen, zoals deze AppConstants klasse:

static class AppConstants
{
    public static double NormalFontSize = 18;
}

In de volgende XAML ziet u de meest uitgebreide benadering voor het instantiëren van de StaticExtension-klasse tussen Label.FontSize tags voor eigenschapselementen:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             xmlns:local="clr-namespace:MarkupExtensions"
             x:Class="MarkupExtensions.StaticDemoPage"
             Title="x:Static Demo">
    <StackLayout Margin="10, 0">
        <Label Text="Label No. 1">
            <Label.FontSize>
                <x:StaticExtension Member="local:AppConstants.NormalFontSize" />
            </Label.FontSize>
        </Label>
        ···
    </StackLayout>
</ContentPage>

Met de XAML-parser kan de StaticExtension klasse ook worden afgekort als x:Static:

<Label Text="Label No. 2">
    <Label.FontSize>
        <x:Static Member="local:AppConstants.NormalFontSize" />
    </Label.FontSize>
</Label>

Deze syntaxis kan nog verder worden vereenvoudigd door de StaticExtension klasse en de lidinstelling in accolades te plaatsen. De resulterende expressie wordt rechtstreeks ingesteld op het kenmerk FontSize:

<Label Text="Label No. 3"
       FontSize="{x:StaticExtension Member=local:AppConstants.NormalFontSize}" />

In dit voorbeeld zijn er geen aanhalingstekens binnen de accolades. De eigenschap Member van StaticExtension is geen XML-kenmerk meer. Het is daarentegen een deel van de expressie voor de markeringsextensie.

Net zoals u x:StaticExtension kunt afkorten tot x:Static wanneer u het als objectelement gebruikt, kunt u deze ook in de expressie in accolades afkorten:

<Label Text="Label No. 4"
       FontSize="{x:Static Member=local:AppConstants.NormalFontSize}" />

De StaticExtension-klasse heeft een ContentProperty kenmerk dat verwijst naar de eigenschap Member, waarmee deze eigenschap wordt gemarkeerd als de standaardeigenschap voor inhoud van de klasse. Voor XAML-markuurextensies die worden uitgedrukt met accolades, kunt u het Member=-deel van de uitdrukking elimineren.

<Label Text="Label No. 5"
       FontSize="{x:Static local:AppConstants.NormalFontSize}" />

Dit is de meest voorkomende vorm van de x:Static markeringsextensie.

De hoofdtag van het XAML-voorbeeld bevat ook een XML-naamruimtedeclaratie voor de .NET-System-naamruimte. Hierdoor kan de tekengrootte van het Label worden ingesteld op het statische veld Math.PI. Dit resulteert in vrij kleine tekst, dus de eigenschap Scale is ingesteld op Math.E:

<Label Text="&#x03C0; &#x00D7; E sized text"
       FontSize="{x:Static sys:Math.PI}"
       Scale="{x:Static sys:Math.E}"
       HorizontalOptions="Center" />

In de volgende schermopname ziet u de XAML-uitvoer:

x:Static demo.

x:Verwijzingsmarkeringsextensie

De x:Reference-extensie voor markeringen wordt ondersteund door de ReferenceExtension-klasse. De klasse heeft één eigenschap met de naam Name van het type string die u hebt ingesteld op de naam van een element op de pagina die een naam met x:Nameheeft gekregen. Deze Name eigenschap is de inhoudseigenschap van ReferenceExtension, dus Name= is niet vereist wanneer x:Reference in accolades wordt weergegeven. De x:Reference-extensie voor markeringen wordt uitsluitend gebruikt met gegevensbindingen. Zie Gegevensbindingvoor meer informatie over gegevensbindingen.

In het volgende XAML-voorbeeld ziet u twee toepassingen van x:Reference met gegevensbindingen, de eerste waar deze wordt gebruikt om de eigenschap Source van het Binding-object in te stellen en de tweede waar deze wordt gebruikt om de eigenschap BindingContext voor twee gegevensbindingen in te stellen:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.ReferenceDemoPage"
             x:Name="page"
             Title="x:Reference Demo">    
    <StackLayout Margin="10, 0">        
        <Label x:DataType="ContentPage"
               Text="{Binding Source={x:Reference page},
                              StringFormat='The type of this page is {0}'}"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalTextAlignment="Center" />
        <Slider x:Name="slider"
                Maximum="360"
                VerticalOptions="Center" />
        <Label x:DataType="Slider"
               BindingContext="{x:Reference slider}"
               Text="{Binding Value, StringFormat='{0:F0}&#x00B0; rotation'}"
               Rotation="{Binding Value}"
               FontSize="24"
               HorizontalOptions="Center"
               VerticalOptions="Center" />        
    </StackLayout>
</ContentPage>

In dit voorbeeld gebruiken beide x:Reference expressies de verkorte versie van de ReferenceExtension-klassenaam en elimineert u het Name= deel van de expressie. In het eerste voorbeeld wordt de x:Reference markeringsextensie ingesloten in de Binding markeringsextensie en worden de eigenschappen Source en StringFormat gescheiden door komma's.

In de volgende schermopname ziet u de XAML-uitvoer:

x:Reference demo.

x:Type markup-extensie

De x:Type markeringsextensie is het XAML-equivalent van het trefwoord C# typeof. Deze wordt ondersteund door de TypeExtension-klasse, waarmee een eigenschap met de naam TypeName van het type string wordt gedefinieerd die moet worden ingesteld op een klasse- of structuurnaam. De x:Type markeringsextensie retourneert het Type object van die klasse of structuur. TypeName is de inhoudseigenschap van TypeExtension, dus TypeName= is niet vereist wanneer x:Type met accolades wordt weergegeven.

De x:Type-markeringsextensie wordt vaak gebruikt met de x:Array markeringsextensie. Zie x:Array markup extensionvoor meer informatie.

In het volgende XAML-voorbeeld ziet u hoe u de x:Type markup-extensie kunt gebruiken om .NET MAUI-objecten te instantiëren en toe te voegen aan een StackLayout. De XAML bestaat uit drie Button elementen met hun Command eigenschappen ingesteld op een Binding en de CommandParameter eigenschappen ingesteld op typen van drie .NET MAUI-weergaven:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MarkupExtensions"
             x:Class="MarkupExtensions.TypeDemoPage"
             Title="x:Type Demo"
             x:DataType="local:TypeDemoPage">
    <StackLayout x:Name="stackLayout"
                 Padding="10, 0">
        <Button Text="Create a Slider"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Slider}" />
        <Button Text="Create a Stepper"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Stepper}" />
        <Button Text="Create a Switch"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Switch}" />
    </StackLayout>
</ContentPage>

Het code-behind-bestand definieert en initialiseert de eigenschap CreateCommand:

public partial class TypeDemoPage : ContentPage
{
    public ICommand CreateCommand { get; private set; }

    public TypeDemoPage()
    {
        InitializeComponent();

        CreateCommand = new Command<Type>((Type viewType) =>
        {
            View view = (View)Activator.CreateInstance(viewType);
            view.VerticalOptions = LayoutOptions.Center;
            stackLayout.Add(view);
        });

        BindingContext = this;
    }
}

Wanneer op een Button wordt gedrukt, wordt een nieuw exemplaar van het argument CommandParameter gemaakt en toegevoegd aan de StackLayout. De drie Button objecten delen de pagina vervolgens met dynamisch gemaakte weergaven:

x:Type demo.

Algemene typen kunnen worden opgegeven met de x:Type markeringsextensie door de algemene beperking op te geven als een voorvoegseltekenreeksargument tussen haakjes:

<x:Array Type="{x:Type local:MyType(local:MyObject)}">
    ...
</x:Array>

Meerdere typeargumenten kunnen worden opgegeven als voorvoegseltekenreeksargumenten, gescheiden door een komma:

<x:Array Type="{x:Type local:MyType(local:MyObject,x:Boolean)}">
    ...
</x:Array>

Zie Genericsvoor meer informatie over generics in XAML.

x:Array-markupextensie

Met de markup-extensie x:Array kunt u een array definiëren in markup. Het wordt ondersteund door de ArrayExtension-klasse, waarmee twee eigenschappen worden gedefinieerd:

  • Type van het type Type, waarmee het type elementen in de matrix wordt aangegeven. Deze eigenschap moet worden ingesteld op een x:Type markeringsextensie.
  • Items van het type IList, wat een verzameling is van de items zelf. Dit is de inhoudseigenschap van ArrayExtension.

De x:Array markup-extensie zelf wordt nooit weergegeven in accolades. In plaats daarvan markeren de begin- en eindtags x:Array de lijst met items.

In het volgende XAML-voorbeeld ziet u hoe u x:Array kunt gebruiken om items toe te voegen aan een ListView door de eigenschap ItemsSource in te stellen op een matrix:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.ArrayDemoPage"
             Title="x:Array Demo Page">
    <ListView Margin="10">
        <ListView.ItemsSource>
            <x:Array Type="{x:Type Color}">
                <Color>Aqua</Color>
                <Color>Black</Color>
                <Color>Blue</Color>
                <Color>Fuchsia</Color>
                <Color>Gray</Color>
                <Color>Green</Color>
                <Color>Lime</Color>
                <Color>Maroon</Color>
                <Color>Navy</Color>
                <Color>Olive</Color>
                <Color>Pink</Color>
                <Color>Purple</Color>
                <Color>Red</Color>
                <Color>Silver</Color>
                <Color>Teal</Color>
                <Color>White</Color>
                <Color>Yellow</Color>
            </x:Array>
        </ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="Color">
                <ViewCell>
                    <BoxView Color="{Binding}"
                             Margin="3" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

In dit voorbeeld maakt de ViewCell een eenvoudig BoxView voor elke kleurvermelding:

x:Array demo.

Notitie

Wanneer u arrays van veelgebruikte typen, zoals tekenreeksen of getallen, definieert, gebruikt u de XAML-taalprimitieven tags die worden vermeld in Pass-argumenten.

x:Null markup-extensie

De x:Null-extensie voor markeringen wordt ondersteund door de NullExtension-klasse. Het heeft geen eigenschappen en is gewoon het XAML-equivalent van het C# null trefwoord.

In het volgende XAML-voorbeeld ziet u hoe u de x:Null markeringsextensie gebruikt:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.NullDemoPage"
             Title="x:Null Demo">
    <ContentPage.Resources>
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="48" />
            <Setter Property="FontFamily" Value="OpenSansRegular" />
        </Style>
    </ContentPage.Resources>

    <StackLayout Padding="10, 0">
        <Label Text="Text 1" />
        <Label Text="Text 2" />
        <Label Text="Text 3"
               FontFamily="{x:Null}" />
        <Label Text="Text 4" />
        <Label Text="Text 5" />
    </StackLayout>
</ContentPage>

In dit voorbeeld wordt een impliciete Style gedefinieerd voor Label met een Setter waarmee de eigenschap FontFamily wordt ingesteld op een specifiek lettertype. Het derde Label echter vermijdt het gebruik van het lettertype dat is gedefinieerd in de impliciete stijl door de FontFamily in te stellen op x:Null:

x:Null-demo

DataTemplate-opmaakextensie

Met de DataTemplate markeringsextensie kunt u een type converteren naar een DataTemplate. Het wordt ondersteund door de DataTemplateExtension-klasse, die een TypeName eigenschap definieert van het type string, dat is ingesteld op de naam van het type dat moet worden geconverteerd naar een DataTemplate. De eigenschap TypeName is de inhoudseigenschap van DataTemplateExtension. Voor XAML-opmaakexpressies die worden uitgedrukt met accolades, kunt u daarom het TypeName= deel van de expressie elimineren.

Notitie

Met de XAML-parser kan de DataTemplateExtension klasse worden afgekort als DataTemplate.

Een typisch gebruik van deze markeringsextensie bevindt zich in een Shell-toepassing, zoals wordt weergegeven in het volgende voorbeeld:

<ShellContent Title="Monkeys"
              Icon="monkey.png"
              ContentTemplate="{DataTemplate views:MonkeysPage}" />

In dit voorbeeld wordt MonkeysPage geconverteerd van een ContentPage naar een DataTemplate, die is ingesteld als de waarde van de eigenschap ShellContent.ContentTemplate. Dit zorgt ervoor dat MonkeysPage alleen wordt gemaakt wanneer de navigatie naar de pagina plaatsvindt, in plaats van bij het opstarten van de toepassing.

Zie Shell-voor meer informatie over Shell-apps.