XAML Biçimlendirme Uzantılarını Kullanma

Örneği İndir Örneği indirme

XAML işaretleme uzantıları, öğe özniteliklerinin çeşitli kaynaklardan ayarlansa bile XAML'nin gücünü ve esnekliğini artırmaya yardımcı olur. Çeşitli XAML işaretleme uzantıları, XAML 2009 belirtimlerinin bir parçasıdır. Bunlar, özel ad alanı ön eki olan XAML dosyalarında görünür ve genellikle x bu ön ekle adlandırılır. Bu makalede aşağıdaki işaretleme uzantıları ele almaktadır:

  • x:Static – statik özelliklere, alanlara veya sabitler üyelerine başvuru.
  • x:Reference – sayfada adlandırılmış öğelere başvuru.
  • x:Type – bir nesnesine özniteliği System.Type ayarlayın.
  • x:Array – belirli bir türde nesne dizisi oluşturun.
  • x:Null – bir özniteliği bir değere null ayarlayın.
  • OnPlatform – Kullanıcı arabirimi görünümünü platform başına temelinde özelleştirin.
  • OnIdiom – Uygulamanın üzerinde çalıştır olduğu cihazın deyimine göre kullanıcı arabirimi görünümünü özelleştirin.
  • DataTemplate – türü bir türüne DataTemplate dönüştürür.
  • FontImage – herhangi bir görünümde bir yazı tipi simgesi ImageSource görüntüleyebilirsiniz.
  • AppThemeBinding – geçerli sistem temasına göre bir kaynak tüketir.

Ek XAML işaretleme uzantıları geçmişte diğer XAML uygulamaları tarafından da desteklendir. Xamarin.Forms Bunlar diğer makalelerde daha tam olarak açıklanmıştır:

  • StaticResource- Kaynak Sözlükleri makalesinde açıklandığı gibi bir kaynak sözlüğünden StaticResource
  • DynamicResource- Dinamik Stiller makalesinde açıklandığı gibi, kaynak sözlüğünde nesnelerdeki DynamicResource
  • Binding- Veri Bağlama makalesinde açıklandığı gibi iki nesne özellikleri arasında bir Binding
  • TemplateBinding - makalesinde ele alınarak bir denetim şablonundan veri bağlama Xamarin.Forms control templates gerçekleştirir.
  • RelativeSource- Göreli Bağlamalar makalesinde ele alınarak bağlama kaynağını bağlama hedefinin konumuyla RelativeSource

Düzen, RelativeLayout özel işaretleme uzantısını ConstraintExpression kullanır. Bu işaretleme uzantısı RelativeLayout makalesinde açıklanmıştır.

x:Statik işaretleme uzantısı

işaretleme x:Static uzantısı sınıfı tarafından StaticExtension de destekler. sınıfının Xamarin_Forms _Xaml_StaticExtension_Member" data-linktype="absolute-path">türünde ortak sabit, statik özellik, statik alan veya sabitleme üyesinin adına ayar istediğiniz tek bir özelliği Memberstring vardır.

Kullanmanın yaygın yollarından biri, x:StaticAppConstantsx:Static programında bu küçük sınıf gibi bazı sabitler veya statik değişkenlerle bir sınıf tanımlamaktır:

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

x:Static Demo sayfası işaretleme uzantısını kullanmanın çeşitli yollarını gösterir. En ayrıntılı yaklaşım, StaticExtension property-element etiketleri arasında sınıfı örneğini Label.FontSize sağlar:

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

XAML ayrıştırıcısı, sınıfının StaticExtension olarak kısaltılmış olmasına da olanak x:Static sağlar:

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

Bu daha da basitleştirilebilse de, değişiklik bazı yeni söz dizimi içeriyor: Sınıf ve üye ayarını küme StaticExtension ayraçları içine koymaktan oluşur. Sonuçta elde edilen ifade doğrudan özniteliğine FontSize ayarlanır:

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

