Mengonsumsi Ekstensi Markup XAML

Artikel
06/17/2020

Ekstensi markup XAML membantu meningkatkan daya dan fleksibilitas XAML dengan memungkinkan atribut elemen diatur dari berbagai sumber. Beberapa ekstensi markup XAML adalah bagian dari spesifikasi XAML 2009. Ini muncul dalam file XAML dengan awalan x namespace kustom, dan biasanya dirujuk dengan awalan ini. Artikel ini membahas ekstensi markup berikut:

x:Static – properti statis referensi, bidang, atau anggota enumerasi.
x:Reference – referensi elemen bernama di halaman.
x:Type – atur atribut ke System.Type objek.
x:Array – membuat array objek dari jenis tertentu.
x:Null – atur atribut ke null nilai.
OnPlatform – menyesuaikan tampilan UI berdasarkan per platform.
OnIdiom – sesuaikan tampilan UI berdasarkan idiom perangkat yang dijalankan aplikasi.
DataTemplate – mengonversi jenis menjadi DataTemplate.
FontImage – tampilkan ikon font dalam tampilan apa pun yang dapat menampilkan ImageSource.
AppThemeBinding – mengonsumsi sumber daya berdasarkan tema sistem saat ini.

Ekstensi markup XAML tambahan secara historis telah didukung oleh implementasi XAML lainnya, dan juga didukung oleh Xamarin.Forms. Ini dijelaskan lebih lengkap di artikel lain:

StaticResource - referensi objek dari kamus sumber daya, seperti yang dijelaskan dalam artikel Kamus Sumber Daya.
DynamicResource - menanggapi perubahan objek dalam kamus sumber daya, seperti yang dijelaskan dalam artikel Gaya Dinamis.
Binding - membuat tautan antara properti dari dua objek, seperti yang dijelaskan dalam artikel Pengikatan Data.
TemplateBinding- melakukan pengikatan data dari templat kontrol, seperti yang dibahas dalam templat kontrol artikelXamarin.Forms.
RelativeSource - menetapkan sumber pengikatan relatif terhadap posisi target pengikatan, seperti yang dibahas dalam artikel Pengikatan Relatif.

Tata RelativeLayout letak menggunakan ekstensi ConstraintExpressionmarkup kustom . Ekstensi markup ini dijelaskan dalam artikel RelativeLayout.

x:Ekstensi markup statis

Ekstensi x:Static markup didukung oleh StaticExtension kelas . Kelas memiliki satu properti bernama Member jenis string yang Anda atur ke nama konstanta publik, properti statis, bidang statis, atau anggota enumerasi.

Salah satu cara umum untuk digunakan x:Static adalah terlebih dahulu menentukan kelas dengan beberapa konstanta atau variabel statis, seperti kelas kecil AppConstants ini:

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

Halaman Demo x:Static menunjukkan beberapa cara untuk menggunakan x:Static ekstensi markup. Pendekatan yang paling verbose membuat instans StaticExtension kelas antara Label.FontSize tag elemen properti:

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

Pengurai XAML juga memungkinkan StaticExtension kelas disingkat sebagai x:Static:

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

Ini dapat disederhanakan lebih jauh, tetapi perubahan memperkenalkan beberapa sintaks baru: Ini terdiri dari menempatkan StaticExtension kelas dan pengaturan anggota dalam kurung kurawal. Ekspresi yang dihasilkan diatur langsung ke FontSize atribut :

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

Perhatikan bahwa tidak ada tanda kutip dalam kurung kurawal. Properti Member bukan StaticExtension lagi atribut XML. Ini bukan bagian dari ekspresi untuk ekstensi markup.

Sama seperti yang dapat Anda singkatkan x:StaticExtensionx:Static ketika Anda menggunakannya sebagai elemen objek, Anda juga dapat menyingkatnya dalam ekspresi dalam kurung kurawal:

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

Kelas StaticExtension memiliki atribut yang ContentProperty mereferensikan properti Member, yang menandai properti ini sebagai properti konten default kelas. Untuk ekstensi markup XAML yang dinyatakan dengan kurung kurawal, Anda dapat menghilangkan Member= bagian ekspresi:

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

