Využívání rozšíření značek XAML

  • Článek
  • 12 min ke čtení

Projděte si ukázku. Procházení ukázky

Rozšíření značek XAML pro více platforem .NET (.NET MAUI) pomáhají vylepšit výkon a flexibilitu XAML tím, že umožňují nastavit atributy elementů z různých zdrojů.

Vlastnost například obvykle nastavíte ColorBoxView takto:

<BoxView Color="Blue" />

Můžete ale raději nastavit Color atribut z hodnoty uložené ve slovníku prostředků nebo z hodnoty statické vlastnosti třídy, kterou jste vytvořili, nebo z vlastnosti typu Color jiného prvku na stránce nebo vytvořeného ze samostatných odstínů, sytosti a světelnosti hodnot. Všechny tyto možnosti jsou možné pomocí rozšíření značek XAML.

Rozšíření značek je jiný způsob, jak vyjádřit atribut prvku. Rozšíření značek XAML .NET MAUI jsou obvykle identifikovatelná hodnotou atributu, která je uzavřena ve složených závorkách:

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

Jakákoli hodnota atributu ve složených závorkách je vždy rozšíření značek XAML. Na rozšíření značek XAML se ale dá odkazovat i bez použití složených závorek.

Poznámka

Několik rozšíření značek XAML je součástí specifikace XAML 2009. Tyto soubory se zobrazují v souborech XAML s předponou vlastního x oboru názvů a běžně se označují s touto předponou.

Kromě rozšíření značek, která jsou popsána v tomto článku, jsou následující rozšíření značek zahrnuta v .NET MAUI a popsána v dalších článcích:

  • StaticResource – odkazy na objekty ze slovníku prostředků. Další informace najdete v tématu Slovníky zdrojů**.
  • DynamicResource – reagovat na změny v objektech ve slovníku prostředků. Další informace najdete v tématu Dynamické styly**.
  • Binding - vytvořte propojení mezi vlastnostmi dvou objektů. Další informace najdete v tématu Datová vazba**.
  • TemplateBinding – provádí datovou vazbu ze šablony ovládacího prvku. Další informace najdete v tématu Šablony ovládacích prvků.
  • RelativeSource - nastaví zdroj vazby vzhledem k pozici cíle vazby. Další informace najdete v tématu Relativní vazby.

x:Static markup extension

Rozšíření x:Static značek je podporováno StaticExtension třídou. Třída má jednu vlastnost s názvem Member typu string , kterou jste nastavili na název veřejné konstanty, statické vlastnosti, statického pole nebo výčtu člen.

Jedním ze způsobů, jak použít x:Static , je nejprve definovat třídu s některými konstantami nebo statickými proměnnými, jako je tato AppConstants třída:

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

Následující XAML ukazuje nejrozsáhodnější přístup k vytvoření instance StaticExtension třídy mezi Label.FontSize značkami property-element:

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

Analyzátor XAML také umožňuje StaticExtension , aby třída byla zkrácena takto x:Static:

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

Tuto syntaxi lze ještě dále zjednodušit tím StaticExtension , že třídu a nastavení člena umístíte do složených závorek. Výsledný výraz je nastavený přímo na FontSize atribut:

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

V tomto příkladu nejsou v závorkách žádné uvozovky. Vlastnost MemberStaticExtension již není atributEM XML. Místo toho je součástí výrazu pro rozšíření značek.

Stejně jako když ho použijete jako prvek objektu, můžete ho také zkrátit x:StaticExtensionx:Static ve výrazu ve složených závorkách:

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

Třída StaticExtension má ContentProperty atribut odkazující na vlastnost , která označuje tuto vlastnost Memberjako výchozí vlastnost obsahu třídy. U rozšíření značek XAML vyjádřených složenými závorkami můžete odstranit Member= část výrazu:

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

Toto je nejběžnější forma x:Static rozšíření značek.