Küme ayraçları içinde tırnak işareti olmadığını fark etmez. özelliği Member artık bir XML özniteliği StaticExtension değildir. Bunun yerine, işaretleme uzantısı için ifadenin bir parçasıdır.

Nesne öğesi olarak kullanmak için kısaltmalar kullanabileceğiniz gibi, küme ayraçları içindeki ifadede de bunu x:StaticExtensionx:Static kısaltabilirsiniz:

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

sınıfı, StaticExtensionContentProperty özelliğine başvuran bir özniteliğine sahip ve bu özelliği sınıfın varsayılan Member içerik özelliği olarak işaretler. Küme ayraçları ile ifadelenen XAML işaretleme uzantıları için ifadenin Member= bölümünü ortadan kaldırebilirsiniz:

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

Bu, işaretleme uzantısının en yaygın x:Static biçimidir.

Statik Tanıtım sayfası iki örnek daha içerir. XAML dosyasının kök etiketi. .NET ad alanı için bir XML ad alanı bildirimi System içerir:

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

Bu, yazı Label tipi boyutunun statik alanına ayarlanmış olmasına olanak Math.PI sağlar. Bu, küçük bir metinle sonuç verir, Scale bu nedenle özelliği olarak Math.E ayarlanır:

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

Son örnekte değeri Device.RuntimePlatform görüntülenir. Statik Environment.NewLine özellik, iki nesne arasına yeni bir satır karakteri eklemek için Span kullanılır:

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

Çalışan örnek şu şekildedir:

x:Static Demo

x:Reference işaretleme uzantısı

işaretleme x:Reference uzantısı sınıfı tarafından ReferenceExtension de destekler. sınıfının Xamarin_Forms _Xaml_ReferenceExtension_Name" data-linktype="absolute-path">adlı tek bir özelliği vardır ve bu özellik, ile bir ad verilen sayfada bir öğenin adına ayar olarak Name ayarlayabilirsiniz. stringx:Name Bu Name özellik, içerik ReferenceExtension özelliğidir, Name= bu nedenle küme x:Reference ayraçlarında göründüğünde gerekli değildir.

İşaretleme uzantısı yalnızca veri bağlamaları ile kullanılır. Bu, Veri Bağlama x:Reference makalesinde daha ayrıntılı olarak x:Reference

x:Reference Demo sayfası, veri bağlamaları ile iki kullanımı gösterir. Burada ilk olarak nesnesinin özelliğini ayarlamak için kullanılır, ikincisinde ise iki veri bağlaması için özelliğini ayarlamak için SourceBindingBindingContext kullanılır:

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

Her x:Reference iki ifade de sınıf adının kısaltılmış sürümünü kullanır ve ReferenceExtension ifadenin bölümünü ortadan Name= kaldırmış olur. İlk örnekte işaretleme x:Reference uzantısı, işaretleme uzantısına Binding eklenmiştir. ve ayarlarının SourceStringFormat virgülle ayrıldığına dikkat edin. Çalışan program şu şekildedir:

x:Reference Demo

x:Type işaretleme uzantısı

İşaretleme x:Type uzantısı, C# anahtar sözcüğünün XAML typeof eşdeğeridir. Sınıf veya yapı adına ayarlanmış TypeExtension türde Xamarin_Forms TypeExtension _Xaml_TypeExtension_TypeName" data-linktype="absolute-path">adlı bir özelliği tanımlayan sınıfı TypeName tarafından string desteklemektedir. Biçimlendirme x:Type uzantısı, o System.Type sınıfın veya yapının nesnesini döndürür. TypeName , içeriğinin TypeExtension özelliğidir, TypeName= bu nedenle küme x:Type ayraçları ile görüntülendiğinde gerekli değildir.