Ini adalah bentuk paling umum dari x:Static ekstensi markup.

Halaman Demo Statis berisi dua contoh lainnya. Tag akar file XAML berisi deklarasi namespace XML untuk namespace layanan .NET System :

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

Ini memungkinkan Label ukuran font diatur ke bidang Math.PIstatis . Itu menghasilkan teks yang agak kecil, sehingga Scale properti diatur ke Math.E:

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

Contoh akhir menampilkan Device.RuntimePlatform nilai . Properti Environment.NewLine statis digunakan untuk menyisipkan karakter baris baru di antara dua Span objek:

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

Berikut adalah sampel yang berjalan:

x:Ekstensi markup referensi

Ekstensi x:Reference markup didukung oleh ReferenceExtension kelas . Kelas memiliki properti tunggal bernama Name jenis string yang Anda atur ke nama elemen pada halaman yang telah diberi nama dengan x:Name. Properti ini Name adalah properti konten , ReferenceExtensionjadi Name= tidak diperlukan saat x:Reference muncul dalam kurung kurawal.

x:Reference Ekstensi markup digunakan secara eksklusif dengan pengikatan data, yang dijelaskan secara lebih rinci dalam artikel Pengikatan Data.

Halaman Demo x:Referensi menunjukkan dua penggunaan x:Reference dengan pengikatan data, yang pertama di mana digunakan untuk mengatur Source properti Binding objek, dan yang kedua tempatnya digunakan untuk mengatur BindingContext properti untuk dua pengikatan data:

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

Kedua x:Reference ekspresi menggunakan versi singkat dari ReferenceExtension nama kelas dan menghilangkan Name= bagian ekspresi. Dalam contoh pertama, x:Reference ekstensi markup disematkan dalam Binding ekstensi markup. Perhatikan bahwa pengaturan dan StringFormat dipisahkan Source oleh koma. Berikut adalah program yang berjalan:

x:Jenis ekstensi markup

Ekstensi x:Type markup adalah XAML yang setara dengan kata kunci C# typeof . Ini didukung oleh TypeExtension kelas , yang mendefinisikan satu properti bernama TypeName jenis string yang diatur ke nama kelas atau struktur. Ekstensi x:Type markup mengembalikan objek kelas atau struktur tersebut System.Type . TypeName adalah properti konten dari TypeExtension, jadi TypeName= tidak diperlukan saat x:Type muncul dengan kurung kurawal.

Dalam Xamarin.Forms, ada beberapa properti yang memiliki argumen jenis Type. Contohnya termasuk TargetType properti , dan atribut x:TypeArguments yang digunakan untuk menentukan argumen dalam Stylekelas generik. Namun, pengurai XAML melakukan typeof operasi secara otomatis, dan x:Type ekstensi markup tidak digunakan dalam kasus ini.

Satu tempat di mana x:Typediperlukan adalah dengan x:Array ekstensi markup, yang dijelaskan di bagian berikutnya.

Ekstensi x:Type markup juga berguna saat membuat menu di mana setiap item menu sesuai dengan objek jenis tertentu. Anda dapat mengaitkan Type objek dengan setiap item menu, lalu membuat instans objek saat item menu dipilih.

Ini adalah cara kerja menu navigasi dalam MainPageprogram Ekstensi Markup. File MainPage.xaml berisi TableView dengan masing-masing TextCell yang sesuai dengan halaman tertentu dalam program:

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

Berikut adalah halaman utama pembukaan di Ekstensi Markup:

Setiap CommandParameter properti diatur ke x:Type ekstensi markup yang mereferensikan salah satu halaman lainnya. Properti Command terikat ke properti bernama NavigateCommand. Properti ini didefinisikan dalam 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; }
}

