.NET MAUI-projekt létrehozása a Visual Studióban

5 perc

A .NET MAUI-eszközök telepítése és konfigurálása után a Visual Studióval létrehozhat egy .NET MAUI-alkalmazást.

Ebben a leckében megismerkedhet a Visual Studióban található .NET MAUI-sablon szerkezetével. Ezzel a sablonnal platformfüggetlen mobil- és asztali alkalmazásokat hozhat létre.

Az első lépések

Ha új .NET MAUI-projektet szeretne létrehozni a Visual Studióval, az Új projekt létrehozása párbeszédpanelen válassza ki a .NET MAUI projekttípust, majd válassza a .NET MAUI-alkalmazássablont:

A screenshot of the Create a new project dialog box in Visual Studio. The user has selected the .NET MAUI App template.

A varázsló lépéseit követve nevezze el a projektet, és adjon meg egy helyet.

Egy újonnan létrehozott .NET MAUI-projekt az alábbi elemeket tartalmazza:

A screenshot of the solution explorer of the default structure of a new .NET MAUI solution in Visual Studio.

.NET MAUI-projektstruktúra és alkalmazásindítás

A projekt tartalma a következő elemeket tartalmazza:

App.xaml. Ez a fájl határozza meg azokat az alkalmazáserőforrásokat, amelyeket az alkalmazás használni fog az XAML-elrendezésben. Az alapértelmezett erőforrások a Resources mappában találhatók, és alkalmazásszintű színeket és alapértelmezett stílusokat határoznak meg minden beépített .NET MAUI-vezérlőhöz. Itt láthatja, hogy a két erőforrás-szótár egyesül:

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

App.xaml.cs. Ez az App.xaml fájl mögötti kód. Ez a fájl határozza meg az alkalmazásosztályt. Ez az osztály az alkalmazást futtatókörnyezetben jelöli. Az osztály konstruktora létrehoz egy kezdeti ablakot, és hozzárendeli a MainPage tulajdonsághoz. Ez a tulajdonság határozza meg, hogy melyik lap jelenjen meg az alkalmazás futásának megkezdésekor. Emellett ez az osztály lehetővé teszi a gyakori platformsemleges alkalmazás-életciklus-eseménykezelők felülbírálását. Az események közé tartozik OnStartaz , OnResumeés OnSleepa . Ezek a kezelők az Application alaposztály tagjaiként vannak definiálva. Az alábbi kód példákat mutat be:

Megjegyzés:

Felülbírálhatja a platformspecifikus életciklus-eseményeket is, amikor az alkalmazás először elindul. Ezt később ismertetjük.
```
namespace MyMauiApp;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new AppShell();
    }

    protected override void OnStart()
    {
        base.OnStart();
    }

    protected override void OnResume()
    {
        base.OnResume();
    }

    protected override void OnSleep()
    {
        base.OnSleep();
    }
}
```
AppShell.xaml. Ez a fájl egy .NET MAUI-alkalmazás fő struktúrája. A .NET MAUI Shell számos olyan funkciót kínál, amelyek előnyösek a többplatformos alkalmazások számára, beleértve az alkalmazásformázást, az URI-alapú navigációt és az elrendezési beállításokat, beleértve a úszóablak-navigációt és az alkalmazás gyökerének lapjait. Az alapértelmezett sablon egyetlen lapot (vagy ShellContent) biztosít, amely az alkalmazás indításakor fel van fújva.
```
  <?xml version="1.0" encoding="UTF-8" ?>
  <Shell
      x:Class="MyMauiApp.AppShell"
      xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      xmlns:local="clr-namespace:MyMauiApp"
      Shell.FlyoutBehavior="Disabled">

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

  </Shell>
```

MainPage.xaml. Ez a fájl tartalmazza a felhasználói felület definícióját. A MAUI-alkalmazássablon által létrehozott mintaalkalmazás két címkét, egy gombot és egy képet tartalmaz. A vezérlők egy VerticalStackLayout zárt ScrollViewnézetben vannak elrendezve. A VerticalStackLayout vezérlő függőlegesen (veremben) rendezi el a vezérlőket, és görgetősávot ScrollView biztosít, ha a nézet túl nagy ahhoz, hogy megjelenjen az eszközön. A fájl tartalmát saját felhasználói felületi elrendezésre szeretné cserélni. Többoldalas alkalmazás esetén további XAML-oldalakat is definiálhat.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage">

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label 
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label 
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button 
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

MainPage.xaml.cs. Ez a lap mögötti kód. Ebben a fájlban a lap vezérlői által aktivált különböző eseménykezelők és egyéb műveletek logikáját határozza meg. A példakód egy kezelőt implementál az Clicked eseményhez az oldalon található gombhoz. A kód egyszerűen növeli a számlálóváltozót, és megjeleníti az eredményt egy címkében az oldalon. A MAUI Essentials könyvtár részeként nyújtott szemantikai szolgáltatás támogatja az akadálymentességet. Az osztály statikus Announce metódusa SemanticScreenReader a képernyőolvasó által a gomb kiválasztásakor bejelentett szöveget adja meg:
```
namespace MyMauiApp;

public partial class MainPage : ContentPage
{
    int count = 0;

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;

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

        SemanticScreenReader.Announce(CounterBtn.Text);
    }
}
```
MauiProgram.cs. Minden natív platform más kiindulási ponttal rendelkezik, amely létrehozza és inicializálja az alkalmazást. Ezt a kódot a projekt Platformok mappájában találja. Ez a kód platformspecifikus, de a végén meghívja a CreateMauiApp statikus MauiProgram osztály metódusát. Ezzel a CreateMauiApp módszerrel konfigurálhatja az alkalmazást egy alkalmazásszerkesztő objektum létrehozásával. Legalább meg kell adnia, hogy melyik osztály írja le az alkalmazást. Ezt az UseMauiApp alkalmazásszerkesztő objektum általános metódusával teheti meg; a típusparaméter az alkalmazásosztályt határozza meg. Az alkalmazásszerkesztő olyan feladatokhoz is kínál módszereket, mint a betűtípusok regisztrálása, a függőséginjektálási szolgáltatások konfigurálása, az egyéni kezelők regisztrálása a vezérlőkhöz stb. Az alábbi kód egy példát mutat be arra, hogy az alkalmazásszerkesztővel egy betűtípust regisztrálhat:
```
namespace MyMauiApp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

        return builder.Build();
    }
}
```
Platformok. Ez a mappa platformspecifikus inicializálási kódfájlokat és erőforrásokat tartalmaz. Vannak mappák Android, iOS, MacCatalyst, Tizen és Windows rendszerhez. Futásidőben az alkalmazás platformspecifikus módon indul el. Az indítási folyamat nagy részét a MAUI-kódtárak belső részei absztrakcióval végzik, de az ezekben a mappákban található kódfájlok egy mechanizmust biztosítanak a saját egyéni inicializálás csatlakoztatásához. A lényeg az, hogy az inicializálás befejezésekor a platformspecifikus kód meghívja a MauiProgram.CreateMauiApp metódust, amely ezután létrehozza és futtatja az objektumot a App korábban leírtak szerint. A MainApplication.cs fájl például az Android mappában, az AppDelegate.cs fájl az iOS és a MacCatalyst mappában, valamint a Windows mappában található App.xaml.cs fájl mind tartalmazza a felülbírálásokat:
```
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
```

Az alábbi képen egy .NET MAUI-alkalmazás indításakor megjelenő vezérlőfolyamat látható:

A diagram of the flow of control when a .NET MAUI app starts up. It flows from the native specific startup, to the create MAUI app function, to finally the app object constructor.

Projekt-erőforrások

A fő projekt .csproj fájlja számos figyelemre méltó szakaszt tartalmaz. A kezdeti PropertyGroup beállítás meghatározza a projekt által megcélzott platform-keretrendszereket, valamint az olyan elemeket, mint az alkalmazás címe, azonosítója, verziója, megjelenítési verziója és támogatott operációs rendszerek. Ezeket a tulajdonságokat szükség szerint módosíthatja.

<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
        <!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
        <!-- <TargetFrameworks>$(TargetFrameworks);net6.0-tizen</TargetFrameworks> -->
        <OutputType>Exe</OutputType>
        <RootNamespace>MyMauiApp</RootNamespace>
        <UseMaui>true</UseMaui>
        <SingleProject>true</SingleProject>
        <ImplicitUsings>enable</ImplicitUsings>

        <!-- Display name -->
        <ApplicationTitle>MyMauiApp</ApplicationTitle>

        <!-- App Identifier -->
        <ApplicationId>com.companyname.mymauiapp</ApplicationId>
        <ApplicationIdGuid>272B9ECE-E038-4E53-8553-E3C9EA05A5B2</ApplicationIdGuid>

        <!-- Versions -->
        <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
        <ApplicationVersion>1</ApplicationVersion>

        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
        <TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
    </PropertyGroup>
    ...

</Project>

A ItemGroup kezdeti tulajdonságcsoport alatti szakasz lehetővé teszi a kezdőképernyő képének és színének megadását, amely az alkalmazás betöltésekor jelenik meg az első ablak megjelenése előtt. Beállíthatja az alkalmazás által használt betűtípusok, képek és eszközök alapértelmezett helyét is.

<Project Sdk="Microsoft.NET.Sdk">

    ...

   <ItemGroup>
        <!-- App Icon -->
        <MauiIcon Include="Resources\appicon.svg" 
                  ForegroundFile="Resources\appiconfg.svg" 
                  Color="#512BD4" />

        <!-- Splash Screen -->
        <MauiSplashScreen Include="Resources\appiconfg.svg" 
                          Color="#512BD4" 
                          BaseSize="128,128" />

        <!-- Images -->
        <MauiImage Include="Resources\Images\*" />
        <MauiImage Update="Resources\Images\dotnet_bot.svg" 
                   BaseSize="168,208" />

        <!-- Custom Fonts -->
        <MauiFont Include="Resources\Fonts\*" />

        <!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
        <MauiAsset Include="Resources\Raw\**" 
                   LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
    </ItemGroup>

    ...

</Project>

A Visual Studio Megoldáskezelő ablakában kibonthatja az Erőforrások mappát az elemek megtekintéséhez. Az alkalmazás által igényelt egyéb betűtípusokat, képeket és egyéb grafikus erőforrásokat hozzáadhat ehhez a mappához és almappához.

A screenshot of the resources folder in the main project with a rectangle around it in the Visual Studio solution explorer. Inside the folder are font and image files.

Az alkalmazás futtatásakor regisztrálnia kell a betűtípusok mappába hozzáadott betűtípusokat az alkalmazásszerkesztő objektummal. Ne feledje, hogy a MauiProgram osztály CreateMauiApp metódusa ezt ConfigureFonts a következő módszerrel végzi:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            ...
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        ...
    }
}

Ebben a példában a metódus a AddFont betűtípust a névhez OpenSansRegulartársítja. Ezt a betűtípust akkor adhatja meg, ha egy lap XAML-leírásában vagy az alkalmazás erőforrás-szótárában formázza az elemeket:

<Application ...">
    <Application.Resources>
        <ResourceDictionary>
            ...
            <Style TargetType="Button">
                ...
                <Setter Property="FontFamily" Value="OpenSansRegular" />
                ...
            </Style>

        </ResourceDictionary>
    </Application.Resources>
</Application>

Használja az Android-erőforrásokmappát, az iOS-mappákat pedig az Android- és iOS-platformspecifikus erőforrások Platformok mappájában.

Tudáspróba

Az alkalmazásobjektum melyik metódusával hozza létre az alkalmazás által megjelenített kezdeti ablakot?

Indítás

Configure

A konstruktor

Hol valósítja meg egy vezérlőelem eseménykezelőjének logikáját, például egy gomb Kattintásra eseményét?

A vezérlőt tartalmazó oldal XAML-leírásában

A logikát a vezérlőt tartalmazó XAML-lap mögötti kódfájljában implementálhatja.

Az App.xaml.cs fájlban

A munka ellenőrzése előtt minden kérdésre válaszolnia kell.

Folytatás

.NET MAUI-projekt létrehozása a Visual Studióban

Az első lépések

.NET MAUI-projektstruktúra és alkalmazásindítás

Projekt-erőforrások

Tudáspróba

Visszajelzés