Aracılığıyla paylaş

Bölüm 3. XAML Biçimlendirme Uzantıları

  • Makale

XAML işaretleme uzantıları, XAML'de özelliklerin diğer kaynaklardan dolaylı olarak başvuruda bulunılan nesnelere veya değerlere ayarlanmasına olanak sağlayan önemli bir özelliktir. XAML işaretleme uzantıları özellikle nesneleri paylaşmak ve uygulama genelinde kullanılan sabitlere başvurmak için önemlidir, ancak veri bağlamalarında en büyük yardımcı programını bulurlar.

XAML Biçimlendirme Uzantıları

Genel olarak, bir nesnenin özelliklerini dize, sayı, numaralandırma üyesi veya arka planda bir değere dönüştürülen bir dize gibi açık değerlere ayarlamak için XAML kullanırsınız.

Ancak bazen özelliklerin başka bir yerde tanımlanan veya çalışma zamanında koda göre biraz işlem yapılmasını gerektirebilecek değerlere başvurması gerekir. Bu amaçlar için XAML işaretleme uzantıları kullanılabilir.

Bu XAML işaretleme uzantıları XML'nin uzantıları değildir. XAML tamamen yasal XML'dir. Uygulayan IMarkupExtensionsınıflarda kod tarafından yedeklendikleri için bunlara "uzantılar" denir. Kendi özel işaretleme uzantılarınızı yazabilirsiniz.

Çoğu durumda, XAML işaretleme uzantıları XAML dosyalarında anında tanınabilir çünkü bunlar küme ayraçları tarafından sınırlandırılmış öznitelik ayarları olarak görünür: { ve }, ancak bazen işaretleme uzantıları işaretlemede geleneksel öğeler olarak görünür.

Paylaşılan Kaynaklar

Bazı XAML sayfaları, özellikleri aynı değerlere ayarlanmış birkaç görünüm içerir. Örneğin, bu Button nesnelerin özellik ayarlarının çoğu aynıdır:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SharedResourcesPage"
             Title="Shared Resources Page">

    <StackLayout>
        <Button Text="Do this!"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                BorderWidth="3"
                Rotation="-15"
                TextColor="Red"
                FontSize="24" />

        <Button Text="Do that!"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                BorderWidth="3"
                Rotation="-15"
                TextColor="Red"
                FontSize="24" />

        <Button Text="Do the other thing!"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                BorderWidth="3"
                Rotation="-15"
                TextColor="Red"
                FontSize="24" />

    </StackLayout>
</ContentPage>

Bu özelliklerden birinin değiştirilmesi gerekiyorsa, değişikliği üç kez yerine yalnızca bir kez yapmayı tercih edebilirsiniz. Bu kod olsaydı, bu değerlerin tutarlı ve kolayca değiştirilmesine yardımcı olmak için sabitler ve statik salt okunur nesneler kullanıyor olabilirsiniz.

XAML'de popüler çözümlerden biri, bu tür değerleri veya nesneleri bir kaynak sözlüğünde depolamaktır. VisualElement sınıfı, türündeki anahtarlara ve tür ResourceDictionarydeğerlerine objectsahip bir sözlük olan türünde string adlı Resources bir özellik tanımlar. Nesneleri bu sözlüğe ekleyebilir ve sonra hepsi XAML'de işaretlemeden bunlara başvurabilirsiniz.

Bir sayfada kaynak sözlüğü kullanmak için bir çift Resources özellik öğesi etiketi ekleyin. Bunları sayfanın en üstüne yerleştirmek en uygun seçenektir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SharedResourcesPage"
             Title="Shared Resources Page">

    <ContentPage.Resources>

    </ContentPage.Resources>
    ...
</ContentPage>

Ayrıca etiketlerin açıkça eklenmesi ResourceDictionary de gerekir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SharedResourcesPage"
             Title="Shared Resources Page">

    <ContentPage.Resources>
        <ResourceDictionary>

        </ResourceDictionary>
    </ContentPage.Resources>
    ...
</ContentPage>