Properti NavigateCommand adalah Command objek yang mengimplementasikan perintah jalankan dengan argumen jenis Type — nilai CommandParameter. Metode ini menggunakan untuk membuat instans Activator.CreateInstance halaman lalu menavigasi ke halaman tersebut. Konstruktor menyimpulkan dengan mengatur BindingContext halaman ke halaman itu sendiri, yang memungkinkan aktif BindingCommand untuk bekerja. Lihat artikel Pengikatan Data dan terutama artikel Perintah untuk detail selengkapnya tentang jenis kode ini.

Halaman Demo x:Type menggunakan teknik serupa untuk membuat instans Xamarin.Forms elemen dan menambahkannya ke StackLayout. File XAML awalnya terdiri dari tiga Button elemen dengan propertinya Command diatur ke dan BindingCommandParameter properti diatur ke jenis tiga Xamarin.Forms tampilan:

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

File code-behind menentukan dan menginisialisasi CreateCommand properti:

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

Metode yang dijalankan ketika Button ditekan membuat instans baru argumen, mengatur propertinya VerticalOptions , dan menambahkannya ke StackLayout. Ketiga Button elemen kemudian berbagi halaman dengan tampilan yang dibuat secara dinamis:

x:Ekstensi markup array

Ekstensi x:Array markup memungkinkan Anda menentukan array dalam markup. Ini didukung oleh ArrayExtension kelas , yang mendefinisikan dua properti:

Type jenis Type, yang menunjukkan jenis elemen dalam array.
Items jenis IList, yang merupakan kumpulan item itu sendiri. Ini adalah properti konten dari ArrayExtension.

Ekstensi x:Array markup itu sendiri tidak pernah muncul dalam kurung kurawal. Sebagai gantinya, x:Array tag mulai dan akhir memisahkan daftar item. Atur Type properti ke x:Type ekstensi markup.

Halaman Demo x:Array memperlihatkan cara menggunakan x:Array untuk menambahkan item ke dengan ListView mengatur ItemsSource properti ke array:

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

membuat ViewCell sederhana BoxView untuk setiap entri warna:

Ada beberapa cara untuk menentukan item individual Color dalam array ini. Anda dapat menggunakan x:Static ekstensi markup:

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

Atau, Anda dapat menggunakan StaticResource untuk mengambil warna dari kamus sumber daya:

<StaticResource Key="myColor" />

Menjelang akhir artikel ini, Anda akan melihat ekstensi markup XAML kustom yang juga membuat nilai warna baru:

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

Saat menentukan array jenis umum seperti string atau angka, gunakan tag yang tercantum dalam artikel Meneruskan Argumen Konstruktor untuk memisahkan nilai.

x:Ekstensi markup null

Ekstensi x:Null markup didukung oleh NullExtension kelas . Ini tidak memiliki properti dan hanya XAML yang setara dengan kata kunci C# null .

Ekstensi x:Null markup jarang diperlukan dan jarang digunakan, tetapi jika Anda menemukan kebutuhan untuk itu, Anda akan senang bahwa itu ada.

Halaman Demo x:Null mengilustrasikan satu skenario ketika x:Null mungkin nyaman. Misalkan Anda menentukan implisit StyleFontFamily untuk Label yang mencakup Setter yang mengatur properti ke nama keluarga yang bergantung pada platform:

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

Kemudian Anda menemukan bahwa untuk salah Label satu elemen, Anda menginginkan semua pengaturan properti dalam implisit Style kecuali untuk FontFamily, yang Anda inginkan menjadi nilai default. Anda dapat menentukan yang lain Style untuk tujuan itu tetapi pendekatan yang lebih sederhana hanyalah mengatur FontFamily properti khusus Label ke x:Null, seperti yang ditunjukkan di pusat Label.

Berikut adalah program yang berjalan:

Perhatikan bahwa empat Label elemen memiliki font serif, tetapi pusat Label memiliki font sans-serif default.

Ekstensi markup OnPlatform

Ekstensi OnPlatform markup memungkinkan Anda menyesuaikan tampilan UI berdasarkan per platform. Ini menyediakan fungsionalitas OnPlatform yang sama dengan kelas dan On , tetapi dengan representasi yang lebih ringkas.

Ekstensi OnPlatform markup didukung oleh OnPlatformExtension kelas , yang menentukan properti berikut:

Default jenis object, yang Anda atur ke nilai default untuk diterapkan ke properti yang mewakili platform.
Android jenis object, yang Anda atur ke nilai yang akan diterapkan di Android.
GTK jenis object, yang Anda tetapkan ke nilai yang akan diterapkan pada platform GTK.
iOS jenis object, yang Anda atur ke nilai yang akan diterapkan di iOS.
macOS jenis object, yang Anda atur ke nilai yang akan diterapkan di macOS.
Tizen jenis object, yang Anda tetapkan ke nilai yang akan diterapkan pada platform Tizen.
UWPjenis object, yang Anda atur ke nilai yang akan diterapkan pada Platform Windows Universal.
WPF jenis object, yang Anda tetapkan ke nilai yang akan diterapkan pada platform Windows Presentation Foundation.
Converter jenis IValueConverter, yang dapat diatur ke IValueConverter implementasi.
ConverterParameter jenis object, yang dapat diatur ke nilai untuk diteruskan ke IValueConverter implementasi.

Catatan

Parser XAML memungkinkan OnPlatformExtension kelas disingkat sebagai OnPlatform.

Properti Default adalah properti konten dari OnPlatformExtension. Oleh karena itu, untuk ekspresi markup XAML yang dinyatakan dengan kurung kurawal, Anda dapat menghilangkan Default= bagian ekspresi asalkan itu adalah argumen pertama. Default Jika properti tidak diatur, properti akan default ke BindableProperty.DefaultValue nilai properti, asalkan ekstensi markup menargetkan BindableProperty.

Penting

Pengurai XAML mengharapkan bahwa nilai jenis yang benar akan disediakan untuk properti yang menggunakan OnPlatform ekstensi markup. Jika konversi jenis diperlukan, OnPlatform ekstensi markup akan mencoba melakukannya menggunakan konverter default yang disediakan oleh Xamarin.Forms. Namun, ada beberapa konversi jenis yang tidak dapat dilakukan oleh pengonversi default dan dalam kasus Converter ini properti harus diatur ke IValueConverter implementasi.

Halaman Demo OnPlatform memperlihatkan cara menggunakan OnPlatform ekstensi 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" />

Dalam contoh ini, ketiga OnPlatform ekspresi menggunakan versi singkat dari OnPlatformExtension nama kelas. Tiga OnPlatform ekstensi markup mengatur Colorproperti , WidthRequest, dan HeightRequest dari BoxView ke nilai yang berbeda di iOS, Android, dan UWP. Ekstensi markup juga menyediakan nilai default untuk properti ini pada platform yang tidak ditentukan, sambil menghilangkan Default= bagian ekspresi. Perhatikan bahwa properti ekstensi markup yang diatur dipisahkan oleh koma.

Berikut adalah program yang berjalan:

Ekstensi markup OnIdiom

Ekstensi OnIdiom markup memungkinkan Anda menyesuaikan tampilan UI berdasarkan idiom perangkat yang dijalankan aplikasi. Ini didukung oleh OnIdiomExtension kelas , yang menentukan properti berikut:

Default jenis object, yang Anda atur ke nilai default untuk diterapkan ke properti yang mewakili idiom perangkat.
Phone jenis object, yang Anda atur ke nilai yang akan diterapkan di ponsel.
Tablet jenis object, yang Anda atur ke nilai yang akan diterapkan pada tablet.
Desktop jenis object, yang Anda tetapkan ke nilai yang akan diterapkan pada platform desktop.
TV jenis object, yang Anda tetapkan ke nilai yang akan diterapkan pada platform TV.
Watch jenis object, yang Anda tetapkan ke nilai yang akan diterapkan pada platform Watch.
Converter jenis IValueConverter, yang dapat diatur ke IValueConverter implementasi.
ConverterParameter jenis object, yang dapat diatur ke nilai untuk diteruskan ke IValueConverter implementasi.

Catatan

Parser XAML memungkinkan OnIdiomExtension kelas disingkat sebagai OnIdiom.