Kořenová značka příkladu XAML obsahuje také deklaraci oboru názvů XML pro obor názvů .NET System . To umožňuje Label nastavit velikost písma na statické pole Math.PI. Výsledkem je spíše malý text, takže Scale vlastnost je nastavena na Math.E:

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

Následující snímek obrazovky znázorňuje výstup XAML:

x:Static demo.

x:Reference – rozšíření značek

Rozšíření x:Reference značek je podporováno ReferenceExtension třídou. Třída má jednu vlastnost s názvem Name typu string , kterou jste nastavili na název elementu na stránce, která má název s x:Name. Tato Name vlastnost je vlastnost ReferenceExtensionobsahu , takže Name= není vyžadována při x:Reference zobrazení v složených závorkách. Rozšíření x:Reference značek se používá výhradně s datovými vazbami. Další informace o datovýchvazbch

Následující příklad XAML ukazuje dvě použití x:Reference s datovými vazbami, první, kde se používá k nastavení Source vlastnosti Binding objektu, a druhý, kde se používá k nastavení BindingContext vlastnosti pro dvě datové vazby:

<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 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 BindingContext="{x:Reference slider}"
               Text="{Binding Value, StringFormat='{0:F0}&#x00B0; rotation'}"
               Rotation="{Binding Value}"
               FontSize="24"
               HorizontalOptions="Center"
               VerticalOptions="Center" />        
    </StackLayout>
</ContentPage>

V tomto příkladu oba x:Reference výrazy používají zkrácenou verzi ReferenceExtension názvu třídy a eliminují Name= část výrazu. V prvním příkladu x:Reference je rozšíření značek vložené do Binding rozšíření značek a SourceStringFormat vlastnosti jsou oddělené čárkami.

Následující snímek obrazovky znázorňuje výstup XAML:

x:Reference demo.

x:Type – rozšíření značek

Rozšíření x:Type značek je ekvivalentem XAML klíčového slova jazyka C# typeof . TypeExtension Podporuje ji třída, která definuje vlastnost s názvem TypeName typustring, která by měla být nastavena na název třídy nebo struktury. Rozšíření x:Type značek vrátí Type objekt této třídy nebo struktury. TypeName je vlastnost TypeExtensionobsahu , takže TypeName= není vyžadována, pokud x:Type se zobrazí s složenými závorkami.

Rozšíření x:Type značek se běžně používá s rozšířením x:Array značek. Další informace najdete v tématu x:Array markup extension.

Následující příklad XAML ukazuje použití x:Type rozšíření značek k vytvoření instance objektů .NET MAUI a jejich přidání do StackLayout. XAML se skládá ze tří Button prvků s jejich Command vlastnostmi nastavenými na Binding a CommandParameter vlastností nastavených na typy tří zobrazení .NET MAUI:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.TypeDemoPage"
             Title="x:Type Demo">    
    <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>

Soubor s kódem definuje a inicializuje CreateCommand vlastnost:

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

Button Při stisknutí nové instance argumentu CommandParameter se vytvoří a přidá do .StackLayout Tři Button objekty pak sdílí stránku s dynamicky vytvořenými zobrazeními:

x:Type demo.

x:Array – rozšíření značek

Rozšíření x:Array značek umožňuje definovat pole v revizích. Třída ji podporuje ArrayExtension , která definuje dvě vlastnosti:

  • TypeTypetypu , který označuje typ prvků v poli. Tato vlastnost by měla být nastavena x:Type na rozšíření značek.
  • Items typu IList, což je kolekce samotných položek. Toto je vlastnost obsahu .ArrayExtension

Samotné x:Array rozšíření značek se nikdy nezobrazuje ve složených závorkách. x:Array Místo toho počáteční a koncové značky odděluje seznam položek.

Následující příklad XAML ukazuje, jak použít x:Array k přidání položek do pole ListView nastavením ItemsSource vlastnosti:

<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>
                <ViewCell>
                    <BoxView Color="{Binding}"
                             Margin="3" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

V tomto příkladu ViewCell vytvoří jednoduchou BoxView pro každou položku barev:

x:Array demo.

Poznámka

Při definování polí běžných typů, jako jsou řetězce nebo čísla, použijte značky primitiv jazyka XAML uvedené v argumentech Pass.

x:Null – rozšíření značek

Rozšíření x:Null značek je podporováno NullExtension třídou. Neobsahuje žádné vlastnosti a je jednoduše ekvivalentem XAML klíčového slova jazyka C# null .

Následující příklad XAML ukazuje, jak použít x:Null rozšíření značek:

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

V tomto příkladu je implicitní Style definován pro Label to, že obsahuje Setter vlastnost, která nastaví FontFamily vlastnost na konkrétní písmo. Třetí Label se však vyhnout použití písma definovaného v implicitním stylu nastavením jeho FontFamily na x:Null:

x:Null demo.

Rozšíření značek OnPlatform

Rozšíření značek OnPlatform umožňuje přizpůsobit vzhled uživatelského rozhraní podle platformy. Poskytuje stejné funkce jako OnPlatform třídy a On třídy, ale s stručnější reprezentací.

Rozšíření OnPlatform značek je podporováno OnPlatformExtension třídou, která definuje následující vlastnosti:

  • Default typu object, který jste nastavili na výchozí hodnotu, která se má použít u vlastností, které představují platformy.
  • Android typu object, který jste nastavili na hodnotu, která se má použít v Androidu.
  • iOS typu object, který jste nastavili na hodnotu, která se má použít v iOSu.
  • MacCatalyst typu object, který jste nastavili na hodnotu, která se má použít na Mac Catalyst.
  • Tizen typu object, který jste nastavili na hodnotu, která se má použít na platformě Tizen.
  • WinUI typu object, který jste nastavili na hodnotu, která se má použít pro WinUI.
  • Converter typu IValueConverter, který lze nastavit na implementaci IValueConverter .
  • ConverterParameter typu object, který lze nastavit na hodnotu, která se má předat implementaci IValueConverter .

Poznámka

Analyzátor XAML umožňuje OnPlatformExtension , aby třída byla zkrácena jako OnPlatform.

Vlastnost Default je vlastnost obsahu .OnPlatformExtension Proto u výrazů značek XAML vyjádřených složenými závorkami můžete odstranit Default= část výrazu za předpokladu, že se jedná o první argument. Default Pokud vlastnost není nastavená, nastaví se výchozí BindableProperty.DefaultValue hodnota vlastnosti za předpokladu, že rozšíření značek cílí na BindableProperty.

Důležité

Analyzátor XAML očekává, že hodnoty správného typu budou poskytovány vlastnostem OnPlatform , které využívají rozšíření značek. Pokud je převod typu nutný, OnPlatform rozšíření značek se ho pokusí provést pomocí výchozích převaděčů poskytovaných Xamarin.Forms. Existují však některé převody typů, které nelze provést ve výchozím převaděči a v těchto případech Converter by vlastnost měla být nastavena na implementaci IValueConverter .

Na stránce OnPlatform Demo se dozvíte, jak používat OnPlatform rozšíření značek:

<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
         WidthRequest="{OnPlatform 250, iOS=200, Android=300}"  
         HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
         HorizontalOptions="Center" />

V tomto příkladu všechny tři OnPlatform výrazy používají zkrácenou verzi OnPlatformExtension názvu třídy. OnPlatform Tři rozšíření značek nastavily Color, WidthRequesta HeightRequest vlastnosti BoxView na různé hodnoty v iOSu a Androidu. Rozšíření značek také poskytují výchozí hodnoty těchto vlastností na platformách, které nejsou zadané, a zároveň eliminují Default= část výrazu.

Rozšíření značek OnIdiom