Artık çeşitli türlerdeki nesneler ve değerler kaynak sözlüğüne eklenebilir. Bu türlerin örneklenebilir olması gerekir. Örneğin soyut sınıflar olamazlar. Bu türlerin ortak parametresiz oluşturucuya da sahip olması gerekir. Her öğe, özniteliğiyle x:Key belirtilen bir sözlük anahtarı gerektirir. Örneğin:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SharedResourcesPage"
             Title="Shared Resources Page">

    <ContentPage.Resources>
        <ResourceDictionary>
            <LayoutOptions x:Key="horzOptions"
                           Alignment="Center" />

            <LayoutOptions x:Key="vertOptions"
                           Alignment="Center"
                           Expands="True" />
        </ResourceDictionary>
    </ContentPage.Resources>
    ...
</ContentPage>

Bu iki öğe, yapı türündeki LayoutOptionsdeğerlerdir ve her birinin benzersiz bir anahtarı ve bir veya iki özellik kümesi vardır. Kod ve işaretlemede, statik alanlarını LayoutOptionskullanmak çok daha yaygındır, ancak burada özellikleri ayarlamak daha uygundur.

Şimdi bu düğmelerin HorizontalOptions ve VerticalOptions özelliklerini bu kaynaklara ayarlamak gerekir ve bu işlem XAML işaretleme uzantısıyla StaticResource yapılır:

<Button Text="Do this!"
        HorizontalOptions="{StaticResource horzOptions}"
        VerticalOptions="{StaticResource vertOptions}"
        BorderWidth="3"
        Rotation="-15"
        TextColor="Red"
        FontSize="24" />

İşaretleme StaticResource uzantısı her zaman küme ayraçlarıyla sınırlandırılır ve sözlük anahtarını içerir.

Ad, bu DynamicResourceadı StaticResource ile ayırt eder ve Xamarin.Forms bunu da destekler. DynamicResource çalışma zamanı sırasında değişebilecek değerlerle ilişkilendirilmiş sözlük anahtarları içindir, ancak StaticResource sayfadaki öğeler oluşturulduğunda sözlükten öğelere yalnızca bir kez erişir.

özelliği için BorderWidth sözlükte bir çift depolamak gerekir. XAML, ve x:Int32gibi x:Double yaygın veri türleri için etiketleri rahatça tanımlar:

<ContentPage.Resources>
    <ResourceDictionary>
        <LayoutOptions x:Key="horzOptions"
                       Alignment="Center" />

        <LayoutOptions x:Key="vertOptions"
                       Alignment="Center"
                       Expands="True" />

        <x:Double x:Key="borderWidth">
            3
        </x:Double>
    </ResourceDictionary>
</ContentPage.Resources>

Üç satıra koymana gerek yok. Bu döndürme açısı için bu sözlük girdisi yalnızca bir satır alır:

<ContentPage.Resources>
    <ResourceDictionary>
        <LayoutOptions x:Key="horzOptions"
                       Alignment="Center" />

        <LayoutOptions x:Key="vertOptions"
                       Alignment="Center"
                       Expands="True" />

         <x:Double x:Key="borderWidth">
            3
         </x:Double>

        <x:Double x:Key="rotationAngle">-15</x:Double>
    </ResourceDictionary>
</ContentPage.Resources>

Bu iki kaynağa değerlerle aynı şekilde LayoutOptions başvurulabilir:

<Button Text="Do this!"
        HorizontalOptions="{StaticResource horzOptions}"
        VerticalOptions="{StaticResource vertOptions}"
        BorderWidth="{StaticResource borderWidth}"
        Rotation="{StaticResource rotationAngle}"
        TextColor="Red"
        FontSize="24" />

türündeki Colorkaynaklar için, bu tür öznitelikleri doğrudan atarken kullandığınız dize gösterimlerini kullanabilirsiniz. Kaynak oluşturulduğunda tür dönüştürücüleri çağrılır. Aşağıda türüne sahip bir kaynak vardır Color:

<Color x:Key="textColor">Red</Color>

Programlar genellikle bir özelliği gibi numaralandırmanın NamedSize bir üyesine LargeayarlarFontSize. sınıfı arka FontSizeConverter planda çalışarak yöntemini kullanarak platforma bağımlı bir değere Device.GetNamedSized dönüştürür. Ancak, yazı tipi boyutu kaynağı tanımlarken, burada tür olarak x:Double gösterilen sayısal bir değer kullanmak daha mantıklıdır:

<x:Double x:Key="fontSize">24</x:Double>

Artık dışındaki Text tüm özellikler kaynak ayarlarıyla tanımlanır:

<Button Text="Do this!"
        HorizontalOptions="{StaticResource horzOptions}"
        VerticalOptions="{StaticResource vertOptions}"
        BorderWidth="{StaticResource borderWidth}"
        Rotation="{StaticResource rotationAngle}"
        TextColor="{StaticResource textColor}"
        FontSize="{StaticResource fontSize}" />

Platformlar için farklı değerler tanımlamak üzere kaynak sözlüğü içinde de kullanılabilir OnPlatform . Bir nesnenin farklı metin renkleri için kaynak sözlüğüne nasıl OnPlatform dahil olabileceği aşağıda açıklanmıştır:

<OnPlatform x:Key="textColor"
            x:TypeArguments="Color">
    <On Platform="iOS" Value="Red" />
    <On Platform="Android" Value="Aqua" />
    <On Platform="UWP" Value="#80FF80" />
</OnPlatform>

OnPlatform Hem sözlükteki x:TypeArguments bir x:Key nesne olduğundan hem de genel bir sınıf olduğundan bir öznitelik aldığına dikkat edin. iOS, Androidve UWP öznitelikleri, nesne başlatıldığında değerlere Color dönüştürülür.

Altı paylaşılan değere erişen üç düğme içeren son tam XAML dosyası aşağıdadır:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SharedResourcesPage"
             Title="Shared Resources Page">

    <ContentPage.Resources>
        <ResourceDictionary>
            <LayoutOptions x:Key="horzOptions"
                           Alignment="Center" />

            <LayoutOptions x:Key="vertOptions"
                           Alignment="Center"
                           Expands="True" />

            <x:Double x:Key="borderWidth">3</x:Double>

            <x:Double x:Key="rotationAngle">-15</x:Double>

            <OnPlatform x:Key="textColor"
                        x:TypeArguments="Color">
                <On Platform="iOS" Value="Red" />
                <On Platform="Android" Value="Aqua" />
                <On Platform="UWP" Value="#80FF80" />
            </OnPlatform>

            <x:Double x:Key="fontSize">24</x:Double>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout>
        <Button Text="Do this!"
                HorizontalOptions="{StaticResource horzOptions}"
                VerticalOptions="{StaticResource vertOptions}"
                BorderWidth="{StaticResource borderWidth}"
                Rotation="{StaticResource rotationAngle}"
                TextColor="{StaticResource textColor}"
                FontSize="{StaticResource fontSize}" />

        <Button Text="Do that!"
                HorizontalOptions="{StaticResource horzOptions}"
                VerticalOptions="{StaticResource vertOptions}"
                BorderWidth="{StaticResource borderWidth}"
                Rotation="{StaticResource rotationAngle}"
                TextColor="{StaticResource textColor}"
                FontSize="{StaticResource fontSize}" />

        <Button Text="Do the other thing!"
                HorizontalOptions="{StaticResource horzOptions}"
                VerticalOptions="{StaticResource vertOptions}"
                BorderWidth="{StaticResource borderWidth}"
                Rotation="{StaticResource rotationAngle}"
                TextColor="{StaticResource textColor}"
                FontSize="{StaticResource fontSize}" />

    </StackLayout>
</ContentPage>

Ekran görüntüleri tutarlı stili ve platforma bağımlı stili doğrular:

StilLi Denetimler

Koleksiyonu sayfanın en üstünde tanımlamak Resources en yaygın olsa da, özelliğinin tarafından VisualElementtanımlandığını ve sayfadaki diğer öğelerde koleksiyonlara sahip Resources olabileceğinizi unutmayınResources. Örneğin, bu örnekte öğesine StackLayout bir tane eklemeyi deneyin:

<StackLayout>
    <StackLayout.Resources>
        <ResourceDictionary>
            <Color x:Key="textColor">Blue</Color>
        </ResourceDictionary>
    </StackLayout.Resources>
    ...
</StackLayout>