içinde, Xamarin.Forms türünde bağımsız değişkenleri olan çeşitli özellikler Type vardır. Örnekler arasında Xamarin_Forms _Style_TargetType" data-linktype="absolute-path">özelliği ve genel sınıflarda bağımsız değişkenleri belirtmek için TargetTypeStyleTargetType özniteliği yer almaktadır. Ancak XAML ayrıştırıcısı işlemi otomatik olarak gerçekleştirir ve işaretleme typeofx:Type uzantısı bu durumlarda kullanılmaz.

Gerekli olan x:Typex:Type biri, sonraki x:Array bölümde açıklanan işaretleme x:Array

Biçimlendirme x:Type uzantısı, her menü öğesinin belirli bir türe sahip bir nesneye karşılık gelen bir menü oluşturmada da yararlıdır. Bir nesneyi her Type menü öğesiyle ilişkilendirilip menü öğesi seçildiğinde nesnesinin örneğini ekleyebilirsiniz.

Biçimlendirme Uzantıları programında gezinti MainPage menüsü bu MainPage çalışır. MainPage.xaml dosyası, programda belirli TextCell bir sayfaya karşılık gelen bir içerir:

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

Biçimlendirme Uzantıları'nın açılış ana sayfası şu şekildedir:

Ana SayfasıAna

Her CommandParameter özellik, diğer x:Type sayfalardan biri için başvurulan bir işaretleme uzantısına ayarlanır. özelliği Command adlı bir özelle NavigateCommand bağlı. Bu özellik, arka arkasındaki MainPage kod dosyasında tanımlanır:

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

özelliği, NavigateCommand türünde Command bağımsız değişkeniyle bir yürütme komutu uygulayan bir nesnedir: TypeCommandParameter değeri. yöntemi, Activator.CreateInstance sayfayı örneği için kullanır ve ardından sayfaya giditir. Oluşturucu, sayfanın kendisini ayarerek son oluşturur ve bu da on BindingContextBinding ayarının Command çalışmasına olanak sağlar. Bu kod türü hakkında daha fazla bilgi için Veri Bağlama makalesine ve özellikle Komut makalesine bakın.

x:Type Tanıtım sayfası, öğelerin örneğini ve öğelerini bir 'ye eklemek için benzer bir teknik StackLayout kullanır. XAML dosyası başlangıçta özellikleri bir olarak ayarlanmış üç öğeden ve özellikler ButtonCommand üç görünüm BindingCommandParameter türüne ayarlanmış şekilde Xamarin.Forms oluşur:

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

Arka arkasındaki kod dosyası, özelliğini tanımlar ve CreateCommand başlatır:

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

bir basıldığında yürütülen yöntemi, bağımsız değişkeninin yeni bir örneğini Button oluşturur, özelliğini VerticalOptions ayarlar ve buna StackLayout ekler. Ardından üç Button öğe, sayfayı dinamik olarak oluşturulan görünümlerle paylaşır:

x:Type Demo

x:Array işaretleme uzantısı

işaretleme x:Array uzantısı, işaretlemede bir dizi tanımlamanıza olanak sağlar. bu, iki özelliği ArrayExtension tanımlayan sınıfı tarafından de destekler:

  • Type dizisinde Type öğelerin türünü gösteren türü.
  • Items öğelerinin IList kendi koleksiyonları olan türünde. Bu, içeriğinin ArrayExtension özelliğidir.

İşaretleme x:Array uzantısı hiçbir zaman küme ayraçları içinde görünür. Bunun x:Array yerine, başlangıç ve bitiş etiketleri öğe listesini sınırlandırr. özelliğini Type işaretleme uzantısı x:Type olarak ayarlayın.

x:Array Tanıtım sayfası, özelliğini bir dizi olarak ayarerek öğe eklemek için ListView kullanmayı ItemsSource gösterir:

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

ViewCellBoxView Her renk girişi için basit oluşturur:

x:Array demo

Bu dizideki ayrı öğeleri belirtmek için birkaç yol vardır Color . x:StaticBiçimlendirme uzantısı kullanabilirsiniz:

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

Ya da StaticResource bir kaynak sözlüğünden renk almak için kullanabilirsiniz:

<StaticResource Key="myColor" />

Bu makalenin sonuna doğru, yeni bir renk değeri de oluşturan özel bir XAML biçimlendirme uzantısı görürsünüz:

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

Dizeler veya sayılar gibi ortak türlerin dizilerini tanımlarken, değerleri sınırlandırmak için geçirilen Oluşturucu bağımsız değişkenleri makalesinde listelenen etiketleri kullanın.

x:Null işaretleme uzantısı

x:NullBiçimlendirme uzantısı sınıf tarafından desteklenir NullExtension . Özelliği yoktur ve C# anahtar sözcüğünün yalnızca XAML eşdeğeridir null .

x:NullBiçimlendirme Uzantısı nadiren gereklidir ve nadiren kullanılır, ancak bunun için bir ihtiyacı bulursanız, bunun var olduğunu seveceksiniz.

X:null demo sayfasında kullanışlı olabilecek bir senaryo gösterilir . StyleLabelSetterFontFamily Özelliği platforma bağımlı bir aile adına ayarlayan öğesini içeren bir için örtülü bir için tanımladığınızı varsayalım:

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

Daha sonra, öğelerinden biri için, LabelStyle varsayılan değer olmasını istediğiniz öğesi hariç tüm özellik ayarlarının örtük olarak istediğinizi keşfedebilirsiniz FontFamily . Bu amaçla bir tane tanımlayabilirsiniz, Style ancak daha basit bir yaklaşım, FontFamilyLabelx:Null merkezinde gösterildiği gibi, yalnızca öğesine özgü özelliğini ayarlamaya yöneliktir Label .

Şu program çalışıyor:

x:null demo

LabelÖğelerin dört bir serif yazı tipine sahip olduğuna, ancak merkezinin Label varsayılan Sans-Serif yazı tipine sahip olduğuna dikkat edin.

OnPlatform işaretleme uzantısı

OnPlatform işaretleme uzantısı, kullanıcı arabirimi görünümünü platforma göre özelleştirmenizi sağlar. Ve sınıflarıyla aynı işlevselliği sağlar OnPlatformOn , ancak daha kısa bir gösterimle.

OnPlatformBiçimlendirme uzantısı, OnPlatformExtension aşağıdaki özellikleri tanımlayan sınıfı tarafından desteklenir:

  • Defaultobject, platformları temsil eden özelliklere uygulanacak bir varsayılan değere ayarlarsınız.
  • Androidobject, Android 'e uygulanacak bir değere ayarladığınız türünde.
  • GTKobject, GTK platformları üzerinde uygulanacak bir değere ayarlamanız gerekir.
  • iOSobject, bu, iOS üzerinde uygulanacak bir değere ayarladığınız türünde.
  • macOSobject, bu, macOS 'ta uygulanacak bir değere ayarladığınız türünde.
  • Tizenobject, bu, Tizen platformunda uygulanacak bir değere ayarlamanız gerekir.
  • UWP' de object , Evrensel Windows Platformu uygulanacak bir değere ayarlamanız gerekir.
  • WPFobject, Windows Presentation Foundation platformunda uygulanacak bir değere ayarlarsınız.
  • ConverterIValueConverter, bir uygulamaya ayarlanabilir olan türü IValueConverter .
  • ConverterParameterobject, bu, uygulamaya geçirilecek bir değere ayarlanabilir IValueConverter .

Not

XAML ayrıştırıcısı, OnPlatformExtension sınıfın kısaltılalmasına izin verir OnPlatform .

DefaultÖzelliği, öğesinin içerik özelliğidir OnPlatformExtension . Bu nedenle, küme ayraçları ile ifade edilen XAML biçimlendirme ifadeleri için, Default= ifadenin ilk bağımsız değişken olduğu belirtilen bölümünü ortadan kaldırabilirsiniz. DefaultÖzellik ayarlanmamışsa, DefaultBindableProperty.DefaultValue biçimlendirme uzantısının bir hedeflediği "Data-LinkType =" Absolute-path ">Özellik değeri _BindableProperty_DefaultValue Xamarin_Forms varsayılan olur BindableProperty .

