Consommation des extensions de balisage XAML

Télécharger l’exemple

Les extensions de balisage XAML permettent d’améliorer la puissance et la flexibilité de XAML en autorisant la définition d’attributs d’éléments à partir de diverses sources. Plusieurs extensions de balisage XAML font partie de la spécification XAML 2009. Ceux-ci apparaissent dans les fichiers XAML avec le préfixe d’espace de noms habituel x et sont couramment référencés avec ce préfixe. Cet article décrit les extensions de balisage suivantes :

• x:Static : référence des propriétés statiques, des champs ou des membres d’énumération.
• x:Reference : référence des éléments nommés sur la page.
• x:Type : définissez un attribut sur un System.Type objet.
• x:Array : construisez un tableau d’objets d’un type particulier.
• x:Null : définissez un attribut sur une null valeur.
• OnPlatform : personnaliser l’apparence de l’interface utilisateur par plateforme.
• OnIdiom : personnalisez l’apparence de l’interface utilisateur en fonction de l’idiome de l’appareil sur lequel l’application s’exécute.
• DataTemplate : convertit un type en DataTemplate.
• FontImage : affiche une icône de police dans n’importe quelle vue qui peut afficher un ImageSource.
• AppThemeBinding : consommez une ressource basée sur le thème système actuel.

Les extensions de balisage XAML supplémentaires ont toujours été prises en charge par d’autres implémentations XAML et sont également prises en charge par Xamarin.Forms. Celles-ci sont décrites plus en détail dans d’autres articles :

• StaticResource - référence des objets à partir d’un dictionnaire de ressources, comme décrit dans l’article Dictionnaires de ressources.
• DynamicResource - répondre aux modifications apportées aux objets dans un dictionnaire de ressources, comme décrit dans l’article Styles dynamiques.
• Binding - établir un lien entre les propriétés de deux objets, comme décrit dans l’article Liaison de données.
• TemplateBinding - effectue la liaison de données à partir d’un modèle de contrôle, comme indiqué dans l’article Xamarin.Forms Modèles de contrôle.
• RelativeSource - définit la source de liaison par rapport à la position de la cible de liaison, comme indiqué dans l’article Liaisons relatives.

La RelativeLayout disposition utilise l’extension ConstraintExpressionde balisage personnalisée . Cette extension de balisage est décrite dans l’article RelativeLayout.

x:Static (extension de balisage)

L’extension x:Static de balisage est prise en charge par la StaticExtension classe . La classe a une propriété unique nommée Member de type string que vous définissez sur le nom d’une constante publique, d’une propriété statique, d’un champ statique ou d’un membre d’énumération.

Une façon courante d’utiliser x:Static consiste à définir d’abord une classe avec des constantes ou des variables statiques, comme cette classe minuscule AppConstants dans le programme MarkupExtensions :

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

La page x:Static Demo montre plusieurs façons d’utiliser l’extension de x:Static balisage. L’approche la plus détaillée instancie la StaticExtension classe entre Label.FontSize les balises property-element :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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>

L’analyseur XAML permet également à la StaticExtension classe d’être abrégée comme x:Staticsuit :

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

Cela peut être encore simplifié, mais la modification introduit une nouvelle syntaxe : elle consiste à placer la StaticExtension classe et le paramètre membre dans des accolades. L’expression résultante est définie directement sur l’attribut FontSize :

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

Notez qu’il n’y a pas de guillemets dans les accolades. La Member propriété de StaticExtension n’est plus un attribut XML. Il fait plutôt partie de l’expression de l’extension de balisage.

Tout comme vous pouvez l’abréger x:StaticExtension à x:Static lorsque vous l’utilisez comme élément d’objet, vous pouvez également l’abrévier dans l’expression dans des accolades :

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

La StaticExtension classe a un ContentProperty attribut référençant la propriété Member, qui marque cette propriété comme propriété de contenu par défaut de la classe. Pour les extensions de balisage XAML exprimées avec des accolades, vous pouvez éliminer la Member= partie de l’expression :

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

Il s’agit de la forme la plus courante de l’extension de x:Static balisage.

La page Démonstration statique contient deux autres exemples. La balise racine du fichier XAML contient une déclaration d’espace de noms XML pour l’espace de noms .NET System :

xmlns:sys="clr-namespace:System;assembly=netstandard"

Cela permet de définir la Label taille de police sur le champ Math.PIstatique . Il en résulte un texte plutôt petit, de sorte que la Scale propriété est définie sur Math.E:

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

L’exemple final affiche la Device.RuntimePlatform valeur . La Environment.NewLine propriété statique est utilisée pour insérer un caractère de nouvelle ligne entre les deux Span objets :

<Label HorizontalTextAlignment="Center"
       FontSize="{x:Static local:AppConstants.NormalFontSize}">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Runtime Platform: " />
            <Span Text="{x:Static sys:Environment.NewLine}" />
            <Span Text="{x:Static Device.RuntimePlatform}" />
        </FormattedString>
    </Label.FormattedText>
</Label>

Voici l’exemple en cours d’exécution :

Extension de balisage x:Reference

L’extension x:Reference de balisage est prise en charge par la ReferenceExtension classe . La classe a une seule propriété nommée Name de type string que vous définissez sur le nom d’un élément sur la page qui a reçu un nom avec x:Name. Cette Name propriété est la propriété de contenu de ReferenceExtension, donc Name= n’est pas obligatoire quand x:Reference apparaît dans des accolades.

L’extension x:Reference de balisage est utilisée exclusivement avec les liaisons de données, qui sont décrites plus en détail dans l’article Liaison de données.

La page démonstration x:Reference affiche deux utilisations de avec des liaisons de x:Reference données, la première où elle est utilisée pour définir la Source propriété de l’objet Binding , et la seconde où elle est utilisée pour définir la BindingContext propriété pour deux liaisons de données :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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="CenterAndExpand"
               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="CenterAndExpand" />

    </StackLayout>
</ContentPage>

Les deux x:Reference expressions utilisent la version abrégée du nom de classe ReferenceExtension et éliminent la Name= partie de l’expression. Dans le premier exemple, l’extension de x:Reference balisage est incorporée dans l’extension de Binding balisage. Notez que les Source paramètres et StringFormat sont séparés par des virgules. Voici le programme en cours d’exécution :

x:Type (extension de balisage)

L’extension x:Type de balisage est l’équivalent XAML de l’mot clé C typeof #. Elle est prise en charge par la TypeExtension classe , qui définit une propriété nommée TypeName de type string définie sur un nom de classe ou de structure. L’extension x:Type de balisage retourne l’objet System.Type de cette classe ou structure. TypeName est la propriété content de TypeExtension, donc TypeName= n’est pas obligatoire quand x:Type apparaît avec des accolades.

Dans Xamarin.Forms, il existe plusieurs propriétés qui ont des arguments de type Type. Par exemple, la TargetType propriété de Styleet l’attribut x:TypeArguments utilisé pour spécifier des arguments dans des classes génériques. Toutefois, l’analyseur XAML effectue l’opération typeof automatiquement et l’extension de x:Type balisage n’est pas utilisée dans ces cas.

L’extension de balisage, qui est décrite dans la section suivante, est un endroit où x:Typeest nécessairex:Array.

L’extension x:Type de balisage est également utile lors de la construction d’un menu où chaque élément de menu correspond à un objet d’un type particulier. Vous pouvez associer un Type objet à chaque élément de menu, puis instancier l’objet lorsque l’élément de menu est sélectionné.

C’est ainsi que fonctionne le menu de navigation dans MainPage le programme Extensions de balisage . Le fichier MainPage.xaml contient un TableView avec chacun TextCell correspondant à une page particulière du programme :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MarkupExtensions"
             x:Class="MarkupExtensions.MainPage"
             Title="Markup Extensions"
             Padding="10">
    <TableView Intent="Menu">
        <TableRoot>
            <TableSection>
                <TextCell Text="x:Static Demo"
                          Detail="Access constants or statics"
                          Command="{Binding NavigateCommand}"
                          CommandParameter="{x:Type local:StaticDemoPage}" />

                <TextCell Text="x:Reference Demo"
                          Detail="Reference named elements on the page"
                          Command="{Binding NavigateCommand}"
                          CommandParameter="{x:Type local:ReferenceDemoPage}" />

                <TextCell Text="x:Type Demo"
                          Detail="Associate a Button with a Type"
                          Command="{Binding NavigateCommand}"
                          CommandParameter="{x:Type local:TypeDemoPage}" />

                <TextCell Text="x:Array Demo"
                          Detail="Use an array to fill a ListView"
                          Command="{Binding NavigateCommand}"
                          CommandParameter="{x:Type local:ArrayDemoPage}" />

                ···                          

        </TableRoot>
    </TableView>
</ContentPage>

Voici la page main d’ouverture dans Extensions de balisage :

Chaque CommandParameter propriété est définie sur une extension de x:Type balisage qui fait référence à l’une des autres pages. La Command propriété est liée à une propriété nommée NavigateCommand. Cette propriété est définie dans le MainPage fichier code-behind :

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        NavigateCommand = new Command<Type>(async (Type pageType) =>
        {
            Page page = (Page)Activator.CreateInstance(pageType);
            await Navigation.PushAsync(page);
        });

        BindingContext = this;
    }

    public ICommand NavigateCommand { private set; get; }
}

La NavigateCommand propriété est un Command objet qui implémente une commande d’exécution avec un argument de type Type : la valeur de CommandParameter. La méthode utilise Activator.CreateInstance pour instancier la page, puis y accède. Le constructeur conclut en définissant le BindingContext de la page sur lui-même, ce qui permet à on BindingCommand de fonctionner. Pour plus d’informations sur ce type de code, consultez l’article Liaison de données et en particulier l’article Commande .

La page de démonstration x:Type utilise une technique similaire pour instancier Xamarin.Forms des éléments et les ajouter à un StackLayout. Le fichier XAML se compose initialement de trois Button éléments avec leurs Command propriétés définies sur un Binding et les CommandParameter propriétés définies sur des types de trois Xamarin.Forms vues :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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="CenterAndExpand"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Slider}" />

        <Button Text="Create a Stepper"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Stepper}" />

        <Button Text="Create a Switch"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Switch}" />
    </StackLayout>
</ContentPage>

Le fichier code-behind définit et initialise la CreateCommand propriété :

public partial class TypeDemoPage : ContentPage
{
    public TypeDemoPage()
    {
        InitializeComponent();

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

        BindingContext = this;
    }

    public ICommand CreateCommand { private set; get; }
}

La méthode exécutée lorsque l’utilisateur appuie sur un Button crée une nouvelle instance de l’argument, définit sa VerticalOptions propriété et l’ajoute à .StackLayout Les trois Button éléments partagent ensuite la page avec des vues créées dynamiquement :

x:Array (extension de balisage)

L’extension x:Array de balisage vous permet de définir un tableau dans le balisage. Elle est prise en charge par la ArrayExtension classe , qui définit deux propriétés :

• Type de type Type, qui indique le type des éléments dans le tableau.
• Items de type IList, qui est une collection des éléments eux-mêmes. Il s’agit de la propriété content de ArrayExtension.

L’extension x:Array de balisage elle-même n’apparaît jamais dans des accolades. Au lieu de cela, x:Array les balises de début et de fin délimitent la liste des éléments. Définissez la propriété sur Type une extension de x:Type balisage.

La page de démonstration x:Array montre comment utiliser x:Array pour ajouter des éléments à un ListView en définissant la ItemsSource propriété sur un tableau :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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>        

Crée ViewCell un simple BoxView pour chaque entrée de couleur :

Il existe plusieurs façons de spécifier les éléments individuels Color dans ce tableau. Vous pouvez utiliser une extension de x:Static balisage :

<x:Static Member="Color.Blue" />

Vous pouvez également utiliser StaticResource pour récupérer une couleur à partir d’un dictionnaire de ressources :

<StaticResource Key="myColor" />

Vers la fin de cet article, vous verrez une extension de balisage XAML personnalisée qui crée également une nouvelle valeur de couleur :

<local:HslColor H="0.5" S="1.0" L="0.5" />

Lors de la définition de tableaux de types courants tels que des chaînes ou des nombres, utilisez les balises répertoriées dans l’article Passage d’arguments de constructeur pour délimiter les valeurs.

x:Null (extension de balisage)

L’extension x:Null de balisage est prise en charge par la NullExtension classe . Il n’a aucune propriété et est simplement l’équivalent XAML de l’mot clé C null #.

L’extension x:Null de balisage est rarement nécessaire et rarement utilisée, mais si vous en avez besoin, vous serez heureux qu’elle existe.

La page de démonstration x:Null illustre un scénario dans lequel x:Null cela peut être pratique. Supposons que vous définissez un implicite Style pour Label qui inclut un Setter qui définit la propriété sur un nom de famille dépendant de la FontFamily plateforme :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.NullDemoPage"
             Title="x:Null Demo">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="FontSize" Value="48" />
                <Setter Property="FontFamily">
                    <Setter.Value>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="iOS" Value="Times New Roman" />
                            <On Platform="Android" Value="serif" />
                            <On Platform="UWP" Value="Times New Roman" />
                        </OnPlatform>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <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.Content>
</ContentPage>   

Ensuite, vous découvrez que pour l’un Label des éléments, vous souhaitez que tous les paramètres de propriété dans l’implicite Style , à l’exception de FontFamily, que vous souhaitez être la valeur par défaut. Vous pouvez en définir une autre Style à cet effet, mais une approche plus simple consiste simplement à définir la FontFamily propriété du particulier Label sur x:Null, comme illustré dans le centre Label.

Voici le programme en cours d’exécution :

Notez que quatre des Label éléments ont une police serif, mais que le centre Label a la police sans-serif par défaut.

Extension de balisage OnPlatform

L’extension de balisage OnPlatform vous permet de personnaliser l’apparence de l’interface utilisateur pour chaque plateforme. Il fournit les mêmes fonctionnalités que les OnPlatform classes et On , mais avec une représentation plus concise.

L’extension OnPlatform de balisage est prise en charge par la OnPlatformExtension classe , qui définit les propriétés suivantes :

• Default de type object, que vous définissez sur une valeur par défaut à appliquer aux propriétés qui représentent les plateformes.
• Android de type object, que vous définissez sur une valeur à appliquer sur Android.
• GTK de type object, que vous définissez sur une valeur à appliquer sur les plateformes GTK.
• iOS de type object, que vous définissez sur une valeur à appliquer sur iOS.
• macOS de type object, que vous définissez sur une valeur à appliquer sur macOS.
• Tizen de type object, que vous définissez sur une valeur à appliquer sur la plateforme Tizen.
• UWPde type object, que vous définissez sur une valeur à appliquer sur le plateforme Windows universelle.
• WPFde type object, que vous définissez sur une valeur à appliquer sur la plateforme Windows Presentation Foundation.
• Converter de type IValueConverter, qui peut être défini sur une IValueConverter implémentation.
• ConverterParameter de type object, qui peut être définie sur une valeur à passer à l’implémentation IValueConverter .

Notes

L’analyseur XAML permet à la OnPlatformExtension classe d’être abrégée en .OnPlatform

La Default propriété est la propriété content de OnPlatformExtension. Par conséquent, pour les expressions de balisage XAML exprimées avec des accolades, vous pouvez éliminer la Default= partie de l’expression à condition qu’il s’agit du premier argument. Si la Default propriété n’est pas définie, elle utilise par défaut la valeur de la BindableProperty.DefaultValue propriété, à condition que l’extension de balisage cible un BindableProperty.

Important

L’analyseur XAML s’attend à ce que des valeurs du type correct soient fournies aux propriétés qui consomment l’extension de OnPlatform balisage. Si la conversion de type est nécessaire, l’extension de OnPlatform balisage tente de l’exécuter à l’aide des convertisseurs par défaut fournis par Xamarin.Forms. Toutefois, certaines conversions de type ne peuvent pas être effectuées par les convertisseurs par défaut et, dans ce cas, la Converter propriété doit être définie sur une IValueConverter implémentation.

La page Démonstration OnPlatform montre comment utiliser l’extension de OnPlatform balisage :

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

Dans cet exemple, les trois OnPlatform expressions utilisent la version abrégée du nom de classe OnPlatformExtension . Les trois OnPlatform extensions de balisage définissent les Colorpropriétés , WidthRequestet HeightRequest de sur des BoxView valeurs différentes sur iOS, Android et UWP. Les extensions de balisage fournissent également des valeurs par défaut pour ces propriétés sur les plateformes qui ne sont pas spécifiées, tout en éliminant la Default= partie de l’expression. Notez que les propriétés d’extension de balisage définies sont séparées par des virgules.

Voici le programme en cours d’exécution :

Extension de balisage OnIdiom

L’extension OnIdiom de balisage vous permet de personnaliser l’apparence de l’interface utilisateur en fonction de l’idiome de l’appareil sur lequel l’application s’exécute. Elle est prise en charge par la OnIdiomExtension classe , qui définit les propriétés suivantes :

• Default de type object, que vous définissez sur une valeur par défaut à appliquer aux propriétés qui représentent les idiomes d’appareil.
• Phone de type object, que vous définissez sur une valeur à appliquer sur les téléphones.
• Tablet de type object, que vous définissez sur une valeur à appliquer sur les tablettes.
• Desktop de type object, que vous définissez sur une valeur à appliquer sur les plateformes de bureau.
• TV de type object, que vous définissez sur une valeur à appliquer sur les plateformes TV.
• Watch de type object, que vous définissez sur une valeur à appliquer sur les plateformes Espion.
• Converter de type IValueConverter, qui peut être défini sur une IValueConverter implémentation.
• ConverterParameter de type object, qui peut être définie sur une valeur à passer à l’implémentation IValueConverter .

Notes

L’analyseur XAML permet à la OnIdiomExtension classe d’être abrégée en .OnIdiom

La Default propriété est la propriété content de OnIdiomExtension. Par conséquent, pour les expressions de balisage XAML exprimées avec des accolades, vous pouvez éliminer la Default= partie de l’expression à condition qu’il s’agit du premier argument.

Important

L’analyseur XAML s’attend à ce que des valeurs du type correct soient fournies aux propriétés qui consomment l’extension de OnIdiom balisage. Si la conversion de type est nécessaire, l’extension de OnIdiom balisage tente de l’exécuter à l’aide des convertisseurs par défaut fournis par Xamarin.Forms. Toutefois, certaines conversions de type ne peuvent pas être effectuées par les convertisseurs par défaut et, dans ce cas, la Converter propriété doit être définie sur une IValueConverter implémentation.

La page De démonstration OnIdiom montre comment utiliser l’extension de OnIdiom balisage :

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

Dans cet exemple, les trois OnIdiom expressions utilisent la version abrégée du nom de classe OnIdiomExtension . Les trois OnIdiom extensions de balisage définissent les Colorpropriétés , WidthRequestet HeightRequest de sur des valeurs différentes sur les idiomes du téléphone, de la BoxView tablette et du bureau. Les extensions de balisage fournissent également des valeurs par défaut pour ces propriétés sur les idiomes qui ne sont pas spécifiés, tout en éliminant la Default= partie de l’expression. Notez que les propriétés d’extension de balisage définies sont séparées par des virgules.

Voici le programme en cours d’exécution :

Extension de balisage DataTemplate

L’extension DataTemplate de balisage vous permet de convertir un type en .DataTemplate Elle est prise en charge par la DataTemplateExtension classe , qui définit une TypeName propriété, de type string, qui est définie sur le nom du type à convertir en .DataTemplate La TypeName propriété est la propriété content de DataTemplateExtension. Par conséquent, pour les expressions de balisage XAML exprimées avec des accolades, vous pouvez éliminer la TypeName= partie de l’expression.

Notes

L’analyseur XAML permet à la DataTemplateExtension classe d’être abrégée en .DataTemplate

Une utilisation classique de cette extension de balisage est dans une application Shell, comme illustré dans l’exemple suivant :

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

Dans cet exemple, MonkeysPage est converti d’un ContentPage en , DataTemplatequi est défini comme valeur de la ShellContent.ContentTemplate propriété . Cela garantit que n’est créé que MonkeysPage lorsque la navigation vers la page se produit, plutôt qu’au démarrage de l’application.

Pour plus d’informations sur les applications Shell, consultez Xamarin.Forms Shell.

FontImage, extension de balisage

L’extension FontImage de balisage vous permet d’afficher une icône de police dans n’importe quelle vue qui peut afficher un ImageSource. Il fournit les mêmes fonctionnalités que la FontImageSource classe, mais avec une représentation plus concise.

L’extension FontImage de balisage est prise en charge par la FontImageExtension classe , qui définit les propriétés suivantes :

• FontFamily de type string, la famille de polices à laquelle appartient l’icône de police.
• Glyph de type string, valeur de caractère Unicode de l’icône de police.
• Color de type Color, couleur à utiliser lors de l’affichage de l’icône de police.
• Size de type double, taille, en unités indépendantes de l’appareil, de l’icône de police rendue. La valeur par défaut est 30. En outre, cette propriété peut être définie sur une taille de police nommée.

Notes

L’analyseur XAML permet à la FontImageExtension classe d’être abrégée en .FontImage

La Glyph propriété est la propriété content de FontImageExtension. Par conséquent, pour les expressions de balisage XAML exprimées avec des accolades, vous pouvez éliminer la Glyph= partie de l’expression à condition qu’il s’agit du premier argument.

La page De démonstration FontImage montre comment utiliser l’extension de FontImage balisage :

<Image BackgroundColor="#D1D1D1"
       Source="{FontImage &#xf30c;, FontFamily={OnPlatform iOS=Ionicons, Android=ionicons.ttf#}, Size=44}" />

Dans cet exemple, la version abrégée du nom de classe FontImageExtension est utilisée pour afficher une icône XBox, de la famille de polices Ionicons, dans un Image. L’expression utilise également l’extension de OnPlatform balisage pour spécifier différentes FontFamily valeurs de propriété sur iOS et Android. En outre, la Glyph= partie de l’expression est éliminée et les propriétés d’extension de balisage définies sont séparées par des virgules. Notez que bien que le caractère Unicode de l’icône soit \uf30c, il doit être placé dans une séquence d’échappement en XAML et devient ainsi .

Voici le programme en cours d’exécution :

Pour plus d’informations sur l’affichage des icônes de police en spécifiant les données d’icône de police dans un FontImageSource objet, consultez Afficher les icônes de police.

Extension de balisage AppThemeBinding

L’extension AppThemeBinding de balisage vous permet de spécifier une ressource à consommer, telle qu’une image ou une couleur, en fonction du thème système actuel.

Important

L’extension AppThemeBinding de balisage a une configuration minimale requise pour le système d’exploitation. Pour plus d’informations, consultez Répondre aux modifications de thème système dans les Xamarin.Forms applications.

L’extension AppThemeBinding de balisage est prise en charge par la AppThemeBindingExtension classe , qui définit les propriétés suivantes :

• Default, de type object, que vous définissez sur la ressource à utiliser par défaut.
• Light, de type object, que vous définissez sur la ressource à utiliser lorsque l’appareil utilise son thème clair.
• Dark, de type object, que vous définissez sur la ressource à utiliser lorsque l’appareil utilise son thème sombre.
• Value, de type object, qui retourne la ressource actuellement utilisée par l’extension de balisage.

Notes

L’analyseur XAML permet à la AppThemeBindingExtension classe d’être abrégée en .AppBindingTheme

La Default propriété est la propriété content de AppThemeBindingExtension. Par conséquent, pour les expressions de balisage XAML exprimées avec des accolades, vous pouvez éliminer la Default= partie de l’expression à condition qu’il s’agit du premier argument.

La page de démonstration AppThemeBinding montre comment utiliser l’extension de AppThemeBinding balisage :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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>

Dans cet exemple, la couleur du texte du premier Label est définie sur vert lorsque l’appareil utilise son thème clair, et est définie sur rouge lorsque l’appareil utilise son thème sombre. La deuxième Label a sa TextColor propriété définie par le biais d’un Style. Cela Style définit la couleur du texte du Label sur noir par défaut, sur bleu lorsque l’appareil utilise son thème clair et sur sarcelle lorsque l’appareil utilise son thème sombre.

Voici le programme en cours d’exécution :

Définir des extensions de balisage

Si vous avez rencontré un besoin d’une extension de balisage XAML qui n’est pas disponible dans Xamarin.Forms, vous pouvez créer votre propre extension.

Liens connexes

• Extensions de balisage (exemple)
• Chapitre des extensions de balisage XAML à partir du Xamarin.Forms livre
• Dictionnaires de ressources
• Styles dynamiques
• Liaison de données
• Xamarin.Forms Shell
• Répondre aux modifications de thème système dans les Xamarin.Forms applications