Přidání vizuálních ovládacích prvků do aplikace .NET MAUI

  • 5 min

Teď, když jste k vytvoření aplikace použili šablonu .NET MAUI, je dalším krokem přidání uživatelského rozhraní a implementace počáteční logiky uživatelského rozhraní.

V této lekci se dozvíte více o stavebních blocích aplikace a navigačních struktur .NET MAUI (Multi-platform Application User Interface).

Co je v projektu .NET MAUI?

Pro rekapitulace projekt .NET MAUI zpočátku obsahuje:

  • Soubor MauiProgram.cs obsahující kód pro vytvoření a konfiguraci objektu aplikace.

  • Soubory App.xaml a App.xaml.cs , které poskytují prostředky uživatelského rozhraní a vytvoří počáteční okno aplikace.

  • Soubory AppShell.xaml a AppShell.xaml.cs , které určují počáteční stránku aplikace a zpracovávají registraci stránek pro směrování navigace.

  • Soubory MainPage.xaml a MainPage.xaml.cs , které definují logiku rozložení a uživatelského rozhraní stránky zobrazené ve výchozím nastavení v počátečním okně.

Podle potřeby můžete do aplikace přidat další stránky a můžete vytvořit další třídy pro implementaci obchodní logiky, kterou aplikace vyžaduje.

Projekt .NET MAUI obsahuje také výchozí sadu prostředků aplikace, jako jsou obrázky, ikony a písma a výchozí kód bootstrap pro každou platformu.

Třída aplikace

Třída App představuje aplikaci .NET MAUI jako celek. Dědí výchozí sadu chování z Microsoft.Maui.Controls.Application. Vzpomeňte si z předchozí lekce, že se jedná o App třídu, kterou vytvoří instance a načtení kódu bootstrap pro každou platformu. Konstruktor App třídy zase vytvoří instanci AppShell třídy a přiřadí ji k MainPage vlastnosti. Je to tento kód, který řídí první obrazovku, kterou uživatel uvidí na základě definic v souboru AppShell.

Třída aplikace obsahuje také:

  • Metody zpracování událostí životního cyklu, včetně toho, kdy se aplikace odesílá na pozadí (tj. když přestane být aplikací na popředí).

  • Metody pro vytvoření nové Windows aplikace Aplikace .NET MAUI má ve výchozím nastavení jedno okno, ale můžete vytvořit a spustit více oken, což je užitečné v desktopových a tabletových aplikacích.

Prostředí

Prostředí .NET Multi-Platform App UI (.NET MAUI) Snižuje složitost vývoje aplikací tím, že poskytuje základní funkce, které většina aplikací vyžaduje, včetně:

  • Jedno místo, kde můžete popsat vizuální hierarchii aplikace.
  • Běžné uživatelské prostředí navigace.
  • Navigační schéma založené na identifikátorech URI, které umožňuje navigaci na libovolnou stránku v aplikaci.
  • Integrovaná obslužná rutina vyhledávání.

V aplikaci .NET MAUI Shell je vizuální hierarchie aplikace popsaná ve třídě, která podtřídí třídu Shell. Tato třída se může skládat ze tří hlavních hierarchických objektů:

  • FlyoutItem nebo TabBar. A FlyoutItem představuje jednu nebo více položek v informačním rámečku a mělo by se použít, když navigační vzor aplikace vyžaduje kontext. A TabBar představuje dolní panel karet a měl by se použít, když navigační vzor aplikace začíná dolními kartami a nevyžaduje kontext.
  • Tab, který představuje seskupený obsah, navigace po dolních kartách.
  • ShellContent, který představuje ContentPage objekty pro každou kartu.

Tyto objekty nepředstavují žádné uživatelské rozhraní, ale spíše uspořádání hierarchie vizuálů aplikace. Shell vezme tyto objekty a vytvoří navigační uživatelské rozhraní pro obsah.

Stránky