Önemli

XAML ayrıştırıcısı, biçimlendirme uzantısını kullanan özelliklere doğru türdeki değerlerin sağlanmasını bekler OnPlatform . Tür dönüşümü gerekliyse, OnPlatform biçimlendirme uzantısı tarafından sunulan varsayılan dönüştürücüleri kullanarak bunu gerçekleştirmeye çalışır Xamarin.Forms . Ancak, varsayılan dönüştürücüler tarafından gerçekleştirilemediği bazı tür dönüştürmeleri vardır ve bu durumlarda Converter özelliğin bir uygulamaya ayarlanması gerekir IValueConverter .

Onplatform tanıtım sayfası, biçimlendirme uzantısının nasıl kullanılacağını gösterir :

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

Bu örnekte, üç ifade, OnPlatform sınıf adının kısaltılmış sürümünü kullanır OnPlatformExtension . Üç OnPlatform biçimlendirme uzantısı, OnPlatform "Data-LinkType =" Absolute-path ">Xamarin_Forms _BoxView_Color, Xamarin_Forms _VisualElement_WidthRequest" Data-LinkType = "Absolute Color -path" >WidthRequest ve Xamarin_Forms _VisualElement_HeightRequest Color "Data-LinkType =" Absolute-path ">' ı HeightRequestBoxView iOS, Android ve UWP 'de farklı değerlere ayarlayın. Biçimlendirme uzantıları Ayrıca, ifadenin parçasını ortadan kaldırarak, belirtilen platformlarda bu özellikler için varsayılan değerleri sağlar Default= . Ayarlanan biçimlendirme uzantısı özelliklerinin virgüller ile ayrıldığına dikkat edin.

Şu program çalışıyor:

demo onplatform demo

Onidom biçimlendirme uzantısı

OnIdiomBiçimlendirme uzantısı, uygulamanın üzerinde çalıştığı cihazın idb ' ne göre Kullanıcı arabirimi görünümünü özelleştirmenizi sağlar. OnIdiomExtensionAşağıdaki özellikleri tanımlayan sınıfı tarafından desteklenir:

  • Default türünde object , cihaz ıoms 'yi temsil eden özelliklere uygulanacak bir varsayılan değere ayarlamanız gerekir.
  • Phoneobject, bu tür, telefonlarda uygulanacak bir değere ayarlanır.
  • Tabletobject, tabletlere uygulanacak bir değere ayarladığınız türünde.
  • Desktopobject, bu, masaüstü platformlarına uygulanacak bir değere ayarladığınız türünde bir değer olarak ayarlanır.
  • TVobject, bu, TV platformlarına uygulanacak bir değere ayarladığınız türünde.
  • Watchobject, bu, izleme platformları üzerinde uygulanacak bir değere ayarlamanız gerekir.
  • ConverterIValueConverter, bir uygulamaya ayarlanabilir olan türü IValueConverter .
  • ConverterParameterobject, bu, uygulamaya geçirilecek bir değere ayarlanabilir IValueConverter .

Not

XAML ayrıştırıcısı, OnIdiomExtension sınıfın kısaltılalmasına izin verir OnIdiom .

DefaultÖzelliği, öğesinin içerik özelliğidir OnIdiomExtension . Bu nedenle, küme ayraçları ile ifade edilen XAML biçimlendirme ifadeleri için, Default= ifadenin ilk bağımsız değişken olduğu belirtilen bölümünü ortadan kaldırabilirsiniz.

Önemli