Düğmelerin metin renginin artık mavi olduğunu keşfedeceksiniz. Temel olarak, XAML ayrıştırıcısı bir StaticResource işaretleme uzantısıyla karşılaştığında görsel ağacı arar ve bu anahtarı içeren ilk ResourceDictionary karşılaştığını kullanır.

Kaynak sözlüklerinde depolanan en yaygın nesne türlerinden biri, özellik ayarları koleksiyonunu tanımlayan 'dir Xamarin.FormsStyle. Stiller, Stiller makalesinde ele alınıyor.

Bazen XAML'de yeni olan geliştiriciler veya ButtonResourceDictionarygibi Label bir görsel öğeyi bir içine yerleştirip yerleştiremediğini merak eder. Bu mümkün olsa da, pek mantıklı değil. öğesinin ResourceDictionary amacı nesneleri paylaşmaktır. Görsel öğe paylaşılamaz. Aynı örnek tek bir sayfada iki kez görüntülenemez.

x:Static Markup Uzantısı

İsimlerinin benzerliklerine rağmen ve x:StaticStaticResource çok farklılar. StaticResource aşağıdakilerden birine erişirken x:Static kaynak sözlüğünden bir nesne döndürür:

  • genel statik alan
  • genel statik özellik
  • ortak sabit alan
  • bir numaralandırma üyesi.

İşaretleme StaticResource uzantısı, bir kaynak sözlüğü tanımlayan XAML uygulamaları tarafından desteklenirken x:Static , ön ekin ortaya çıkardığı gibi x XAML'nin iç bir parçasıdır.

Statik alanlara ve numaralandırma üyelerine açıkça nasıl x:Static başvurabileceğinizi gösteren birkaç örnek aşağıda verilmiştir:

<Label Text="Hello, XAML!"
       VerticalOptions="{x:Static LayoutOptions.Start}"
       HorizontalTextAlignment="{x:Static TextAlignment.Center}"
       TextColor="{x:Static Color.Aqua}" />

Şimdiye kadar, bu çok etkileyici değil. x:Static Ancak işaretleme uzantısı kendi kodunuzdaki statik alanlara veya özelliklere de başvurabilir. Örneğin, uygulama genelinde birden çok sayfada kullanmak isteyebileceğiniz bazı statik alanları içeren bir sınıf aşağıda AppConstants verilmişti:

using System;
using Xamarin.Forms;

namespace XamlSamples
{
    static class AppConstants
    {
        public static readonly Thickness PagePadding;

        public static readonly Font TitleFont;

        public static readonly Color BackgroundColor = Color.Aqua;

        public static readonly Color ForegroundColor = Color.Brown;

        static AppConstants()
        {
            switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    PagePadding = new Thickness(5, 20, 5, 0);
                    TitleFont = Font.SystemFontOfSize(35, FontAttributes.Bold);
                    break;

                case Device.Android:
                    PagePadding = new Thickness(5, 0, 5, 0);
                    TitleFont = Font.SystemFontOfSize(40, FontAttributes.Bold);
                    break;

                case Device.UWP:
                    PagePadding = new Thickness(5, 0, 5, 0);
                    TitleFont = Font.SystemFontOfSize(50, FontAttributes.Bold);
                    break;
            }
        }
    }
}

XAML dosyasında bu sınıfın statik alanlarına başvurmak için, XAML dosyasında bu dosyanın bulunduğu yeri belirtmek için bir yol gerekir. Bunu bir XML ad alanı bildirimiyle yaparsınız.

Standart Xamarin.Forms XAML şablonunun bir parçası olarak oluşturulan XAML dosyalarının iki XML ad alanı bildirimi içerdiğini hatırlayın: biri sınıflara erişmek Xamarin.Forms için, diğeri de XAML'ye ilişkin etiketlere ve özniteliklere başvurmak için:

xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Diğer sınıflara erişmek için ek XML ad alanı bildirimleri gerekir. Her ek XML ad alanı bildirimi yeni bir ön ek tanımlar. Paylaşılan uygulama .NET Standard kitaplığına yerel sınıflara erişmek için, AppConstantsXAML programcıları genellikle ön ekini localkullanır. Ad alanı bildirimi, C# namespace tanımında veya using yönergesinde görünen ad alanı adı olan .NET ad alanı adı olarak da bilinen CLR (Ortak Dil Çalışma Zamanı) ad alanı adını göstermelidir:

xmlns:local="clr-namespace:XamlSamples"

.NET Standart kitaplığının başvurduğunu herhangi bir derlemede .NET ad alanları için XML ad alanı bildirimleri de tanımlayabilirsiniz. Örneğin, aşağıda netstandard derlemesindeki standart .NET System ad alanı için bir sys ön ek verilmiştir. Bu başka bir derleme olduğundan, bu durumda netstandard derleme adını da belirtmeniz gerekir:

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

Anahtar sözcüğün clr-namespace ardından iki nokta üst üste ve ardından .NET ad alanı adının, ardından noktalı virgül, anahtar sözcüğü assembly, eşittir işareti ve derleme adı olduğuna dikkat edin.

Evet, iki nokta üst üste izlenir clr-namespace , ancak eşittir işareti izler assembly. Söz dizimi bu şekilde kasıtlı olarak tanımlanmıştır: ÇOĞU XML ad alanı bildirimi, her zaman iki nokta üst üste izleyen gibi httpbir URI düzeni adı başlatan bir URI'ye başvurur. clr-namespace Bu dizenin parçası, bu kuralı taklit etmek için tasarlanmıştır.

Bu ad alanı bildirimlerinin her ikisi de StaticConstantsPage örneğine eklenir. Boyutların BoxView ve Math.Eolarak ayarlandığına Math.PI ancak 100 faktöre göre ölçeklendirildiğine dikkat edin:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamlSamples"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             x:Class="XamlSamples.StaticConstantsPage"
             Title="Static Constants Page"
             Padding="{x:Static local:AppConstants.PagePadding}">

    <StackLayout>
       <Label Text="Hello, XAML!"
              TextColor="{x:Static local:AppConstants.BackgroundColor}"
              BackgroundColor="{x:Static local:AppConstants.ForegroundColor}"
              Font="{x:Static local:AppConstants.TitleFont}"
              HorizontalOptions="Center" />

      <BoxView WidthRequest="{x:Static sys:Math.PI}"
               HeightRequest="{x:Static sys:Math.E}"
               Color="{x:Static local:AppConstants.ForegroundColor}"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand"
               Scale="100" />
    </StackLayout>
</ContentPage>

Sonucun BoxView ekrana göre boyutu platforma bağlıdır:

x:Static Markup Extension kullanan denetimler

Diğer Standart İşaretlemeyi Genişletme

Çeşitli işaretleme uzantıları XAML'ye yöneliktir ve XAML dosyalarında Xamarin.Forms desteklenir. Bunlardan bazıları çok sık kullanılmaz, ancak ihtiyacınız olduğunda gereklidir:

  • Bir özelliğin varsayılan olarak değer olmayan null bir değeri varsa ancak olarak nullayarlamak istiyorsanız, bunu işaretleme uzantısına {x:Null} ayarlayın.
  • Bir özellik türündeyseType, işaretleme uzantısını {x:Type someClass}kullanarak bunu bir Type nesneye atayabilirsiniz.
  • biçimlendirme uzantısını x:Array kullanarak XAML'de diziler tanımlayabilirsiniz. Bu işaretleme uzantısı, dizideki öğelerin türünü gösteren adlı Type gerekli bir özniteliğe sahiptir.
  • İşaretlemeyi Binding genişletme, Bölüm 4'te ele alınmıştı. Veri Bağlama temelleri.
  • RelativeSource İşaretleme uzantısı Göreli Bağlamalar bölümünde ele alınıyor.

ConstraintExpression Biçimlendirme Uzantısı

İşaretleme uzantılarının özellikleri olabilir, ancak XML öznitelikleri gibi ayarlanmaz. İşaretleme uzantısında, özellik ayarları virgülle ayrılır ve küme ayraçlarının içinde tırnak işareti görünmez.

Bu, sınıfıyla birlikte kullanılan adlı ConstraintExpressionişaretleme uzantısıyla Xamarin.FormsRelativeLayout gösterilebilir. Alt görünümün konumunu veya boyutunu sabit olarak ya da üst görünüme veya başka bir adlandırılmış görünüme göre belirtebilirsiniz. söz dizimi ConstraintExpression , bir görünümün konumunu veya boyutunu başka bir Factor görünümün özelliğine ek olarak bir kez kullanarak ayarlamanıza Constantolanak tanır. Bundan daha karmaşık olan her şey kod gerektirir.

