Začínáme s XAML

Procházení ukázky

V aplikaci .NET Multi-Platform App UI (.NET MAUI) se XAML používá hlavně k definování vizuálního obsahu stránky a spolupracuje se souborem kódu jazyka C#. Soubor s kódem poskytuje podporu kódu pro značky. Tyto dva soubory společně přispívají k nové definici třídy, která zahrnuje podřízená zobrazení a inicializaci vlastností. V souboru XAML se na třídy a vlastnosti odkazují elementy a atributy XML a vytvoří se propojení mezi kódem a kódem.

Anatomie souboru XAML

Nová aplikace .NET MAUI obsahuje tři soubory XAML a jejich přidružené soubory za kódem:

Prvním párováním souborů je App.xaml, soubor XAML a App.xaml.cs, soubor kódu jazyka C# přidružený k souboru XAML. App.xaml i App.xaml.cs přispívají do třídy, App která je odvozena od Application. Druhým párováním souborů je AppShell.xaml a AppShell.xaml.cs, které přispívají ke třídě pojmenované AppShell od Shell. Většina ostatních tříd se soubory XAML přispívá do třídy, která je odvozena od ContentPagea definuje uživatelské rozhraní stránky. To platí pro soubory MainPage.xaml a MainPage.xaml.cs .

Soubor MainPage.xaml má následující strukturu:

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

Dvě deklarace oboru názvůxmlns XML odkazují na identifikátory URI v microsoft.com. Na těchto identifikátorech URI ale neexistuje žádný obsah a v podstatě fungují jako identifikátory verzí.

První deklarace oboru názvů XML znamená, že značky definované v souboru XAML bez předpony odkazují na třídy v .NET MAUI, například ContentPage. Druhá deklarace oboru názvů definuje předponu .x Používá se pro několik prvků a atributů, které jsou vnitřní pro samotný XAML a které jsou podporovány jinými implementacemi XAML. Tyto prvky a atributy se ale mírně liší v závislosti na roce vloženém do identifikátoru URI. .NET MAUI podporuje specifikaci XAML 2009.

Na konci první značky se předpona x používá pro atribut s názvem Class. Vzhledem k tomu, že použití této x předpony je prakticky univerzální pro obor názvů XAML, atributy XAML, jako Class jsou téměř vždy označovány jako x:Class. Atribut x:Class určuje plně kvalifikovaný název třídy .NET: MainPage třídu v MyMauiApp oboru názvů. To znamená, že tento soubor XAML definuje novou třídu pojmenovanou MainPage v MyMauiApp oboru názvů, která je odvozena od ContentPage (značka, ve které x:Class se atribut zobrazí).

Atribut x:Class se může objevit pouze v kořenovém prvku souboru XAML pro definování odvozené třídy jazyka C#. Toto je jediná nová třída definovaná v souboru XAML. Všechno ostatní, co se zobrazí v souboru XAML, se místo toho jednoduše vytvoří instance z existujících tříd a inicializuje se.

Soubor MainPage.xaml.cs vypadá nějak takto:

namespace MyMauiApp;

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

Třída MainPage je odvozena od ContentPagea je částečnou definicí třídy .

Když Visual Studio projekt sestaví, generátor zdroje vygeneruje nový zdroj jazyka C#, který obsahuje definici InitializeComponent metody, která je volána z konstruktoru MainPage , a přidá ho do objektu kompilace.

Za běhu kód ve MauiProgram třídě bootstraps aplikace a spustí App konstruktor třídy, který vytvoří instanci AppShell. Třída AppShell vytvoří instanci první stránky aplikace, která se má zobrazit, což je MainPage. Konstruktor MainPage volá InitializeComponent, který inicializuje všechny objekty definované v souboru XAML, spojuje je všechny v relacích nadřazený-podřízený, připojí obslužné rutiny událostí definované v kódu k událostem nastaveným v souboru XAML a nastaví výsledný strom objektů jako obsah stránky.

Poznámka:

Třída AppShell používá prostředí .NET MAUI Shell k nastavení první stránky aplikace, která se má zobrazit. Shell je ale nad rámec tohoto úvodu do XAML. Další informace najdete v tématu .NET MAUI Shell.

Nastavení obsahu stránky

Položka A ContentPage by měla obsahovat jedno podřízené, které může být zobrazení nebo rozložení s podřízenými zobrazeními. Podřízený objekt je ContentPage automaticky nastaven jako hodnota ContentPage.Content vlastnosti.

Následující příklad ukazuje ContentPage obsahující :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>

Z příkladu nad vztahem mezi třídami, vlastnostmi a XML by mělo být zřejmé. Třída .NET MAUI (například ContentPage nebo Label) se v souboru XAML zobrazí jako element XML. Vlastnosti této třídy, včetně Title vlastností ContentPage a sedmi vlastností Label , se obvykle zobrazují jako atributy XML.