XAML ayrıştırıcısı, biçimlendirme uzantısını kullanan özelliklere doğru türdeki değerlerin sağlanmasını bekler OnIdiom . Tür dönüşümü gerekliyse, OnIdiom biçimlendirme uzantısı tarafından sunulan varsayılan dönüştürücüleri kullanarak bunu gerçekleştirmeye çalışır Xamarin.Forms . Ancak, varsayılan dönüştürücüler tarafından gerçekleştirilemediği bazı tür dönüştürmeleri vardır ve bu durumlarda Converter özelliğin bir uygulamaya ayarlanması gerekir IValueConverter .

Onidom tanıtım sayfası, biçimlendirme uzantısının nasıl kullanılacağını gösterir :

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

Bu örnekte, üç ifade, OnIdiom sınıf adının kısaltılmış sürümünü kullanır OnIdiomExtension . Üç OnIdiom biçimlendirme uzantısı, OnIdiom "Data-LinkType =" Absolute-path ">Xamarin_Forms _BoxView_Color, Xamarin_Forms _VisualElement_WidthRequest" Data-LinkType = "Absolute Color -path" >WidthRequest ve Xamarin_Forms _VisualElement_HeightRequest Color "Data-LinkType =" Absolute-path ">, ' HeightRequest nin BoxView Telefon, tablet ve Masaüstü Biçimlendirme uzantıları aynı zamanda, ifadenin parçasını ortadan kaldırarak belirtilmeyen bu özellikler için varsayılan değerleri sağlar Default= . Ayarlanan biçimlendirme uzantısı özelliklerinin virgüller ile ayrıldığına dikkat edin.

Şu program çalışıyor:

demo tanıtım onidom demo

DataTemplate biçimlendirme uzantısı

DataTemplateBiçimlendirme uzantısı, bir türü öğesine dönüştürmenize olanak sağlar DataTemplate . DataTemplateExtensionTypeNamestring , ' A dönüştürülecek türün adı olarak ayarlanan, türünde bir özelliği tanımlayan sınıfı tarafından desteklenir DataTemplate . TypeNameÖzelliği, öğesinin içerik özelliğidir DataTemplateExtension . Bu nedenle, küme ayraçları ile ifade edilen XAML biçimlendirme ifadeleri için TypeName= ifadenin bölümünü ortadan kaldırabilirsiniz.

Not

XAML ayrıştırıcısı, DataTemplateExtension sınıfın kısaltılalmasına izin verir DataTemplate .

Bu biçimlendirme uzantısının tipik kullanımı, aşağıdaki örnekte gösterildiği gibi bir kabuk uygulamasında bulunur:

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

Bu örnekte, MonkeysPageContentPageDataTemplate özelliğinin değeri olarak ayarlanan öğesinden öğesine dönüştürülür ShellContent.ContentTemplate . Bu, MonkeysPage yalnızca, uygulama başlangıcında değil, sayfanın gezinmesi gerçekleştiğinde oluşturulmasını sağlar.

Kabuk uygulamaları hakkında daha fazla bilgi için bkz Xamarin.Forms Shell ..

Fontımage biçimlendirme uzantısı

FontImageBiçimlendirme uzantısı, bir yazı tipi simgesini görüntüleyegörüntüleyebilen herhangi bir görünümde görüntülemenize olanak sağlar ImageSource . Sınıfı ile aynı işlevselliği sağlar FontImageSource , ancak daha kısa bir gösterimle.

FontImageBiçimlendirme uzantısı, FontImageExtension aşağıdaki özellikleri tanımlayan sınıfı tarafından desteklenir:

  • FontFamily yazı tipi string simgesinin ait olduğu yazı tipi ailesi türü.
  • Glyph türünde string yazı tipi simgesinin Unicode karakter değeri.
  • ColorColoryazı tipi simgesi görüntülenirken kullanılacak olan renk türü.
  • Size türü, double işlenmiş yazı tipi simgesinin, aygıttan bağımsız birimlerde boyutu. Varsayılan değer 30’dur. Ayrıca, bu özellik adlandırılmış bir yazı tipi boyutuna ayarlanabilir.

Not

XAML ayrıştırıcısı, FontImageExtension sınıfın kısaltılalmasına izin verir FontImage .