Properti Default adalah properti konten dari OnIdiomExtension. Oleh karena itu, untuk ekspresi markup XAML yang dinyatakan dengan kurung kurawal, Anda dapat menghilangkan Default= bagian ekspresi asalkan itu adalah argumen pertama.

Penting

Pengurai XAML mengharapkan bahwa nilai jenis yang benar akan disediakan untuk properti yang menggunakan OnIdiom ekstensi markup. Jika konversi jenis diperlukan, OnIdiom ekstensi markup akan mencoba melakukannya menggunakan konverter default yang disediakan oleh Xamarin.Forms. Namun, ada beberapa konversi jenis yang tidak dapat dilakukan oleh pengonversi default dan dalam kasus Converter ini properti harus diatur ke IValueConverter implementasi.

Halaman Demo OnIdiom memperlihatkan cara menggunakan OnIdiom ekstensi 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" />

Dalam contoh ini, ketiga OnIdiom ekspresi menggunakan versi singkat dari OnIdiomExtension nama kelas. Tiga OnIdiom ekstensi markup mengatur Colorproperti , WidthRequest, dan HeightRequest dari BoxView ke nilai yang berbeda pada idiom ponsel, tablet, dan desktop. Ekstensi markup juga menyediakan nilai default untuk properti ini pada idiom yang tidak ditentukan, sambil menghilangkan Default= bagian ekspresi. Perhatikan bahwa properti ekstensi markup yang diatur dipisahkan oleh koma.

Berikut adalah program yang berjalan:

Ekstensi markup DataTemplate

Ekstensi DataTemplate markup memungkinkan Anda mengonversi jenis menjadi DataTemplate. Ini didukung oleh DataTemplateExtension kelas , yang mendefinisikan TypeName properti, jenis string, yang diatur ke nama jenis yang akan dikonversi menjadi DataTemplate. Properti TypeName adalah properti konten dari DataTemplateExtension. Oleh karena itu, untuk ekspresi markup XAML yang dinyatakan dengan kurung kurawal, Anda dapat menghilangkan TypeName= bagian ekspresi.

Catatan

Parser XAML memungkinkan DataTemplateExtension kelas disingkat sebagai DataTemplate.

Penggunaan umum ekstensi markup ini ada di aplikasi Shell, seperti yang ditunjukkan dalam contoh berikut:

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

Dalam contoh ini, MonkeysPage dikonversi dari ke ContentPageDataTemplate, yang ditetapkan sebagai nilai ShellContent.ContentTemplate properti. Ini memastikan bahwa MonkeysPage hanya dibuat ketika navigasi ke halaman terjadi, bukan saat startup aplikasi.

Untuk informasi selengkapnya tentang aplikasi Shell, lihat Xamarin.Forms Shell.

Ekstensi markup FontImage

Ekstensi FontImage markup memungkinkan Anda menampilkan ikon font dalam tampilan apa pun yang dapat menampilkan ImageSource. Ini menyediakan fungsionalitas FontImageSource yang sama dengan kelas, tetapi dengan representasi yang lebih ringkas.

Ekstensi FontImage markup didukung oleh FontImageExtension kelas , yang menentukan properti berikut:

FontFamily jenis string, keluarga font tempat ikon font berada.
Glyph jenis string, nilai karakter unicode ikon font.
Color jenis Color, warna yang akan digunakan saat menampilkan ikon font.
Size jenis double, ukuran, dalam unit independen perangkat, dari ikon font yang dirender. Nilai default adalah 30. Selain itu, properti ini dapat diatur ke ukuran font bernama.

Catatan

Parser XAML memungkinkan FontImageExtension kelas disingkat sebagai FontImage.

Properti Glyph adalah properti konten dari FontImageExtension. Oleh karena itu, untuk ekspresi markup XAML yang dinyatakan dengan kurung kurawal, Anda dapat menghilangkan Glyph= bagian ekspresi asalkan itu adalah argumen pertama.

Halaman Demo FontImage memperlihatkan cara menggunakan FontImage ekstensi markup:

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

