Share via


Temel XAML söz dizimi

Browse sample. Örneğe göz atın

XAML çoğunlukla nesneleri örneklemek ve başlatmak için tasarlanmıştır. Ancak genellikle, özellikler kolayca XML dizeleri olarak temsil edilemeyen karmaşık nesnelere ayarlanmalıdır ve bazen bir sınıf tarafından tanımlanan özellikler bir alt sınıfta ayarlanmalıdır. Bu iki gereksinim, özellik öğelerinin ve ekli özelliklerin temel XAML söz dizimi özelliklerini gerektirir.

Özellik öğeleri

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) XAML'de sınıfların özellikleri normalde XML öznitelikleri olarak ayarlanır:

<Label Text="Hello, XAML!"
       VerticalOptions="Center"
       FontAttributes="Bold"
       FontSize="18"
       TextColor="Aqua" />

Ancak, XAML'de özellik ayarlamanın alternatif bir yolu vardır:

<Label Text="Hello, XAML!"
       VerticalOptions="Center"
       FontAttributes="Bold"
       FontSize="18">
    <Label.TextColor>
        Aqua
    </Label.TextColor>
</Label>

Özelliğini belirten TextColor bu iki örnek işlevsel olarak eşdeğerdir ve bazı temel terminolojilerin tanıtılması için olanak sağlar:

  • Label bir nesne öğesidir. XML öğesi olarak ifade edilen bir .NET MAUI nesnesidir.
  • Text, VerticalOptionsve FontSize özellik öznitelikleridir. FontAttributes XML öznitelikleri olarak ifade edilen .NET MAUI özellikleridir.
  • İkinci örnekte, TextColor bir özellik öğesi haline gelmiştir. XML öğesi olarak ifade edilen bir .NET MAUI özelliğidir.

Dekont

Özellik öğesinde, özelliğin değeri her zaman özellik öğesi başlangıç ve bitiş etiketleri arasındaki içerik olarak tanımlanır.

Özellik öğesi söz dizimi, bir nesnenin birden fazla özelliğinde de kullanılabilir:

<Label Text="Hello, XAML!"
       VerticalOptions="Center">
    <Label.FontAttributes>
        Bold
    </Label.FontAttributes>
    <Label.FontSize>
        Large
    </Label.FontSize>
    <Label.TextColor>
        Aqua
    </Label.TextColor>
</Label>

Özellik öğesi söz dizimi gereksiz gibi görünse de, bir özelliğin değeri basit bir dize olarak ifade edilemeyecek kadar karmaşık olduğunda önemlidir. Property-element etiketleri içinde başka bir nesnenin örneğini oluşturabilir ve özelliklerini ayarlayabilirsiniz. Örneğin, düzenin Grid sırasıyla ve ColumnDefinitionCollectionColumnDefinitionstüründe RowDefinitionCollection ve adlı RowDefinitions özellikleri vardır. Bu türler ve ColumnDefinition nesnelerinin RowDefinition koleksiyonlarıdır ve bunları ayarlamak için genellikle özellik öğesi söz dizimini kullanırsınız:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.GridDemoPage"
             Title="Grid Demo Page">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        ...
    </Grid>
</ContentPage>

Ekli özellikler

Önceki örnekte, ve ColumnDefinitions koleksiyonlarının satır ve sütunları tanımlamak için RowDefinitions özellik öğelerini gerektirdiğini gördünüzGrid. Bu, her alt Grid öğesinin bulunduğu satır ve sütunu belirtmek için bir teknik olması gerektiğini gösterir.

Her alt öğesinin Grid etiketinde, varsayılan değerleri 0 olan ve Grid.Column özniteliklerini kullanarak Grid.Row bu alt öğeye ait satır ve sütunu belirtin. Ayrıca, bir alt dosyanın varsayılan değerleri 1 olan ve Grid.ColumnSpan öznitelikleriyle birden fazla satıra veya sütuna Grid.RowSpan yayılıp yayılmayabileceğini de belirtebilirsiniz.

Aşağıdaki örnek, alt öğeleri içine Gridyerleştirmeyi gösterir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.GridDemoPage"
             Title="Grid Demo Page">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>

        <Label Text="Autosized cell"
               TextColor="White"
               BackgroundColor="Blue" />
        <BoxView Color="Silver"
                 Grid.Column="1" />
        <BoxView Color="Teal"
                 Grid.Row="1" />
        <Label Text="Leftover space"
               Grid.Row="1" Grid.Column="1"
               TextColor="Purple"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
        <Label Text="Span two rows (or more if you want)"
               Grid.Column="2" Grid.RowSpan="2"
               TextColor="Yellow"
               BackgroundColor="Blue"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
        <Label Text="Span two columns"
               Grid.Row="2" Grid.ColumnSpan="2"
               TextColor="Blue"
               BackgroundColor="Yellow"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
        <Label Text="Fixed 100x100"
               Grid.Row="2" Grid.Column="2"
               TextColor="Aqua"
               BackgroundColor="Red"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />

    </Grid>