Stránky jsou kořenem hierarchie uživatelského rozhraní v rozhraní .NET MAUI uvnitř Shellrozhraní . Zatím řešení, které jste viděli, zahrnuje třídu nazvanou MainPage. Tato třída je odvozena od ContentPage, což je nejjednodušší a nejběžnější typ stránky. Stránka obsahu jednoduše zobrazí její obsah. Rozhraní .NET MAUI má také několik dalších předdefinovaných typů stránek, mezi které patří:

  • TabbedPage: Kořenová stránka použitá pro navigaci na kartách. Stránka s kartami obsahuje podřízené objekty stránky; jednu pro každou kartu.

  • FlyoutPage: Umožňuje implementovat prezentaci ve stylu předlohy a podrobností. Kontextová stránka obsahuje seznam položek. Když vyberete položku, zobrazí se zobrazení s podrobnostmi o této položce.

K dispozici jsou i jiné typy stránek, které se většinou používají k povolení různých vzorů navigace v aplikacích s více obrazovkami.

Zobrazení

Stránka obsahu obvykle zobrazuje zobrazení. Zobrazení umožňuje načíst a prezentovat data určitým způsobem. Výchozí zobrazení stránky obsahu je ContentViewpoložka, která zobrazuje položky tak, jak jsou. Pokud zobrazení zmenšíte, můžou položky z displeje zmizet, dokud velikost zobrazení nezmenšíte. A ScrollView umožňuje zobrazit položky v okně pro posouvání. Pokud okno zmenšíte, můžete položky zobrazit nahoru a dolů. A CarouselView je posouvatelné zobrazení, které uživateli umožňuje procházet kolekci položek. A CollectionView může načíst data z pojmenovaného zdroje dat a prezentovat každou položku pomocí šablony jako formátu. K dispozici je také mnoho dalších typů zobrazení.

Ovládací prvky a rozložení

Zobrazení může obsahovat jeden ovládací prvek, například tlačítko, popisek nebo textová pole. (Přesněji řečeno, zobrazení je sám o sobě ovládací prvek, takže zobrazení může obsahovat jiné zobrazení.) Uživatelské rozhraní omezené na jeden ovládací prvek by však nebylo tak užitečné, takže ovládací prvky jsou umístěny v rozložení. Rozložení definuje pravidla, podle kterých se ovládací prvky zobrazují vzhledem k sobě. Rozložení je také ovládací prvek, takže ho můžete přidat do zobrazení. Pokud se podíváte na výchozí soubor MainPage.xaml, zobrazí se tato stránka/view/layout/control hierarchie v akci. V tomto kódu XAML je prvek jen dalším ovládacím prvkem, VerticalStackLayout který umožňuje doladit rozložení jiných ovládacích prvků.

<ContentPage ...>
    <ScrollView ...>
        <VerticalStackLayout>
            <Image ... />
            <Label ... />
            <Label ... />
            <Button ... />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Mezi běžné ovládací prvky použité k definování rozložení patří:

  • VerticalStackLayout a HorizontalStackLayout, což jsou optimalizovaná rozložení zásobníku, která rozkládají ovládací prvky v zásobníku shora dolů nebo zleva doprava. K StackLayout dispozici je také vlastnost s názvem StackOrientation , na kterou můžete nastavit Horizontal nebo Vertical. Úprava této vlastnosti v kódu aplikace umožňuje na tabletu nebo telefonu upravit zobrazení, pokud uživatel zařízení otočí:

    Diagram znázorňuje, jak vodorovná a svislá orientace rozložení zásobníku obsahuje ovládací prvky.

  • AbsoluteLayout, který umožňuje nastavit přesné souřadnice pro ovládací prvky.

  • FlexLayout, což je podobné s StackLayout tím rozdílem, že umožňuje zabalit podřízené ovládací prvky, které obsahuje, pokud se nevejdou do jednoho řádku nebo sloupce. Toto rozložení také poskytuje možnosti zarovnání a přizpůsobení různým velikostem obrazovky. Ovládací prvek může například FlexLayout zarovnat podřízený ovládací prvek doleva, doprava nebo na střed, když je uspořádaný svisle. Pokud jsou zarovnané vodorovně, můžete ovládací prvky ospravedlnit, abyste zajistili rovnoměrné mezery. K zobrazení vodorovné řady snímků můžete použít FlexLayout ScrollView vodorovnou řadu snímků (každý snímek by sám mohl být svisle uspořádaný FlexLayout):

    Snímek obrazovky z aplikace spuštěné s flexLayoutem vykresleným na obrazovku Nejdřív se vykreslí obrázek, pak název a pak textový popisek a tlačítko. Všechny tyto prvky se v rámečku vykreslují svisle.

  • Grid, který stanoví jeho ovládací prvky podle umístění sloupce a řádku, které jste nastavili. Můžete definovat velikosti sloupců a řádků a jejich rozsahy, takže rozložení mřížky nemusí nutně obsahovat "vzhled checkerboardu".