Örnek:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.RelativeLayoutPage"
             Title="RelativeLayout Page">

    <RelativeLayout>

        <!-- Upper left -->
        <BoxView Color="Red"
                 RelativeLayout.XConstraint=
                     "{ConstraintExpression Type=Constant,
                                            Constant=0}"
                 RelativeLayout.YConstraint=
                     "{ConstraintExpression Type=Constant,
                                            Constant=0}" />
        <!-- Upper right -->
        <BoxView Color="Green"
                 RelativeLayout.XConstraint=
                     "{ConstraintExpression Type=RelativeToParent,
                                            Property=Width,
                                            Factor=1,
                                            Constant=-40}"
                 RelativeLayout.YConstraint=
                     "{ConstraintExpression Type=Constant,
                                            Constant=0}" />
        <!-- Lower left -->
        <BoxView Color="Blue"
                 RelativeLayout.XConstraint=
                     "{ConstraintExpression Type=Constant,
                                            Constant=0}"
                 RelativeLayout.YConstraint=
                     "{ConstraintExpression Type=RelativeToParent,
                                            Property=Height,
                                            Factor=1,
                                            Constant=-40}" />
        <!-- Lower right -->
        <BoxView Color="Yellow"
                 RelativeLayout.XConstraint=
                     "{ConstraintExpression Type=RelativeToParent,
                                            Property=Width,
                                            Factor=1,
                                            Constant=-40}"
                 RelativeLayout.YConstraint=
                     "{ConstraintExpression Type=RelativeToParent,
                                            Property=Height,
                                            Factor=1,
                                            Constant=-40}" />

        <!-- Centered and 1/3 width and height of parent -->
        <BoxView x:Name="oneThird"
                 Color="Red"
                 RelativeLayout.XConstraint=
                     "{ConstraintExpression Type=RelativeToParent,
                                            Property=Width,
                                            Factor=0.33}"
                 RelativeLayout.YConstraint=
                     "{ConstraintExpression Type=RelativeToParent,
                                            Property=Height,
                                            Factor=0.33}"
                 RelativeLayout.WidthConstraint=
                     "{ConstraintExpression Type=RelativeToParent,
                                            Property=Width,
                                            Factor=0.33}"
                 RelativeLayout.HeightConstraint=
                     "{ConstraintExpression Type=RelativeToParent,
                                            Property=Height,
                                            Factor=0.33}"  />

        <!-- 1/3 width and height of previous -->
        <BoxView Color="Blue"
                 RelativeLayout.XConstraint=
                     "{ConstraintExpression Type=RelativeToView,
                                            ElementName=oneThird,
                                            Property=X}"
                 RelativeLayout.YConstraint=
                     "{ConstraintExpression Type=RelativeToView,
                                            ElementName=oneThird,
                                            Property=Y}"
                 RelativeLayout.WidthConstraint=
                     "{ConstraintExpression Type=RelativeToView,
                                            ElementName=oneThird,
                                            Property=Width,
                                            Factor=0.33}"
                 RelativeLayout.HeightConstraint=
                     "{ConstraintExpression Type=RelativeToView,
                                            ElementName=oneThird,
                                            Property=Height,
                                            Factor=0.33}"  />
    </RelativeLayout>
</ContentPage>

Belki de bu örnekten almanız gereken en önemli ders, işaretleme uzantısının söz dizimidir: İşaretleme uzantısının küme ayraçları içinde tırnak işareti gösterilmemelidir. İşaretleme uzantısını bir XAML dosyasına yazarken, özelliklerin değerlerini tırnak içine almak doğaldır. Cazibeye karşı koy!

Çalışan program şu şekildedir:

Kısıtlamaları Kullanan Göreli Düzen

Özet

Burada gösterilen XAML işaretleme uzantıları XAML dosyaları için önemli destek sağlar. Ancak belki de en değerli XAML işaretleme uzantısı, Bindingbu serinin sonraki bölümü olan Bölüm 4'te ele alınmıştır. Veri Bağlama temelleri.