Utilizzo di estensioni di markup XAML

Download Sample Scaricare l'esempio

Le estensioni di markup XAML consentono di migliorare la potenza e la flessibilità di XAML consentendo di impostare gli attributi degli elementi da un'ampia gamma di origini. Diverse estensioni di markup XAML fanno parte della specifica XAML 2009. Questi vengono visualizzati nei file XAML con il prefisso dello spazio dei nomi personalizzato e sono comunemente indicati x con questo prefisso. Questo articolo illustra le estensioni di markup seguenti:

  • x:Static : fare riferimento a proprietà statiche, campi o membri di enumerazione.
  • x:Reference : fare riferimento a elementi denominati nella pagina.
  • x:Type : impostare un attributo su un System.Type oggetto .
  • x:Array : costruire una matrice di oggetti di un tipo specifico.
  • x:Null : impostare un attributo su un null valore.
  • OnPlatform : personalizzare l'aspetto dell'interfaccia utente in base alla piattaforma.
  • OnIdiom : personalizzare l'aspetto dell'interfaccia utente in base al comportamento del dispositivo in cui è in esecuzione l'applicazione.
  • DataTemplate : converte un tipo in DataTemplate un oggetto .
  • FontImage : consente di visualizzare un'icona del tipo di carattere in qualsiasi visualizzazione in grado di visualizzare un ImageSource oggetto .
  • AppThemeBinding : utilizzare una risorsa in base al tema di sistema corrente.

Altre estensioni di markup XAML sono state supportate da altre implementazioni XAML e sono supportate anche da Xamarin.Forms . Questi sono descritti in modo più completo in altri articoli:

  • StaticResource - fare riferimento a oggetti da un dizionario risorse, come descritto nell'articolo StaticResource.
  • DynamicResource : rispondere alle modifiche apportate agli oggetti in un dizionario risorse, come descritto DynamicResource.
  • Binding - stabilire un collegamento tra le proprietà di due oggetti, come descritto nell'articolo Binding.
  • TemplateBinding : esegue data binding da un modello di controllo, come descritto nell'articolo Xamarin.Forms control templates .
  • RelativeSource : imposta l'origine dell'associazione rispetto alla posizione della destinazione dell'associazione, come descritto nell'articolo RelativeSource.

Il RelativeLayout layout usa l'estensione di markup personalizzata ConstraintExpression . Questa estensione di markup è descritta nell'articolo RelativeLayout.

estensione di markup x:Static

x:StaticL'estensione di markup è supportata dalla classe StaticExtension . La classe ha una singola proprietà denominata _Xaml_StaticExtension_Member" data-linktype="absolute-path">di tipo impostato sul nome di una costante pubblica, di una proprietà Memberstring statica, di un campo statico o di un membro di enumerazione.

Un modo comune per usare è definire prima una classe con alcune costanti o variabili statiche, ad esempio questa piccola classe x:StaticAppConstants nel programma x:Static

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

La pagina demo x:Static illustra diversi modi per usare l'estensione di markup. L'approccio più dettagliato crea un'istanza della StaticExtension classe tra Label.FontSize tag 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>

Il parser XAML consente anche StaticExtension di abbreviare la classe come x:Static :

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

Questa operazione può essere ulteriormente semplificata, ma la modifica introduce una nuova sintassi: consiste nell'inserire la classe e l'impostazione del membro tra parentesi StaticExtension graffe. L'espressione risultante viene impostata direttamente FontSize sull'attributo :

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

Si noti che non sono presenti virgolette all'interno delle parentesi graffe. La Member proprietà di non è più un attributo StaticExtension XML. Fa invece parte dell'espressione per l'estensione di markup.

Come è possibile abbreviare a quando lo si usa come elemento oggetto, è anche possibile abbreviarlo nell'espressione tra parentesi x:StaticExtensionx:Static graffe:

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