Rozšíření OnIdiom značek umožňuje přizpůsobit vzhled uživatelského rozhraní na základě iddiomu zařízení, na kterém aplikace běží. OnIdiomExtension Podporuje ji třída, která definuje následující vlastnosti:

  • Default typu object, které jste nastavili na výchozí hodnotu, která se má použít u vlastností, které představují idiomy zařízení.
  • Phone typu object, který jste nastavili na hodnotu, která se má použít na telefonech.
  • Tablet typu object, který jste nastavili na hodnotu, která se má použít na tabletech.
  • Desktop typu object, který jste nastavili na hodnotu, která se má použít na desktopových platformách.
  • TV typu object, který jste nastavili na hodnotu, která se má použít na televizních platformách.
  • Watch typu object, který jste nastavili na hodnotu, která se má použít na platformách Watch.
  • Converter typu IValueConverter, který lze nastavit na implementaci IValueConverter .
  • ConverterParameter typu object, který lze nastavit na hodnotu, která se má předat implementaci IValueConverter .

Poznámka

Analyzátor XAML umožňuje OnIdiomExtension , aby třída byla zkrácena jako OnIdiom.

Vlastnost Default je vlastnost obsahu .OnIdiomExtension Proto u výrazů značek XAML vyjádřených složenými závorkami můžete odstranit Default= část výrazu za předpokladu, že se jedná o první argument.

Důležité

Analyzátor XAML očekává, že hodnoty správného typu budou poskytovány vlastnostem OnIdiom , které využívají rozšíření značek. Pokud je převod typu nutný, OnIdiom rozšíření značek se pokusí provést ho pomocí výchozích převaděčů poskytovaných rozhraním .NET MAUI. Existují však některé převody typů, které nelze provést ve výchozím převaděči a v těchto případech Converter by vlastnost měla být nastavena na implementaci IValueConverter .

Následující příklad XAML ukazuje, jak použít OnIdiom rozšíření značek:

<BoxView Color="{OnIdiom Yellow, Phone=Red, Tablet=Green, Desktop=Blue}"
         WidthRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HeightRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HorizontalOptions="Center" />

V tomto příkladu všechny tři OnIdiom výrazy používají zkrácenou verzi OnIdiomExtension názvu třídy. OnIdiom Tři rozšíření značek nastavují Color, WidthRequesta HeightRequest vlastnosti BoxView na různé hodnoty na telefonu, tabletu a desktopové idiomy. Rozšíření značek také poskytují výchozí hodnoty těchto vlastností na idioms, které nejsou zadány, a současně eliminují Default= část výrazu.

Rozšíření značek DataTemplate

Rozšíření DataTemplate značek umožňuje převést typ na DataTemplate. DataTemplateExtension Podporuje ji třída, která definuje TypeName vlastnost typu string, která je nastavena na název typu, který se má převést na DataTemplate. Vlastnost TypeName je vlastnost obsahu .DataTemplateExtension Proto pro výrazy značek XAML vyjádřené složenými závorkami můžete odstranit TypeName= část výrazu.

Poznámka

Analyzátor XAML umožňuje DataTemplateExtension , aby třída byla zkrácena jako DataTemplate.

Typické použití tohoto rozšíření značek je v aplikaci Shell, jak je znázorněno v následujícím příkladu:

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

V tomto příkladu MonkeysPage je převeden z objektu DataTemplatena ContentPage hodnotu , která je nastavena jako hodnota ShellContent.ContentTemplate vlastnosti. Tím zajistíte, že MonkeysPage se vytvoří pouze při navigaci na stránku, nikoli při spuštění aplikace.

Další informace o aplikacích shellu najdete v tématu Shell.

Rozšíření značek FontImage

Rozšíření FontImage značek umožňuje zobrazit ikonu písma v libovolném zobrazení, které může zobrazit ImageSource. Poskytuje stejné funkce jako FontImageSource třída, ale s stručnější reprezentací.

