Vytvoření projektu .NET MAUI v sadě Visual Studio

5 min

Po instalaci a konfiguraci nástrojů .NET MAUI můžete pomocí sady Visual Studio sestavit aplikaci .NET MAUI (Multi-platform Application User Interface).

V této lekci se dozvíte o struktuře šablony .NET MAUI v sadě Visual Studio. Tuto šablonu použijete k vytváření mobilních a desktopových aplikací pro různé platformy.

Jak začít

Pokud chcete vytvořit nový projekt .NET MAUI pomocí sady Visual Studio, v dialogovém okně Vytvořit nový projekt vyberte typ projektu .NET MAUI a pak zvolte šablonu aplikace .NET MAUI:

Snímek obrazovky s dialogovým oknem Vytvořit nový projekt v sadě Visual Studio Uživatel vybere šablonu aplikace .NET MAUI.

Podle pokynů v průvodci pojmenujte projekt a zadejte umístění.

Nově vytvořený projekt .NET MAUI obsahuje položky, jak je znázorněno:

Snímek obrazovky s průzkumníkem řešení výchozí struktury nového řešení .NET MAUI v sadě Visual Studio

Struktura projektu .NET MAUI a spuštění aplikace

Obsah projektu zahrnuje následující položky:

App.xaml. Tento soubor definuje prostředky aplikace, které aplikace používá v rozložení XAML (Extensible Application Markup Language). Výchozí prostředky se nacházejí ve Resources složce a definují barvy a výchozí styly pro celou aplikaci pro každý integrovaný ovládací prvek .NET MAUI. Tady uvidíte dva slovníky prostředků, které se sloučí dohromady:

<?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. Tento soubor je kódem pro soubor App.xaml. Definuje třídu aplikace. Tato třída představuje vaši aplikaci za běhu. Konstruktor v této třídě vytvoří počáteční okno a přiřadí jej k MainPage vlastnosti; tato vlastnost určuje, která stránka se zobrazí při spuštění aplikace. Kromě toho tato třída umožňuje přepsat běžné obslužné rutiny událostí životního cyklu aplikace neutrální pro platformu. Události zahrnují OnStart, OnResumea OnSleep. Tyto obslužné rutiny jsou definovány jako členy Application základní třídy. Následující kód ukazuje příklady:

Poznámka:

Události životního cyklu specifické pro platformu můžete také přepsat při prvním spuštění aplikace. Toto je popsáno později.
```
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. Tento soubor je hlavní strukturou aplikace .NET MAUI. .NET MAUI Shell poskytuje mnoho funkcí, které jsou užitečné pro více platforem aplikací, včetně stylu aplikací, navigace na základě identifikátoru URI a možností rozložení, včetně kontextové navigace a karet pro kořen aplikace. Výchozí šablona poskytuje jednu stránku (nebo ShellContent), která se při spuštění aplikace nafoukne.

  <?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. Tento soubor obsahuje definici uživatelského rozhraní. Ukázková aplikace, kterou šablona aplikace MAUI vygeneruje, obsahuje dva popisky, tlačítko a obrázek. Ovládací prvky jsou uspořádány pomocí VerticalStackLayout uzavřeného v ScrollViewsouboru . Prvek VerticalStackLayout uspořádá ovládací prvky svisle (v zásobníku) a ScrollView poskytuje posuvník, pokud je zobrazení na zařízení příliš velké. Chcete nahradit obsah tohoto souboru vlastním rozložením uživatelského rozhraní. Pokud máte vícestrákovou aplikaci, můžete také definovat další stránky XAML.

<?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. Tento soubor obsahuje kód stránky. V tomto souboru definujete logiku pro různé obslužné rutiny událostí a další akce aktivované ovládacími prvky na stránce. Ukázkový kód implementuje obslužnou rutinu Clicked události pro tlačítko na stránce. Kód jednoduše zvýší proměnnou čítače a zobrazí výsledek v popisku na stránce. Sémantická služba poskytovaná jako součást knihovny MAUI Essentials podporuje přístupnost. Statická Announce metoda SemanticScreenReader třídy určuje text oznámený čtečkou obrazovky, když uživatel vybere tlačítko:
```
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. Každá nativní platforma má jiný výchozí bod, který vytvoří a inicializuje aplikaci. Tento kód najdete ve složce Platformy v projektu. Tento kód je specifický pro platformu, ale na konci volá CreateMauiApp metodu statické MauiProgram třídy. Tuto metodu CreateMauiApp použijete ke konfiguraci aplikace vytvořením objektu tvůrce aplikací. Minimálně musíte určit, která třída popisuje vaši aplikaci pomocí UseMauiApp obecné metody objektu tvůrce aplikací; parametr typu (<App>) určuje třídu aplikace. Tvůrce aplikací také poskytuje metody pro úlohy, jako je registrace písem, konfigurace služeb pro injektáž závislostí, registrace vlastních obslužných rutin pro ovládací prvky a další. Následující kód ukazuje příklad použití tvůrce aplikací k registraci písma:
```
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();
    }
}
```
Platformy. Tato složka obsahuje soubory a prostředky kódu inicializace specifické pro platformu. Existují složky pro Android, iOS, MacCatalyst, Tizen a Windows. Za běhu se aplikace spustí určitým způsobem. Knihovny MAUI abstrahují většinu procesu spuštění, ale soubory kódu v těchto složkách poskytují mechanismus pro připojení vlastní inicializace. Důležitým bodem je, že po dokončení inicializace volá kód specifický pro platformu metodu MauiProgram.CreateMauiApp , která pak vytvoří a spustí App objekt, jak je popsáno výše. Například soubor MainApplication.cs ve složce Android , soubor AppDelegate.cs ve složce iOS a MacCatalyst a soubor App.xaml.cs ve složce Windows obsahují přepsání:
```
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
```

Následující obrázek znázorňuje tok řízení při spuštění aplikace .NET MAUI:

Diagram toku řízení při spuštění aplikace .NET MAUI Tokuje z nativního konkrétního spuštění do funkce vytvoření aplikace MAUI a nakonec konstruktoru objektu aplikace.

Zdroje projektu

Soubor projektu (.csproj) pro hlavní projekt obsahuje několik pozoruhodných částí. Počáteční PropertyGroup určuje architektury platformy, které projekt cílí, a položky, jako je název aplikace, ID, verze, zobrazovaná verze a podporované operační systémy. Tyto vlastnosti můžete podle potřeby změnit.

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

Část ItemGroup pod počáteční skupinou vlastností umožňuje zadat obrázek a barvu úvodní obrazovky, která se zobrazí při načítání aplikace, před zobrazením prvního okna. Můžete také nastavit výchozí umístění pro písma, obrázky a prostředky, které aplikace používá.

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

V okně Průzkumník řešení v sadě Visual Studio můžete rozbalit složku Resources a zobrazit tyto položky. Do této složky a podsložek můžete přidat libovolná další písma, obrázky a další grafické prostředky, které aplikace vyžaduje.

Snímek obrazovky se složkou prostředků v hlavním projektu a obdélníkem kolem ní v Průzkumníku řešení sady Visual Studio Složka obsahuje soubory písem a obrázků.

Při spuštění aplikace byste měli zaregistrovat všechna písma přidaná do složky písem s objektem tvůrce aplikací. Vzpomeňte si, že metoda CreateMauiApp ve třídě MauiProgram registruje písma metodou ConfigureFonts :

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

        ...
    }
}

V tomto příkladu AddFont metoda přidruží písmo k názvu OpenSansRegular. Toto písmo můžete zadat při formátování položek v popisu stránky nebo ve slovníku prostředků aplikace:

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

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

Použijte složky Prostředky ve složkách Android a iOS ve složce Platformy pro prostředky specifické pro platformu Android a iOS.

Kontrola znalostí

Ve které metodě objektu aplikace byste měli vytvořit počáteční okno zobrazené aplikací?

Spuštění

Konfigurovat

Konstruktor

Kde implementujete logiku pro obslužnou rutinu události pro ovládací prvek, například kliknutou událost pro tlačítko?

V popisu XAML stránky obsahující ovládací prvek

Logiku implementujete v souboru kódu pro stránku XAML obsahující ovládací prvek.

V souboru App.xaml.cs

Kontrola odpovědí

Před kontrolou vaší práce musíte odpovědět na všechny dotazy.

Pokračovat

Vytvoření projektu .NET MAUI v sadě Visual Studio

Jak začít

Struktura projektu .NET MAUI a spuštění aplikace

Zdroje projektu

Kontrola znalostí

Váš názor