La classe ha un attributo che fa riferimento alla proprietà , che contrassegna questa proprietà come proprietà StaticExtension di contenuto predefinita della ContentPropertyMember classe. Per le estensioni di markup XAML espresse con parentesi graffe, è possibile eliminare la Member= parte dell'espressione:

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

Si tratta della forma più comune dell'estensione x:Static di markup.

La pagina Demo statica contiene altri due esempi. Il tag radice del file XAML contiene una dichiarazione dello spazio dei nomi XML per lo spazio dei nomi System .NET:

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

In questo modo Label la dimensione del carattere può essere impostata sul campo statico Math.PI . Il risultato è un testo piuttosto piccolo, quindi Scale la proprietà è impostata su Math.E :

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

Nell'esempio finale viene visualizzato il Device.RuntimePlatform valore . La Environment.NewLine proprietà statica viene usata per inserire un carattere di nuova riga tra i due Span oggetti :

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

Di seguito è riportato l'esempio in esecuzione:

x:Static Demo

Estensione di markup x:Reference

x:ReferenceL'estensione di markup è supportata dalla classe ReferenceExtension . La classe ha una singola proprietà denominata Xamarin_Forms _Xaml_ReferenceExtension_Name" data-linktype="absolute-path">di tipo impostato sul nome di un elemento nella pagina a cui è stato assegnato Namestring un x:Name nome con . Questa proprietà è la proprietà content di , pertanto non è necessaria quando viene visualizzata tra parentesi NameReferenceExtensionName=x:Reference graffe.

L'estensione di markup viene usata esclusivamente con i data binding, descritti in modo più dettagliato x:Reference nell'articolo x:Reference.

La pagina demo x:Reference mostra due usi di con i data binding, il primo in cui viene usato per impostare la proprietà dell'oggetto e il secondo in cui viene usato per impostare la proprietà per due SourceBinding data BindingContext binding:

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

Entrambe x:Reference le espressioni usano la versione abbreviata del nome della classe ed ReferenceExtension eliminano la parte Name= dell'espressione. Nel primo esempio l'estensione x:Reference di markup è incorporata nell'estensione Binding di markup. Si noti che Source le impostazioni e sono separate da StringFormat virgole. Ecco il programma in esecuzione:

x:Reference Demo

x:Type (estensione di markup)

x:TypeL'estensione di markup è l'equivalente XAML della parola chiave typeof C#. È supportato dalla classe , che definisce una proprietà denominata TypeExtensionTypeExtension Xamarin_Forms _Xaml_TypeExtension_TypeName" data-linktype="absolute-path">di tipo impostato su un nome di classe o TypeNamestring struttura. x:TypeL'estensione di markup restituisce System.Type l'oggetto di tale classe o struttura. TypeName è la proprietà content di TypeExtension , pertanto non è TypeName= obbligatorio quando viene visualizzato tra parentesi x:Type graffe.

Xamarin.FormsAll'interno di sono disponibili diverse proprietà con argomenti di tipo Type . Gli esempi includono la proprietà Xamarin_Forms _Style_TargetType" data-linktype="absolute-path">di e l'attributo TargetTypeStyleTargetType usato per specificare gli argomenti nelle classi generiche. Tuttavia, il parser XAML esegue typeof l'operazione automaticamente e l'estensione x:Type di markup non viene usata in questi casi.

Un punto in x:Typex:Type necessario è con l'estensione x:Array di markup, descritta nella sezione x:Array

x:TypeL'estensione di markup è utile anche quando si costruisce un menu in cui ogni voce di menu corrisponde a un oggetto di un tipo specifico. È possibile associare un oggetto a Type ogni voce di menu e quindi creare un'istanza dell'oggetto quando la voce di menu è selezionata.

Questo è il funzionamento del menu di MainPage spostamento in nel programma Estensioni MainPage markup. Il file MainPage.xaml contiene un oggetto con ognuno corrispondente a una determinata pagina nel TextCell programma:

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

Ecco la pagina principale di apertura nelle estensioni di markup:

Main Page

Ogni CommandParameter proprietà è impostata su un'estensione x:Type di markup che fa riferimento a una delle altre pagine. La Command proprietà è associata a una proprietà denominata NavigateCommand . Questa proprietà è definita nel MainPage file 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 proprietà è un oggetto che implementa un comando execute con un argomento di NavigateCommand tipo , ovvero il valore di CommandTypeCommandParameter . Il metodo usa Activator.CreateInstance per creare un'istanza della pagina e quindi passa alla pagina. Il costruttore termina impostando BindingContext l'oggetto della pagina su se stesso, che consente Binding il funzionamento di Command . Per altre informazioni su questo tipo di codice, vedere l'articolo Data Binding e in particolare l'articolo Esecuzione di comandi.

La pagina demo x:Type usa una tecnica simile per creare un'istanza degli elementi e aggiungerli a un oggetto StackLayout . Il file XAML è inizialmente costituito da tre elementi con le relative proprietà impostate su e le proprietà Button impostate su tipi di tre CommandBindingCommandParameterXamarin.Forms visualizzazioni:

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

Il file code-behind definisce e inizializza la CreateCommand proprietà :

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

Il metodo eseguito quando si preme un oggetto crea una nuova istanza dell'argomento, ne imposta la proprietà e ButtonVerticalOptions la aggiunge all'oggetto StackLayout . I tre Button elementi condividono quindi la pagina con le visualizzazioni create dinamicamente:

x:Type Demo

x:Array (estensione di markup)

x:ArrayL'estensione di markup consente di definire una matrice nel markup. È supportato dalla ArrayExtension classe , che definisce due proprietà:

  • Type di Type tipo , che indica il tipo degli elementi nella matrice.
  • Items di tipo IList , che è una raccolta degli elementi stessi. Si tratta della proprietà di contenuto di ArrayExtension .

x:ArrayL'estensione di markup stessa non viene mai visualizzata tra parentesi graffe. I tag x:Array di inizio e di fine delimitano invece l'elenco di elementi. Impostare la Type proprietà su x:Type un'estensione di markup.

La pagina demo x:Array illustra come usare per aggiungere elementi a un oggetto impostando la proprietà su una ListViewItemsSource matrice:

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

Crea ViewCell una semplice per ogni voce di BoxView colore:

x:Array Demo

Esistono diversi modi per specificare i singoli Color elementi in questa matrice. È possibile usare x:Static un'estensione di markup:

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

In caso contrario, è StaticResource possibile usare per recuperare un colore da un dizionario risorse:

<StaticResource Key="myColor" />

Verso la fine di questo articolo verrà visualizzata un'estensione di markup XAML personalizzata che crea anche un nuovo valore di colore:

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

Quando si definiscono matrici di tipi comuni come stringhe o numeri, usare i tag elencati nell'articolo Passaggio degli argomenti del costruttore per delimitare i valori.

estensione di markup x:Null

x:NullL'estensione di markup è supportata dalla classe NullExtension . Non ha proprietà ed è semplicemente l'equivalente XAML della parola chiave null C#.

L'estensione di markup è raramente necessaria e viene usata raramente, ma se ne trova la necessità, sarà contento che x:Null esista.

La pagina demo x:Null illustra uno scenario in cui può risultare utile. Si supponga di definire un Style implicito per Label che include un che imposta la proprietà su un nome di famiglia dipendente dalla SetterFontFamily piattaforma:

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

Si scopre quindi che per uno degli elementi si vogliono tutte le impostazioni delle proprietà nell'oggetto implicito, ad eccezione di , che si Label vuole impostare come valore StyleFontFamily predefinito. È possibile definirne un altro a tale scopo, ma un approccio più semplice consiste semplicemente nell'impostare la proprietà del particolare su , come illustrato StyleFontFamily nel centro Labelx:NullLabel .

Ecco il programma in esecuzione:

x:Null Demo

