Lägga till visuella kontroller i en .NET MAUI-app

  • 5 minuter

Nu när du har använt .NET MAUI-mallen för att skapa programmet är nästa steg att lägga till användargränssnittet och implementera den första UI-logiken.

I den här lektionen lär du dig mer om byggstenarna i ett .NET MAUI-program och navigeringsstrukturer (Multi-Platform Application User Interface).

Vad finns i ett .NET MAUI-projekt?

För att sammanfatta innehåller ett .NET MAUI-projekt inledningsvis:

  • Den MauiProgram.cs fil som innehåller koden för att skapa och konfigurera programobjektet.

  • App.xaml och App.xaml.cs filer som tillhandahåller användargränssnittsresurser och skapar det första fönstret för programmet.

  • AppShell.xaml och AppShell.xaml.cs filer som anger den första sidan för programmet och hanterar registreringen av sidor för navigeringsroutning.

  • MainPage.xaml och MainPage.xaml.cs filer som definierar layout- och användargränssnittslogiken för sidan som visas som standard i det första fönstret.

Du kan lägga till ytterligare sidor i appen efter behov och du kan skapa fler klasser för att implementera den affärslogik som appen kräver.

Ett .NET MAUI-projekt innehåller också en standarduppsättning programresurser som bilder, ikoner och teckensnitt och standardstövlar för varje plattform.

Programklassen

Klassen App representerar .NET MAUI-programmet som helhet. Den ärver en standarduppsättning beteenden från Microsoft.Maui.Controls.Application. Kom ihåg från föregående lektion att det är App klassen som bootstrap-koden instansierar och läser in för varje plattform. Klasskonstruktorn App skapar i sin tur vanligtvis en instans av AppShell klassen och tilldelar den MainPage till egenskapen. Det är den här koden som styr den första skärmen som användaren ser baserat på definitionerna i AppShell.

Klassen App innehåller också:

  • Metoder för att hantera livscykelhändelser, inklusive när appen skickas till bakgrunden (dvs. när den upphör att vara förgrundsappen).

  • Metoder för att skapa nya Windows för programmet. .NET MAUI-programmet har som standard ett enda fönster, men du kan skapa och starta fler fönster, vilket är användbart i skrivbords- och surfplattaprogram.

Gränssnitt

.NET Multi-platform App UI (.NET MAUI) Shell minskar komplexiteten i apputveckling genom att tillhandahålla de grundläggande funktioner som de flesta appar kräver, inklusive:

  • En enda plats för att beskriva den visuella hierarkin för en app.
  • En vanlig användarupplevelse för navigering.
  • Ett URI-baserat navigeringsschema som tillåter navigering till valfri sida i appen.
  • En integrerad sökhanterare.

I en .NET MAUI Shell-app beskrivs appens visuella hierarki i en klass som underklassar Shell-klassen. Den här klassen kan bestå av tre huvudsakliga hierarkiska objekt:

  • FlyoutItem eller TabBar. En FlyoutItem representerar ett eller flera objekt i den utfällbara menyn och bör användas när navigeringsmönstret för appen kräver en utfällning. A TabBar representerar det nedre flikfältet och bör användas när navigeringsmönstret för appen börjar med nedre flikar och inte kräver en utfällbar meny.
  • Tab, som representerar grupperat innehåll, navigeringsbart efter nedersta flikar.
  • ShellContent, som representerar ContentPage-objekten för varje flik.

Dessa objekt representerar inte något användargränssnitt, utan snarare organisationen av appens visuella hierarki. Shell tar dessa objekt och skapar navigeringsanvändargränssnittet för innehållet.

Sidor

Sidor är roten i användargränssnittshierarkin i .NET MAUI inuti en Shell. Hittills innehåller lösningen som du såg en klass med namnet MainPage. Den här klassen härleds från ContentPage, som är den enklaste och vanligaste sidtypen. En innehållssida visar helt enkelt innehållet. .NET MAUI har också flera andra inbyggda sidtyper, bland annat:

  • TabbedPage: Rotsidan som används för fliknavigering. En sida med flikar innehåller underordnade sidobjekt. en för varje flik.

  • FlyoutPage: Gör att du kan implementera en presentation av huvud-/detaljformat. En utfälld sida innehåller en lista med objekt. När du väljer ett objekt visas en vy som visar information om objektet.

Andra sidtyper är tillgängliga och används främst för att aktivera olika navigeringsmönster i appar med flera skärmar.

Vyer

En innehållssida visar vanligtvis en vy. Med en vy kan du hämta och presentera data på ett visst sätt. Standardvyn för en innehållssida är en ContentView, som visar objekt som de är. Om du krymper vyn kan objekt försvinna från visningen tills du ändrar storlek på vyn. A ScrollView gör att du kan visa objekt i ett rullningsfönster. Om du krymper fönstret kan du rulla upp och ned för att visa objekt. A CarouselView är en rullningsbar vy som gör att användaren kan svepa genom en samling objekt. En CollectionView kan hämta data från en namngiven datakälla och presentera varje objekt med hjälp av en mall som ett format. Det finns även många andra typer av vyer.

Kontroller och layouter

En vy kan innehålla en enda kontroll, till exempel en knapp, etikett eller textrutor. (Strikt sett är en vy i sig en kontroll, så en vy kan innehålla en annan vy.) Ett användargränssnitt som är begränsat till en enda kontroll skulle dock inte vara så användbart, så kontrollerna placeras i en layout. En layout definierar de regler som kontrollerna visas med i förhållande till varandra. En layout är också en kontroll, så du kan lägga till den i en vy. Om du tittar på standardfilen MainPage.xaml visas den här hierarkin för sida/vy/layout/kontroll i praktiken. I den här XAML-koden är elementet VerticalStackLayout bara en annan kontroll som gör att du kan finjustera layouten för andra kontroller.

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

Några av de vanliga kontroller som används för att definiera layouter är:

  • VerticalStackLayout och HorizontalStackLayout, som är optimerade stacklayouter som visar kontroller i en stack uppifrån och ned eller från vänster till höger. A StackLayout är också tillgängligt, som har en egenskap med namnet StackOrientation som du kan ange till Horizontal eller Vertical. Om du ändrar den här egenskapen i programkoden på en surfplatta eller telefon kan du justera visningen om användaren roterar enheten:

    Ett diagram över hur de vågräta och lodräta orienteringarna för stacklayouten visar kontroller.

  • AbsoluteLayout, som gör att du kan ange exakta koordinater för kontroller.

  • FlexLayout, vilket liknar StackLayout förutom att det gör att du kan omsluta de underordnade kontroller som den innehåller om de inte får plats i en enda rad eller kolumn. Den här layouten innehåller också alternativ för justering och anpassning till olika skärmstorlekar. En kontroll kan till exempel FlexLayout justera den underordnade kontrollen åt vänster, höger eller mitten när den ordnas lodrätt. När du justerar vågrätt kan du justera kontroller för att säkerställa jämnt avstånd. Du kan använda en vågrät FlexLayout insida i en ScrollView för att visa en vågrätt rullningsbar serie med ramar (varje ram kan i sig vara en lodrätt ordnad FlexLayout):

    En skärmbild från en app som körs med FlexLayout renderad på skärmen. Först återges en bild, sedan en rubrik, sedan en textetikett och sedan en knapp. Alla dessa element återges lodrätt i en ruta.

  • Grid, som visar dess kontroller enligt en kolumn- och radplats som du anger. Du kan definiera kolumn- och radstorlekarna och deras intervall, så att rutnätslayouter inte nödvändigtvis har en "checkerboard look" för dem.

Följande bild sammanfattar nyckelattributen för dessa vanliga layouttyper:

Ett diagram över de layouter som används oftast i ett .NET MAUI-användargränssnitt.

Alla kontroller har egenskaper. Du kan ange inledande värden för dessa egenskaper med XAML (Extensible Application Markup Language). I många fall kan du ändra dessa egenskaper i C#-koden för ditt program. Koden som hanterar Clicked händelsen för knappen Klicka på mig i .NET MAUI-standardappen ser till exempel ut så här:

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

Den här koden ändrar egenskapen för Text CounterBtn-kontrollen på sidan. Du kan till och med skapa hela sidor, vyer och layouter i koden. du behöver inte använda XAML. Tänk till exempel på följande XAML-definition av en sida:

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

Motsvarande kod i C# ser ut så här:

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

C#-koden är mer utförlig, men ger mer flexibilitet som gör att du kan anpassa användargränssnittet dynamiskt.

Om du vill visa den här sidan när programmet börjar köras anger du TestPage klassen i AppShell som main ShellContent:

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

Justera en layout

Det är användbart att lägga till lite andrum runt en kontroll. Varje kontroll har en Margin egenskap som layouterna respekterar. Du kan se marginalen som kontrollen som driver bort andra.

Alla layouter har också en Padding egenskap som hindrar något av deras barn från att komma nära layoutens kantlinje. Ett sätt att tänka på detta koncept är att alla kontroller finns i en låda, och att lådan har vadderade väggar.

En annan användbar blankstegsinställning är Spacing egenskapen VerticalStackLayout för eller HorizontalStackLayout. Detta anger utrymmet mellan alla underordnade objekt i layouten. Värdet är additivt med kontrollens egen marginal, så det faktiska blanksteget är marginal plus avstånd.

Kunskapstest

1.

Vilken av dessa typer är inte en layouttyp i .NET MAUI?

2.

Vilken klass används för att skapa en skärm i .NET MAUI?