Existuje mnoho zástupců pro nastavení hodnot těchto vlastností. Některé vlastnosti jsou základní datové typy. Například vlastnosti TitleText jsou typu stringa Rotation jsou typu double. Vlastnost HorizontalTextAlignment je typu TextAlignment, což je výčet. Pro vlastnost libovolného typu výčtu je vše, co je třeba zadat, je název člena.

Pro vlastnosti složitějších typů se však převaděče používají k analýze XAML. Jedná se o třídy v .NET MAUI, které jsou odvozeny od TypeConverter. V příkladu výše se pro převod řetězcových hodnot na správný typ automaticky použije několik převaděčů .NET MAUI:

• LayoutOptionsConverterVerticalOptions pro vlastnost. Tento převaděč převede názvy veřejných statických LayoutOptions polí struktury na hodnoty typu LayoutOptions.
• ColorTypeConverterTextColor pro vlastnost. Tento převaděč převede názvy veřejných statických polí Colors třídy nebo šestnáctkových hodnot RGB s alfa kanálem nebo bez něj.

Stránková navigace

Když spustíte aplikaci .NET MAUI, obvykle se MainPage zobrazí. Pokud chcete zobrazit jinou stránku, můžete ji nastavit jako novou spouštěcí stránku v souboru AppShell.xaml nebo přejít na novou stránku z MainPage.

Pokud chcete implementovat navigaci, můžete v konstruktoru MainPage.xaml.cs vytvořit jednoduchou Button obslužnou rutinu události a přejít na HelloXamlPage:

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

Když zkompilujete a nasadíte novou verzi této aplikace, zobrazí se na obrazovce tlačítko. Stisknutím klávesy přejdete na HelloXamlPage:

Můžete přejít zpět pomocí MainPage navigačního panelu, který se zobrazí na jednotlivých platformách.

Poznámka:

Alternativou k tomuto navigačnímu modelu je použití prostředí .NET MAUI Shell. Další informace najdete v tématu .NET MAUI Shell – přehled.

Interakce XAML a kódu

Podřízeným objektem většiny ContentPage derivátů je rozložení, například StackLayoutGrida nebo a rozložení může obsahovat více podřízených položek. V jazyce XAML jsou tyto relace nadřazené a podřízené se navazují s normální hierarchií XML:

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

Tento soubor XAML je syntakticky úplný a vytvoří následující uživatelské rozhraní:

I když ale můžete pracovat s rozhraním Slider a Button, uživatelské rozhraní se neaktualizuje. Měla Slider by způsobit Label zobrazení aktuální hodnoty a Button mělo by to udělat něco.

Zobrazení Slider hodnoty pomocí datové Label vazby lze v XAML zcela dosáhnout. Je ale užitečné vidět řešení kódu jako první. I tak zpracování Button kliknutí rozhodně vyžaduje kód. To znamená, že soubor kódu pro XamlPlusCodePage musí obsahovat obslužné rutiny pro ValueChanged událost Slider události a Clicked události Button:

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

Zpět v souboru Slider XAML musí značky Button obsahovat atributy pro ValueChanged události a Clicked události, které odkazují na tyto obslužné rutiny:

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

Všimněte si, že přiřazení obslužné rutiny události má stejnou syntaxi jako přiřazení hodnoty k vlastnosti. Kromě toho obslužná ValueChanged rutina Slider události, která má použít Label k zobrazení aktuální hodnoty, obslužná rutina musí odkazovat na tento objekt z kódu. Label Proto potřebuje název, který je určen atributemx:Name. x Předpona atributu x:Name označuje, že tento atribut je vnitřní pro XAML. Název, který přiřadíte k atributu x:Name , má stejná pravidla jako názvy proměnných jazyka C#. Musí například začínat písmenem nebo podtržítkem a obsahovat žádné vložené mezery.

Obslužná rutina ValueChanged události teď může nastavit Label zobrazení nové Slider hodnoty, která je k dispozici z argumentů události:

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

Případně může obslužná rutina získat Slider objekt, který generuje tuto událost z argumentu sender , a získat Value vlastnost z této:

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

Výsledkem je, že jakákoli manipulace s Slider jeho hodnotou se zobrazí v Label:

V příkladu Button výše simuluje odpověď na Clicked událost zobrazením výstrahy s Text tlačítkem. Obslužná rutina události proto může přetypovat sender argument na Button a pak přistupovat k jeho vlastnostem:

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

Metoda OnButtonClicked je definována tak, async že DisplayAlert metoda je asynchronní a měla by být před operátorem await , který vrátí po dokončení metody. Vzhledem k tomu, že tato metoda získá aktivaci Button události z argumentu sender , lze stejnou obslužnou rutinu použít pro více tlačítek.

Další kroky

XAML je většinou navržený pro vytváření instancí a inicializaci objektů. Často však musí být vlastnosti nastaveny na složité objekty, které nelze snadno reprezentovat jako řetězce XML, a někdy vlastnosti definované jednou třídou musí být nastaveny v podřízené třídě. Tyto dva požadavky vyžadují základní funkce syntaxe XAML elementů vlastností a připojených vlastností.

Základní syntaxe XAML