Si noti che quattro elementi hanno un tipo di carattere serif, ma il centro ha il tipo di carattere LabelLabel sans-serif predefinito.

Estensione di markup OnPlatform

L'estensione di markup OnPlatform consente di personalizzare l'aspetto dell'interfaccia utente per ogni piattaforma. Fornisce la stessa funzionalità delle classi e , ma con una OnPlatformOn rappresentazione più concisa.

OnPlatformL'estensione di markup è supportata dalla classe , che definisce le proprietà OnPlatformExtension seguenti:

  • Default di tipo object , impostato su un valore predefinito da applicare alle proprietà che rappresentano le piattaforme.
  • Android di tipo object , impostato su un valore da applicare in Android.
  • GTK di tipo object , impostato su un valore da applicare alle piattaforme GTK.
  • iOS di tipo object , impostato su un valore da applicare in iOS.
  • macOS di tipo object , impostato su un valore da applicare in macOS.
  • Tizen di tipo object , impostato su un valore da applicare alla piattaforma Tizen.
  • UWPdi tipo , impostato su un valore da applicare alla object piattaforma Windows universali.
  • WPFdi tipo , impostato su un valore da applicare alla object Windows Presentation Foundation piattaforma.
  • Converter di tipo IValueConverter , che può essere impostato su un'implementazione IValueConverter .
  • ConverterParameterdi tipo object , che può essere impostato su un valore da passare all'implementazione. IValueConverter

Nota

Il parser XAML consente OnPlatformExtension alla classe di essere abbreviata come OnPlatform .

La Default proprietà è la proprietà di contenuto di OnPlatformExtension . Pertanto, per le espressioni di markup XAML espresse con parentesi graffe, è possibile eliminare la parte dell'espressione a condizione che sia Default= il primo argomento. Se la proprietà non è impostata, il valore predefinito sarà DefaultDefault Xamarin_Forms _BindableProperty_DefaultValue" data-linktype="absolute-path">, a BindableProperty.DefaultValue condizione che l'estensione di markup sia di destinazione di BindableProperty .

Importante

Il parser XAML prevede che verranno forniti valori del tipo corretto alle proprietà che utilizzano l'estensione OnPlatform di markup. Se è necessaria la conversione dei tipi, l'estensione di markup tenterà di eseguirla usando OnPlatform i convertitori predefiniti forniti da Xamarin.Forms . Esistono tuttavia alcune conversioni di tipi che non possono essere eseguite dai convertitori predefiniti e in questi casi la proprietà Converter deve essere impostata su un'implementazione. IValueConverter

La pagina Demo onPlatform mostra come usare l'estensione di markup:

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

In questo esempio, tutte e tre OnPlatform le espressioni usano la versione abbreviata del nome della OnPlatformExtension classe. Le tre estensioni di markup impostano OnPlatformOnPlatform Xamarin_Forms _BoxView_Color" data-linktype="absolute-path">Color , Xamarin_Forms _VisualElement_WidthRequest" data-linktype="absolute-path">WidthRequest e Xamarin_Forms Color _VisualElement_HeightRequest" data-linktype="absolute-path">HeightRequestBoxView proprietà di su valori diversi in iOS, Android e UWP. Le estensioni di markup forniscono anche valori predefiniti per queste proprietà nelle piattaforme non specificate, eliminando la Default= parte dell'espressione. Si noti che le proprietà dell'estensione di markup impostate sono separate da virgole.

Ecco il programma in esecuzione:

OnPlatform Demo

Estensione di markup OnIdiom

L'estensione di markup consente di personalizzare l'aspetto dell'interfaccia utente in base al linguaggio del dispositivo in cui OnIdiom è in esecuzione l'applicazione. È supportato dalla classe OnIdiomExtension , che definisce le proprietà seguenti:

  • Default di tipo , impostato su un valore predefinito da applicare alle object proprietà che rappresentano idiomi del dispositivo.
  • Phone di tipo object , impostato su un valore da applicare ai telefoni.
  • Tablet di tipo object , impostato su un valore da applicare alle compresse.
  • Desktop di tipo object , impostato su un valore da applicare alle piattaforme desktop.
  • TV di tipo object , impostato su un valore da applicare alle piattaforme TV.
  • Watch di tipo object , impostato su un valore da applicare alle piattaforme Watch.
  • Converter di tipo IValueConverter , che può essere impostato su un'implementazione IValueConverter .
  • ConverterParameterdi tipo object , che può essere impostato su un valore da passare all'implementazione. IValueConverter

Nota

Il parser XAML consente OnIdiomExtension alla classe di essere abbreviata come OnIdiom .

La Default proprietà è la proprietà di contenuto di OnIdiomExtension . Pertanto, per le espressioni di markup XAML espresse con parentesi graffe, è possibile eliminare la parte dell'espressione a condizione che sia Default= il primo argomento.

Importante

Il parser XAML prevede che verranno forniti valori del tipo corretto alle proprietà che utilizzano l'estensione OnIdiom di markup. Se è necessaria la conversione dei tipi, l'estensione di markup tenterà di eseguirla usando OnIdiom i convertitori predefiniti forniti da Xamarin.Forms . Esistono tuttavia alcune conversioni di tipi che non possono essere eseguite dai convertitori predefiniti e in questi casi la proprietà Converter deve essere impostata su un'implementazione. IValueConverter

La pagina Demo onIdiom mostra come usare l'estensione di markup:

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

In questo esempio, tutte e tre OnIdiom le espressioni usano la versione abbreviata del nome della OnIdiomExtension classe. Le tre estensioni di markup impostano OnIdiomOnIdiom Xamarin_Forms _BoxView_Color" data-linktype="absolute-path">Color , Xamarin_Forms _VisualElement_WidthRequest" data-linktype="absolute-path">e WidthRequest Xamarin_Forms Color _VisualElement_HeightRequest" data-linktype="absolute-path">HeightRequestBoxView proprietà di su valori diversi nel telefono, tablet e desktop. Le estensioni di markup forniscono anche valori predefiniti per queste proprietà nei linguaggi non specificati, eliminando al tempo stesso la Default= parte dell'espressione. Si noti che le proprietà dell'estensione di markup impostate sono separate da virgole.

Ecco il programma in esecuzione:

OnIdiom Demo

Estensione di markup DataTemplate

DataTemplateL'estensione di markup consente di convertire un tipo in un oggetto DataTemplate . È supportato dalla classe , che definisce una proprietà di tipo , impostata sul nome del tipo DataTemplateExtensionTypeName da convertire in stringDataTemplate . La TypeName proprietà è la proprietà di contenuto di DataTemplateExtension . Pertanto, per le espressioni di markup XAML espresse con parentesi graffe, è possibile eliminare TypeName= la parte dell'espressione.

Nota

Il parser XAML consente DataTemplateExtension alla classe di essere abbreviata come DataTemplate .

Un utilizzo tipico di questa estensione di markup è in un'applicazione Shell, come illustrato nell'esempio seguente:

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

In questo esempio MonkeysPage viene convertito da in un oggetto , che viene impostato come valore della proprietà ContentPageDataTemplateShellContent.ContentTemplate . In questo modo viene creato solo quando si verifica MonkeysPage lo spostamento nella pagina, anziché all'avvio dell'applicazione.

Per altre informazioni sulle applicazioni Shell, vedere Xamarin.Forms Shell .

Estensione del markup FontImage

FontImageL'estensione di markup consente di visualizzare un'icona del tipo di carattere in qualsiasi visualizzazione in grado di visualizzare un oggetto ImageSource . Fornisce la stessa funzionalità della FontImageSource classe , ma con una rappresentazione più concisa.