Rozšíření FontImage značek je podporováno FontImageExtension třídou, která definuje následující vlastnosti:

  • FontFamily typ string, rodina písem, ke které patří ikona písma.
  • Glyph typu string, znak unicode hodnota ikony písma.
  • Color typ Color, barva, která se má použít při zobrazení ikony písma.
  • Size typu double, velikost v jednotkách nezávislých na zařízeních ikony vykresleného písma. Výchozí hodnota je 30. Kromě toho lze tuto vlastnost nastavit na pojmenovanou velikost písma.

Poznámka

Analyzátor XAML umožňuje FontImageExtension , aby třída byla zkrácena jako FontImage.

Vlastnost Glyph je vlastnost obsahu .FontImageExtension Proto u výrazů značek XAML vyjádřených složenými závorkami můžete odstranit Glyph= část výrazu za předpokladu, že se jedná o první argument.

Následující příklad XAML ukazuje, jak použít FontImage rozšíření značek:

<Image BackgroundColor="#D1D1D1"
       Source="{FontImage &#xf30c;, FontFamily=Ionicons, Size=44}" />

V tomto příkladu se zkrácená verze FontImageExtension názvu třídy používá k zobrazení ikony XBox z řady písem Ionicons v :Image

Snímek obrazovky s rozšířením značek FontImage

I když je \uf30cznak unicode ikony , musí být řídicí v XAML a tak se stane &#xf30c;.

Informace o zobrazení ikon písem zadáním dat ikon písma v objektu FontImageSource najdete v tématu Zobrazení ikon písem.

Rozšíření značek AppThemeBinding

Rozšíření AppThemeBinding značek umožňuje určit prostředek, který se má využívat, například obrázek nebo barva, na základě aktuálního systémového motivu.

Rozšíření AppThemeBinding značek je podporováno AppThemeBindingExtension třídou, která definuje následující vlastnosti:

  • Default, typu object, který jste nastavili na prostředek, který se má používat ve výchozím nastavení.
  • Light, typu object, který jste nastavili na prostředek, který se má použít, když zařízení používá jeho světlý motiv.
  • Dark, typu object, který jste nastavili na prostředek, který se má použít, když zařízení používá tmavý motiv.
  • Value, typu object, který vrací prostředek, který aktuálně používá rozšíření značek.

Poznámka

Analyzátor XAML umožňuje AppThemeBindingExtension , aby třída byla zkrácena jako AppBindingTheme.

Vlastnost Default je vlastnost obsahu .AppThemeBindingExtension Proto u výrazů značek XAML vyjádřených složenými závorkami můžete odstranit Default= část výrazu za předpokladu, že se jedná o první argument.

Následující příklad XAML ukazuje, jak použít AppThemeBinding rozšíření značek:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.AppThemeBindingDemoPage"
             Title="AppThemeBinding Demo">
    <ContentPage.Resources>
        <Style x:Key="labelStyle"
               TargetType="Label">
            <Setter Property="TextColor"
                    Value="{AppThemeBinding Black, Light=Blue, Dark=Teal}" />
        </Style>
    </ContentPage.Resources>

    <StackLayout Margin="20">
        <Label Text="This text is green in light mode, and red in dark mode."
               TextColor="{AppThemeBinding Light=Green, Dark=Red}" />
        <Label Text="This text is black by default, blue in light mode, and teal in dark mode."
               Style="{StaticResource labelStyle}" />
    </StackLayout>
</ContentPage>

V tomto příkladu je barva textu první Label nastavená na zelenou, když zařízení používá světlý motiv, a je nastavena na červenou, když zařízení používá tmavý motiv. Label Druhá má vlastnost TextColor nastavenou Styleprostřednictvím . Tím Style nastavíte barvu Label textu na černou, na modrou, když zařízení používá světlý motiv, a na teal, když zařízení používá tmavý motiv:

Ukázka AppThemeBinding