Dalam contoh ini, versi singkat dari FontImageExtension nama kelas digunakan untuk menampilkan ikon XBox, dari keluarga font Ionicons, dalam Image. Ekspresi ini juga menggunakan OnPlatform ekstensi markup untuk menentukan nilai properti yang berbeda FontFamily di iOS dan Android. Selain itu, Glyph= bagian ekspresi dihilangkan, dan properti ekstensi markup yang diatur dipisahkan oleh koma. Perhatikan bahwa sementara karakter unicode untuk ikon adalah \uf30c, itu harus diloloskan di XAML dan menjadi .

Berikut adalah program yang berjalan:

Untuk informasi tentang menampilkan ikon font dengan menentukan data ikon font dalam FontImageSource objek, lihat Menampilkan ikon font.

Ekstensi markup AppThemeBinding

AppThemeBinding Ekstensi markup memungkinkan Anda menentukan sumber daya yang akan digunakan, seperti gambar atau warna, berdasarkan tema sistem saat ini.

Penting

Ekstensi AppThemeBinding markup memiliki persyaratan sistem operasi minimum. Untuk informasi selengkapnya, lihat Merespons perubahan tema sistem dalam Xamarin.Forms aplikasi.

Ekstensi AppThemeBinding markup didukung oleh AppThemeBindingExtension kelas , yang menentukan properti berikut:

Default, dari jenis object, yang Anda atur ke sumber daya yang akan digunakan secara default.
Light, dari jenis object, yang Anda atur ke sumber daya yang akan digunakan saat perangkat menggunakan tema cahayanya.
Dark, dari jenis object, yang Anda atur ke sumber daya yang akan digunakan saat perangkat menggunakan tema gelapnya.
Value, dari jenis object, yang mengembalikan sumber daya yang saat ini digunakan oleh ekstensi markup.

Catatan

Parser XAML memungkinkan AppThemeBindingExtension kelas disingkat sebagai AppBindingTheme.

Properti Default adalah properti konten dari AppThemeBindingExtension. Oleh karena itu, untuk ekspresi markup XAML yang dinyatakan dengan kurung kurawal, Anda dapat menghilangkan Default= bagian ekspresi asalkan itu adalah argumen pertama.

Halaman Demo AppThemeBinding memperlihatkan cara menggunakan AppThemeBinding ekstensi 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>

Dalam contoh ini, warna teks pertama Label diatur ke hijau ketika perangkat menggunakan tema terangnya, dan diatur ke merah saat perangkat menggunakan tema gelapnya. Yang kedua Label memiliki properti yang TextColor ditetapkan melalui Style. Ini Style mengatur warna teks menjadi Label hitam secara default, menjadi biru ketika perangkat menggunakan tema terangnya, dan untuk memunculkan ketika perangkat menggunakan tema gelapnya.

Berikut adalah program yang berjalan:

AppThemeBinding Demo

Menentukan ekstensi markup

Jika Anda telah menemukan kebutuhan akan ekstensi markup XAML yang tidak tersedia di Xamarin.Forms, Anda dapat membuat ekstensi Anda sendiri.

Share via

Mengonsumsi Ekstensi Markup XAML

x:Ekstensi markup statis

x:Ekstensi markup referensi

x:Jenis ekstensi markup

x:Ekstensi markup array

x:Ekstensi markup null

Ekstensi markup OnPlatform

Ekstensi markup OnIdiom

Ekstensi markup DataTemplate

Ekstensi markup FontImage

Ekstensi markup AppThemeBinding

Menentukan ekstensi markup

Sumber Daya Tambahan:

Share via

Mengonsumsi Ekstensi Markup XAML

x:Ekstensi markup statis

x:Ekstensi markup referensi

x:Jenis ekstensi markup

x:Ekstensi markup array

x:Ekstensi markup null

Ekstensi markup OnPlatform

Ekstensi markup OnIdiom

Ekstensi markup DataTemplate

Ekstensi markup FontImage

Ekstensi markup AppThemeBinding

Menentukan ekstensi markup

Tautan terkait

Sumber Daya Tambahan: