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. Třída vytvoří počáteční okno a přiřadí ji 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 výchozí šablony a možnost přepsat tyto události:

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.
```
public partial class App : Application
{
    public App()
    {
        InitializeComponent();
    }

    protected override Window CreateWindow(IActivationState? activationState)
    {
        return new Window(new AppShell());
    }

    // Optional events to implement for the application lifecycle. The Window created 
    // above also has lifecycle events that can be used to track the Window lifecycle.
    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="Flyout"
      Title="MyMauiApp">

      <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
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a hovercraft number nine" />

            <Label
                Text="Hello, World!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />

            <Label
                Text="Welcome to &#10;.NET Multi-platform App UI"
                Style="{StaticResource SubHeadline}"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" />
        </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:
```
using Microsoft.Extensions.Logging;

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

#if DEBUG
        builder.Logging.AddDebug();
#endif

        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>net9.0-android;net9.0-ios;net9.0-maccatalyst</TargetFrameworks>
		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net9.0-windows10.0.19041.0</TargetFrameworks>
		<OutputType>Exe</OutputType>
		<RootNamespace>MyMauiApp</RootNamespace>
		<UseMaui>true</UseMaui>
		<SingleProject>true</SingleProject>
		<ImplicitUsings>enable</ImplicitUsings>
		<Nullable>enable</Nullable>

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

		<!-- App Identifier -->
		<ApplicationId>com.companyname.mymauiapp</ApplicationId>

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

		<!-- To develop, package, and publish an app to the Microsoft Store, see: https://aka.ms/MauiTemplateUnpackaged -->
		<WindowsPackageType>None</WindowsPackageType>

		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">15.0</SupportedOSPlatformVersion>
		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">15.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\appicon.svg" 
                  ForegroundFile="Resources\AppIcon\appiconfg.svg" 
                  Color="#512BD4" />

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

		<!-- Images -->
		<MauiImage Include="Resources\Images\*" />
		<MauiImage Update="Resources\Images\dotnet_bot.png" 
                   Resize="True" BaseSize="300,185" />

		<!-- 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, aplikace nebo ve sdíleném slovníku prostředků:

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

</ResourceDictionary>

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.

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