GlyphÖzelliği, öğesinin içerik özelliğidir FontImageExtension . Bu nedenle, küme ayraçları ile ifade edilen XAML biçimlendirme ifadeleri için, Glyph= ifadenin ilk bağımsız değişken olduğu belirtilen bölümünü ortadan kaldırabilirsiniz.

Fontımage tanıtım sayfası, biçimlendirme uzantısının nasıl kullanılacağını gösterir :

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

Bu örnekte, FontImageExtension Içindeki ıonıcon yazı tipi ailesinden bir Xbox simgesini göstermek için sınıf adının kısaltılmış sürümü kullanılır Image . İfade Ayrıca, OnPlatformFontFamily IOS ve Android üzerinde farklı özellik değerlerini belirtmek için biçimlendirme uzantısını kullanır. Ayrıca, Glyph= ifadenin kısmı ortadan kaldırılır ve ayarlanan biçimlendirme uzantısı özellikleri virgülle ayrılır. Simgenin Unicode karakteri olduğunu ancak \uf30c xaml 'de kaçışın olması gerektiğini unutmayın &#xf30c; .

Şu program çalışıyor:

Fontımage biçimlendirme uzantısının fontıge gösterimi tanıtımekran görüntüsü

Bir nesnedeki yazı tipi simge verilerini belirterek yazı tipi simgelerini görüntüleme hakkında daha fazla bilgi için FontImageSource bkz. FontImageSource.

AppThemeBinding biçimlendirme uzantısı

AppThemeBindingBiçimlendirme uzantısı, geçerli sistem temasını temel alan bir görüntü veya renk gibi tüketilen bir kaynağı belirtmenize olanak sağlar.

Önemli

AppThemeBindingBiçimlendirme uzantısının en düşük işletim sistemi gereksinimleri vardır. Daha fazla bilgi için bkz. Respond to system theme changes in Xamarin.Forms applications.

AppThemeBindingBiçimlendirme uzantısı, AppThemeBindingExtension aşağıdaki özellikleri tanımlayan sınıfı tarafından desteklenir:

  • Default, türü object , varsayılan olarak kullanılacak kaynak olarak ayarlanır.
  • Light, türü object , cihaz kendi açık temasını kullanırken kullanılacak kaynağa ayarlanır.
  • Dark, türü object , cihaz koyu temasını kullanırken kullanılacak kaynağa ayarlanır.
  • Value, bu, object biçimlendirme uzantısı tarafından şu anda kullanılmakta olan kaynağı döndürür.

Not

XAML ayrıştırıcısı, AppThemeBindingExtension sınıfın kısaltılalmasına izin verir AppBindingTheme .

DefaultÖzelliği, öğesinin içerik özelliğidir AppThemeBindingExtension . Bu nedenle, küme ayraçları ile ifade edilen XAML biçimlendirme ifadeleri için, Default= ifadenin ilk bağımsız değişken olduğu belirtilen bölümünü ortadan kaldırabilirsiniz.

Appthemebinding tanıtım sayfası, biçimlendirme uzantısının nasıl kullanılacağını gösterir :

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

Bu örnekte, Label cihaz açık temasını kullanırken ilki metin rengi yeşil olarak ayarlanır ve cihaz koyu temasını kullanırken kırmızı olarak ayarlanır. İkincisi, Label Xamarin_Forms Label _Label_TextColor "Data-LinkType =" Absolute-path ">özelliği olarak TextColor ayarlanmış bir Style . Bu Style , ' ın metin rengini Label Varsayılan olarak siyaha, cihaz açık temasını kullanırken mavi ve cihaz koyu temasını kullanırken deniz mavisi olacak şekilde ayarlar.

Şu program çalışıyor:

Appthemebinding demo

Biçimlendirme uzantıları tanımlama

İçinde kullanılamayan bir XAML işaretleme uzantısı gereksinimini tespit ediyorsanız Xamarin.Forms , Xamarin.Forms.