FontImageL'estensione di markup è supportata dalla classe , che definisce le proprietà FontImageExtension seguenti:

  • FontFamily di tipo string , la famiglia di caratteri a cui appartiene l'icona del tipo di carattere.
  • Glyph di tipo string , il valore del carattere Unicode dell'icona del tipo di carattere.
  • Color di tipo Color , il colore da utilizzare quando si visualizza l'icona del tipo di carattere.
  • Size di tipo double , la dimensione, in unità indipendenti dal dispositivo, dell'icona del tipo di carattere sottoposta a rendering. Il valore predefinito è 30. Inoltre, questa proprietà può essere impostata su una dimensione del carattere denominata.

Nota

Il parser XAML consente FontImageExtension alla classe di essere abbreviata come FontImage .

La Glyph proprietà è la proprietà di contenuto di FontImageExtension . Pertanto, per le espressioni di markup XAML espresse con parentesi graffe, è possibile eliminare la parte dell'espressione a condizione che sia Glyph= il primo argomento.

La pagina Demo FontImage mostra come usare l'estensione di markup:

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

In questo esempio, la versione abbreviata del nome della classe viene usata per visualizzare un'icona XBox, dalla famiglia di caratteri FontImageExtension Ionicons, in un Image oggetto . L'espressione usa anche OnPlatform l'estensione di markup per specificare valori di proprietà diversi in FontFamily iOS e Android. Inoltre, la parte dell'espressione viene eliminata e le proprietà dell'estensione di markup impostate Glyph= sono separate da virgole. Si noti che, mentre il carattere Unicode per l'icona è , deve essere preceduto da un carattere di escape \uf30c in XAML e quindi diventa &#xf30c; .

Ecco il programma in esecuzione:

Screenshot of the FontImage markup extension

Per informazioni sulla visualizzazione delle icone dei tipi di carattere specificando i dati delle icone dei tipi di carattere in un FontImageSource oggetto, vedere FontImageSource

Estensione di markup AppThemeBinding

L'estensione di markup consente di specificare una risorsa da utilizzare, ad esempio un'immagine o un AppThemeBinding colore, in base al tema di sistema corrente.

Importante

AppThemeBindingL'estensione di markup ha requisiti minimi del sistema operativo. Per altre informazioni, vedere Respond to system theme changes in Xamarin.Forms applications.

AppThemeBindingL'estensione di markup è supportata dalla classe , che definisce le proprietà AppThemeBindingExtension seguenti:

  • Default, di object tipo , impostato sulla risorsa da utilizzare per impostazione predefinita.
  • Light, di object tipo , impostato sulla risorsa da usare quando il dispositivo usa il tema chiaro.
  • Dark, di object tipo , impostato sulla risorsa da usare quando il dispositivo usa il tema scuro.
  • Value, di tipo , che restituisce la risorsa attualmente usata object dall'estensione di markup.

Nota

Il parser XAML consente AppThemeBindingExtension alla classe di essere abbreviata come AppBindingTheme .

La Default proprietà è la proprietà di contenuto di AppThemeBindingExtension . Pertanto, per le espressioni di markup XAML espresse con parentesi graffe, è possibile eliminare la parte dell'espressione a condizione che sia Default= il primo argomento.

La pagina demo AppThemeBinding illustra come usare l'estensione di markup:

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

In questo esempio il colore del testo del primo viene impostato su verde quando il dispositivo usa il tema chiaro e viene impostato su rosso quando il dispositivo usa il Label tema scuro. Il secondo Label ha la Xamarin_Forms Label _Label_TextColor" data-linktype="absolute-path">TextColor proprietà impostata tramite Style . Per impostazione predefinita, il colore del testo dell'oggetto viene impostato su nero, su blu quando il dispositivo usa il tema chiaro e su verde acqua quando il dispositivo usa il StyleLabel tema scuro.

Ecco il programma in esecuzione:

AppThemeBinding Demo

Definire estensioni di markup

Se è stata rilevata la necessità di un'estensione di markup XAML che non è disponibile in , è Xamarin.Forms possibile creare un Xamarin.Formspersonalizzato.