Začínáme s XAML

Článek
07/01/2022
7 min ke čtení

V aplikaci .NET Multi-platform App UI (.NET MAUI) se XAML většinou používá k definování vizuálního obsahu stránky a spolupracuje se souborem kódu jazyka C#. Soubor kódu za kódem poskytuje podporu kódu pro revize. 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 revizemi a kódem.

Anatomie souboru XAML

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

Snímek obrazovky se strukturou nové aplikace .NET MAUI

Prvním párováním souborů je Soubor 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ívá ke třídě s názvem AppShell odvozeným z Shell. Většina ostatních tříd se soubory XAML přispívá ke třídě, která je odvozena od ContentPage, a definovat 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ů XML odkazujíxmlns na identifikátory URI na 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 elementů 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 x se předpona 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, aby se definovala odvozená třída 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 sestaví projekt, zdrojový generátor 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ých podřízených, 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

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, že ContentPage obsahuje 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 výše uvedeného příkladu by měl být zřejmé vztah mezi třídami, vlastnostmi a XML. Třída .NET MAUI (například ContentPage nebo Label) se zobrazí v souboru XAML jako element XML. Vlastnosti této třídy , včetně Title on ContentPage a sedm vlastností Label obvykle se zobrazují jako atributy XML.

Existuje mnoho zástupců pro nastavení hodnot těchto vlastností. Některé vlastnosti jsou základní datové typy. Vlastnosti jsou například TitleText 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 potřebujete 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 rozhraní .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 Colors polí struktury nebo šestnáctkových hodnot RGB s alfa kanálem nebo bez něj.

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:

Snímek obrazovky s otočenou textem popisku

Můžete přejít zpět na MainPage navigační panel, 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 a StackLayout nebo a Gridrozložení může obsahovat více podřízených položek. V jazyce XAML jsou tyto relace nadřazeného a podřízeného objektu vytvořeny 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 dokončený a vytvoří následující uživatelské rozhraní:

Snímek obrazovky s více ovládacími prvky na stránce

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

Slider Zobrazení hodnoty pomocí Label kódu XAML s datovou vazbou lze zcela dosáhnout. Je ale užitečné nejprve vidět řešení kódu. I tak zpracování Button kliknutí rozhodně vyžaduje kód. To znamená, že soubor kódu za kódem musí XamlPlusCodePage obsahovat obslužné rutiny pro ValueChanged událost Slider události a Clicked událost :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átky 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 vlastnosti. Kromě toho obslužná rutina ValueChanged události, která Slider má použít Label k zobrazení aktuální hodnoty, musí obslužná rutina odkazovat na tento objekt z kódu. Label Proto potřebuje název, který je zadaný atributemx:Name. Předpona x atributu x:Name označuje, že tento atribut je vnitřní pro XAML. Název, který přiřadíte 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 nesmí 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");
}

Obslužná rutina může také získat Slider objekt, který generuje tuto událost z argumentu sender a získat Value vlastnost z tohoto:

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

Výsledkem je, že jakákoli manipulace Slider s příčinami, že se její hodnota zobrazí v :Label

Snímek obrazovky s více ovládacími prvky na stránce se zobrazenou hodnotou posuvníku

V příkladu výše Button 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 jako async proto, že DisplayAlert metoda je asynchronní a měla by být předcházet await operátoru, který vrací po dokončení metody. Vzhledem k tomu, že tato metoda získá Button aktivaci 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 na podřízenou třídu. Tyto dvě potřeby vyžadují základní funkce syntaxe XAML prvků vlastností a připojených vlastností.

Základní syntaxe XAML

Začínáme s XAML

Anatomie souboru XAML

Nastavení obsahu stránky

Navigace po stránkách

Interakce XAML a kódu

Další kroky