XAML'i kullanmaya başlama

  • Makale

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

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) uygulamasında, XAML çoğunlukla bir sayfanın görsel içeriğini tanımlamak için kullanılır ve C# arka planda kod dosyasıyla birlikte çalışır. Arka planda kod dosyası, işaretleme için kod desteği sağlar. Bu iki dosya birlikte alt görünümleri ve özellik başlatmayı içeren yeni bir sınıf tanımına katkıda bulunur. XAML dosyasında sınıflara ve özelliklere XML öğeleri ve öznitelikleri ile başvurulur ve işaretleme ile kod arasındaki bağlantılar oluşturulur.

XAML dosyasının anatomisi

Yeni bir .NET MAUI uygulaması üç XAML dosyası ve ilişkili arka planda kod dosyaları içerir:

Screenshot of the structure of a new .NET MAUI app.

İlk dosya eşleştirme, bir XAML dosyası olan App.xaml ve XAML dosyasıyla ilişkilendirilmiş bir C# arka planı kod dosyası olan App.xaml.cs'dir. Hem App.xaml hem de App.xaml.cs öğesinden Applicationtüretilen adlı App bir sınıfa katkıda bulunur. İkinci dosya eşleştirme appShell.xaml ve AppShell.xaml.cs'dir ve bu da öğesinden Shelltüretilen adlı AppShell bir sınıfa katkıda bulunur. XAML dosyalarına sahip diğer sınıfların çoğu, öğesinden ContentPagetüretilen bir sınıfa katkıda bulunur ve bir sayfanın kullanıcı arabirimini tanımlar. Bu, MainPage.xaml ve MainPage.xaml.cs dosyaları için geçerlidir.

MainPage.xaml dosyası aşağıdaki yapıya sahiptir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">
    ...
</ContentPage>

İki XML ad alanı (xmlns) bildirimi, microsoft.com URI'lere başvurur. Ancak, bu URI'lerde içerik yoktur ve temelde sürüm tanımlayıcıları olarak işlev görürler.

İlk XML ad alanı bildirimi, ön eki olmayan XAML dosyasında tanımlanan etiketlerin .NET MAUI'deki sınıflara başvurduğunu gösterir. Örneğin ContentPage. İkinci ad alanı bildirimi, ön ekini xtanımlar. Bu, XAML'nin kendisine ait olan ve diğer XAML uygulamaları tarafından desteklenen birkaç öğe ve öznitelik için kullanılır. Ancak, bu öğeler ve öznitelikler URI'ye eklenen yıla bağlı olarak biraz farklıdır. .NET MAUI, 2009 XAML belirtimini destekler.

İlk etiketin sonunda, x ön ek adlı Classbir öznitelik için kullanılır. Bu x ön ekin kullanımı XAML ad alanı için neredeyse evrensel olduğundan, gibi Class XAML öznitelikleri neredeyse her zaman olarak x:Classadlandırılır. x:Class özniteliği tam bir .NET sınıf adı belirtir: MainPage ad alanında MyMauiApp sınıfı. Bu, bu XAML dosyasının ad alanında (özniteliğin MyMauiApp göründüğü etiket) türetilen ContentPage adlı MainPage yeni bir sınıf tanımladığı x:Class anlamına gelir.

x:Class özniteliği yalnızca türetilmiş bir C# sınıfı tanımlamak için bir XAML dosyasının kök öğesinde görünebilir. Bu, XAML dosyasında tanımlanan tek yeni sınıftır. Bir XAML dosyasında görünen diğer her şey bunun yerine mevcut sınıflardan örneği oluşturulur ve başlatılır.

MainPage.xaml.cs dosyası şuna benzer:

namespace MyMauiApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

sınıfı MainPage öğesinden ContentPagetüretilir ve kısmi bir sınıf tanımıdır.

Visual Studio projeyi oluşturduğunuzda, kaynak oluşturucudan çağrılan MainPage yöntemin InitializeComponent tanımını içeren yeni bir C# kaynağı oluşturur ve bunu derleme nesnesine ekler.

Çalışma zamanında, sınıfındaki MauiProgram kod uygulamayı bootstrap eder App ve örneği oluşturan AppShellsınıf oluşturucuyu yürütür. AppShell sınıfı, görüntülenecek uygulamanın ilk sayfası olan MainPageörneğini oluşturur. MainPage Oluşturucu, XAML dosyasında tanımlanan tüm nesneleri başlatan, hepsini üst-alt ilişkilerde birbirine bağlayan, kodda tanımlanan olay işleyicilerini XAML dosyasında ayarlanan olaylara ekleyen ve nesnelerin sonuç ağacını sayfanın içeriği olarak ayarlayan öğesini çağırırInitializeComponent.

Dekont

sınıfı, AppShell görüntülenecek uygulamanın ilk sayfasını ayarlamak için .NET MAUI Shell kullanır. Ancak Shell, XAML'ye bu giriş kapsamının dışındadır. Daha fazla bilgi için bkz . .NET MAUI Shell.

Sayfa içeriğini ayarlama

, ContentPage bir görünüm veya alt görünümlere sahip bir düzen olabilecek tek bir alt öğe içermelidir. öğesinin ContentPage alt öğesi özelliğin değeri ContentPage.Content olarak otomatik olarak ayarlanır.

Aşağıdaki örnekte içeren bir ContentPage gösterilmektedir Label:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.HelloXamlPage"
             Title="Hello XAML Page">
    <Label Text="Hello, XAML!"
           VerticalOptions="Center"
           HorizontalTextAlignment="Center"
           Rotation="-15"
           FontSize="18"
           FontAttributes="Bold"
           TextColor="Blue" />
</ContentPage>

Yukarıdaki örnekten sınıflar, özellikler ve XML arasındaki ilişki belirgin olmalıdır. XAML dosyasında XML öğesi olarak bir .NET MAUI sınıfı (veya LabelgibiContentPage) görüntülenir. Bu sınıfın özellikleri ( ve ContentPage yedi özellikleri Label dahil) Title genellikle XML öznitelikleri olarak görünür.

Bu özelliklerin değerlerini ayarlamak için birçok kısayol vardır. Bazı özellikler temel veri türleridir. Örneğin, Title ve Text özellikleri türündedir stringve Rotation türündedir double. HorizontalTextAlignment özelliği, sabit listesi olan türündedirTextAlignment. Herhangi bir numaralandırma türünün özelliği için sağlamanız gereken tek şey üye adıdır.

Ancak daha karmaşık türlerin özellikleri için XAML ayrıştırma için dönüştürücüler kullanılır. Bunlar , .NET MAUI'deki sınıfından TypeConvertertüretilen sınıflardır. Yukarıdaki örnekte, dize değerlerini doğru türe dönüştürmek için birkaç .NET MAUI dönüştürücüsü otomatik olarak uygulanır:

  • LayoutOptionsConverter özelliğini seçin VerticalOptions . Bu dönüştürücü, yapının genel statik alanlarının LayoutOptions adlarını türündeki LayoutOptionsdeğerlere dönüştürür.
  • ColorTypeConverter özelliğini seçin TextColor . Bu dönüştürücü, sınıfın genel statik alanlarının Colors adlarını veya onaltılık RGB değerlerini alfa kanalıyla veya alfa kanalı olmadan dönüştürür.

Sayfa gezintisi

Bir .NET MAUI uygulaması çalıştırdığınızda MainPage , genellikle görüntülenir. Farklı bir sayfa görmek için bunu AppShell.xaml dosyasındaki yeni başlangıç sayfası olarak ayarlayabilir veya uygulamasından MainPageyeni sayfaya gidebilirsiniz.

Gezintiyi uygulamak için MainPage.xaml.cs oluşturucusunda basit Button bir oluşturabilir ve olay işleyicisini kullanarak adresine HelloXamlPagegidebilirsiniz:

public MainPage()
{
    InitializeComponent();

    Button button = new Button
    {
        Text = "Navigate!",
        HorizontalOptions = LayoutOptions.Center,
        VerticalOptions = LayoutOptions.Center
    };

    button.Clicked += async (sender, args) =>
    {
        await Navigation.PushAsync(new HelloXamlPage());
    };

    Content = button;
}

Bu uygulamanın yeni sürümünü derleyip dağıttığınızda ekranda bir düğme görüntülenir. Tuşuna bastığınızda adresine HelloXamlPagegider:

Screenshot of rotated Label text.

Her platformda görüntülenen gezinti çubuğunu kullanarak sayfasına geri MainPage dönebilirsiniz.

Dekont

Bu gezinti modelinin alternatifi .NET MAUI Kabuğu kullanmaktır. Daha fazla bilgi için bkz . .NET MAUI Shell'e genel bakış.

XAML ve kod etkileşimleri

Çoğu ContentPage türevin alt öğesi veya Gridgibi StackLayout bir düzendir ve düzen birden çok alt öğe içerebilir. XAML'de bu üst-alt ilişkiler normal XML hiyerarşisi ile oluşturulur:

<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">
    <StackLayout>
        <Slider VerticalOptions="Center" />
        <Label Text="A simple Label"
               FontSize="18"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <Button Text="Click Me!"
                HorizontalOptions="Center"
                VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

Bu XAML dosyası sağlam bir şekilde tamamlanır ve aşağıdaki kullanıcı arabirimini oluşturur:

Screenshot of multiple controls on a page.

Ancak ve Buttonile Slider etkileşim kurabilirsiniz ancak kullanıcı arabirimi güncelleştirilmez. geçerli Slider değeri görüntülemesine neden Label olmalı ve Button bir şey yapmalıdır.

kullanarak Label bir Slider değerin görüntülenmesi, veri bağlama ile tamamen XAML'de elde edilebilir. Ancak, önce kod çözümünü görmek yararlıdır. Yine de tıklamayı Button işlemek için kesinlikle kod gerekir. Bu, için XamlPlusCodePage arka planda kod dosyasının ve olayının ClickedValueChangedSlider işleyicilerini içermesi Buttongerektiği anlamına gelir:

namespace XamlSamples
{
    public partial class XamlPlusCodePage
    {
        public XamlPlusCodePage()
        {
            InitializeComponent();
        }

        void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
        {
            valueLabel.Text = args.NewValue.ToString("F3");
        }

        async void OnButtonClicked(object sender, EventArgs args)
        {
            Button button = (Button)sender;
            await DisplayAlert("Clicked!", "The button labeled '" + button.Text + "' has been clicked", "OK");
        }
    }
}

XAML dosyasına geri döndüğünüzde ve Button etiketlerinin Slider şu işleyicilere başvuran ve Clicked olayları için ValueChanged öznitelikleri içermesi gerekir:

<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">
    <StackLayout>
        <Slider VerticalOptions="Center"
                ValueChanged="OnSliderValueChanged" />
        <Label x:Name="valueLabel"
               Text="A simple Label"
               FontSize="18"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <Button Text="Click Me!"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Clicked="OnButtonClicked" />
    </StackLayout>
</ContentPage>

Bir olaya işleyici atamanın, bir özelliğe değer atamayla aynı söz dizimine sahip olduğuna dikkat edin. Buna ek olarak, öğesinin ValueChanged olay işleyicisinin Slider geçerli değeri görüntülemek için öğesini kullanması Label için işleyicinin koddan bu nesneye başvurması gerekir. Bu nedenle, Label özniteliğiyle x:Name belirtilen bir ad gerekir. x özniteliğinin x:Name ön eki, bu özniteliğin XAML'ye ait olduğunu gösterir. Özniteliğine x:Name atadığınız ad, C# değişken adları ile aynı kurallara sahiptir. Örneğin, bir harf veya alt çizgiyle başlamalı ve eklenmiş boşluk içermemelidir.

Olay işleyicisi ValueChanged artık öğesini, olay bağımsız değişkenlerinden kullanılabilen yeni Slider değeri görüntüleyecek şekilde ayarlayabilirLabel:

void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
    valueLabel.Text = args.NewValue.ToString("F3");
}

Alternatif olarak, işleyici Slider bu olayı oluşturan nesneyi bağımsız değişkenden sender alabilir ve özelliğinden alabilir Value :

void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
    valueLabel.Text = ((Slider)sender).Value.ToString("F3");
}

Sonuç, herhangi bir işlemenin Slider değerinin içinde Labelgörüntülenmesine neden olmasıdır:

Screenshot of multiple controls on a page, with Slider value displayed.

Yukarıdaki örnekte, düğmeyle Button bir uyarı görüntüleyerek bir Clicked olaya verilen yanıtın Text simülasyonunu oluşturur. Bu nedenle, olay işleyicisi bağımsız değişkenini sender öğesine Button yayınlayabilir ve ardından özelliklerine erişebilir:

async void OnButtonClicked(object sender, EventArgs args)
{
    Button button = (Button)sender;
    await DisplayAlert("Clicked!", "The button labeled '" + button.Text + "' has been clicked", "OK");
}

OnButtonClicked yöntemi zaman uyumsuz olduğundan olarak asyncDisplayAlert tanımlanır ve yöntemi tamamlandığında döndüren işleciyle await önceden oluşturulmuş olması gerekir. Bu yöntem olayı bağımsız değişkenden sender tetiklediğindenButton, aynı işleyici birden çok düğme için kullanılabilir.

Sonraki adımlar

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.

Temel XAML söz dizimi