Následující obrázek shrnuje klíčové atributy těchto běžných typů rozložení:

Diagram rozložení, která se nejčastěji používají v uživatelském rozhraní .NET MAUI

Všechny ovládací prvky mají vlastnosti. Počáteční hodnoty těchto vlastností můžete nastavit pomocí jazyka XAML (Extensible Application Markup Language). V mnoha případech můžete tyto vlastnosti upravit v kódu aplikace v jazyce C#. Například kód, který zpracovává Clicked událost pro tlačítko Click me ve výchozí aplikaci .NET MAUI, vypadá takto:

int count = 0;
private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Tento kód upraví Text vlastnost ovládacího prvku CounterBtn na stránce. V kódu můžete dokonce vytvářet celé stránky, zobrazení a rozložení; nemusíte používat XAML. Představte si například následující definici XAML stránky:

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

    <ScrollView>
        <VerticalStackLayout>
            <Label Text="Current count: 0"
                Grid.Row="0"
                FontSize="18"
                FontAttributes="Bold"
                x:Name="CounterLabel"
                HorizontalOptions="Center" />

            <Button Text="Click me"
                Grid.Row="1"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Ekvivalentní kód v jazyce C# vypadá takto:

public partial class TestPage : ContentPage
{
    int count = 0;
    
    // Named Label - declared as a member of the class
    Label counterLabel;

    public TestPage()
    {       
        var myScrollView = new ScrollView();

        var myStackLayout = new VerticalStackLayout();
        myScrollView.Content = myStackLayout;

        counterLabel = new Label
        {
            Text = "Current count: 0",
            FontSize = 18,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(counterLabel);
        
        var myButton = new Button
        {
            Text = "Click me",
            HorizontalOptions = LayoutOptions.Center
        };
        myStackLayout.Children.Add(myButton);

        myButton.Clicked += OnCounterClicked;

        this.Content = myScrollView;
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;
        counterLabel.Text = $"Current count: {count}";

        SemanticScreenReader.Announce(counterLabel.Text);
    }
}

Kód jazyka C# je více podrobný, ale poskytuje větší flexibilitu, která umožňuje dynamicky přizpůsobit uživatelské rozhraní.

Chcete-li zobrazit tuto stránku při spuštění aplikace, nastavte TestPage třídu v AppShell hlavní ShellContent:

<ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:TestPage}"
        Route="TestPage" />

Ladění rozložení

Je užitečné přidat trochu dechového prostoru kolem ovládacího prvku. Každý ovládací prvek má Margin vlastnost, kterou rozložení respektují. Okraj si můžete představit jako ovládací prvek, který ostatní tlačí pryč.

Všechna rozložení mají Padding také vlastnost, která umožňuje, aby se některé z podřízených položek blížily hranici rozložení. Jedním ze způsobů, jak si tento koncept představit, je, že všechny ovládací prvky jsou v rámečku a že toto pole má vycpané stěny.

Další užitečné nastavení prázdných Spacing VerticalStackLayout znaků je vlastnost nebo HorizontalStackLayout. Tím se nastaví mezera mezi všemi podřízenými hodnotami rozložení. Hodnota se sčítá s vlastním okrajem ovládacího prvku, takže skutečné prázdné znaky jsou okraje plus mezery.

Kontrola znalostí

1.

Který z těchto typů není typem rozložení v .NET MAUI?

2.

Jaká třída se používá k vytvoření obrazovky v .NET MAUI?