</ContentPage>

Bu XAML aşağıdaki düzene neden olur:

.NET MAUI Grid layout.

, , ve öznitelikleri sınıfın Grid özellikleri gibi görünür, ancak bu sınıf , , ColumnRowSpanveya ColumnSpanadlı Rowbir şey tanımlamaz.Grid.ColumnSpanGrid.RowSpanGrid.ColumnGrid.Row Bunun yerine sınıfı, Grid ekli özellikler olarak bilinen özel bağlanabilir özellik türleri olan , ColumnProperty, RowSpanPropertyve ColumnSpanPropertyadlı RowPropertydört bağlanabilir özellik tanımlar. Sınıfı tarafından Grid tanımlanır, ancak öğesinin alt öğelerine Gridayarlanır.

Dekont

Bu ekli özellikleri kodda kullanmak istediğinizde, Grid sınıfı , , SetRow, GetColumn, SetColumn, GetRowSpan, , SetRowSpanGetColumnSpanve SetColumnSpanadlı GetRowstatik yöntemler sağlar.

Eklenen özellikler, XAML'de hem sınıfı hem de noktayla ayrılmış özellik adını içeren öznitelikler olarak tanınabilir. Bunlar, bir sınıf tarafından tanımlandığından (bu örnekte, Grid) ekli özellikler olarak adlandırılır, ancak diğer nesnelere (bu örnekte öğesinin Gridalt öğeleri) eklenir. düzen sırasında, Grid her bir alt öğeyi nereye yerleştireceklerini bilmek için bu ekli özelliklerin değerlerini sorgulayabilir.

İçerik özellikleri

Önceki örnekte, Grid nesnesi özelliğine ContentContentPageayarlanmıştı. Ancak, özelliğine Content XAML'de başvurulmadı, ancak şu olabilir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.XamlPlusCodePage"
             Title="XAML + Code Page">
    <ContentPage.Content>
        <Grid>
            ...
        </Grid>
    </ContentPage.Content>
</ContentPage>

Content.NET MAUI XAML'de kullanılmak üzere tanımlanan öğelerin sınıfında öznitelik olarak ContentProperty belirtilen bir özelliğe sahip olması için özelliği XAML'de gerekli değildir:

[ContentProperty("Content")]
public class ContentPage : TemplatedPage
{
    ...
}

Sınıfı olarak ContentProperty belirtilen herhangi bir özellik, özelliği için property-element etiketlerinin gerekli olmadığı anlamına gelir. Bu nedenle, yukarıdaki örnek, başlangıç ve bitiş ContentPage etiketleri arasında görünen tüm XAML içeriğinin Content özelliğine atandığını belirtir.

Birçok sınıfın öznitelik tanımları da vardır ContentProperty . Örneğin, içerik özelliği Label şeklindedir Text.

Platform farklılıkları

.NET MAUI uygulamaları, platform başına kullanıcı arabirimi görünümünü özelleştirebilir. Bu, ve On sınıfları kullanılarak OnPlatform XAML'de elde edilebilir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

OnPlatform genel bir sınıftır ve bu nedenle, bu durumda Thickness, özelliğin türü olan genel tür bağımsız değişkenini Padding belirtmeniz gerekir. Bu, XAML özniteliğiyle x:TypeArguments elde edilir. sınıfı, OnPlatform tüm platformlara uygulanacak bir değere ayarlanabilen bir özellik tanımlar Default :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS" Value="0,20,0,0" />
            <On Platform="Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

Bu örnekte, Padding özelliği iOS ve Android'de farklı değerlere ayarlanır ve diğer platformlar varsayılan değere ayarlanır.

sınıfıOnPlatform, nesnelerden oluşan On bir PlatformsIList özelliği de tanımlar. Her On nesne, belirli bir platformun PlatformThickness değerini tanımlamak için ve Value özelliğini ayarlayabilir. Buna ek olarak, Platform özelliği On türündedir IList<string>, bu nedenle değerler aynıysa birden çok platform ekleyebilirsiniz:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" Default="20">
            <On Platform="iOS, Android" Value="10,20,20,10" />
        </OnPlatform>
    </ContentPage.Padding>
    ...
</ContentPage>

Bu, XAML'de platforma bağımlı Padding bir özellik ayarlamanın standart yoludur.

Dekont

Bir nesnenin Value özelliği tek bir On dizeyle temsil edilemiyorsa, bunun için özellik öğeleri tanımlayabilirsiniz.

Daha fazla bilgi için bkz . Platforma göre kullanıcı arabirimi görünümünü özelleştirme.

Sonraki adımlar

.NET MAUI XAML işaretleme uzantıları, özelliklerin diğer kaynaklardan dolaylı olarak başvuruda bulunılan nesnelere veya değerlere ayarlanmasını sağlar. XAML işaretleme uzantıları özellikle nesneleri paylaşmak ve uygulama genelinde kullanılan sabitlere başvurmak için önemlidir.