Membuat proyek .NET MAUI di Visual Studio

5 menit

Setelah menginstal dan mengonfigurasi alat .NET MAUI, Anda dapat menggunakan Visual Studio untuk membuat aplikasi .NET MAUI.

Dalam unit ini, Anda akan mempelajari tentang struktur template .NET MAUI di Visual Studio. Anda akan menggunakan template ini untuk membuat aplikasi seluler dan desktop lintas platform.

Cara memulai

Untuk membuat proyek .NET MAUI baru dengan Visual Studio, dalam kotak dialog Buat proyek baru, pilih jenis proyek .NET MAUI, lalu pilih templat Aplikasi .NET MAUI:

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

Ikuti langkah-langkah dalam panduan untuk memberi nama proyek dan menentukan lokasi.

Proyek .NET MAUI yang baru dibuat berisi item seperti yang diperlihatkan:

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

Struktur proyek .NET MAUI dan startup aplikasi

Konten proyek menyertakan item berikut ini:

App.xaml. File ini menentukan sumber daya aplikasi yang akan digunakan aplikasi dalam tata letak XAML. Sumber daya default terletak di Resources folder, dan menentukan warna di seluruh aplikasi dan gaya default untuk setiap kontrol bawaan .NET MAUI. Di sini, Anda akan melihat dua kamus sumber daya yang digabungkan bersama-sama:

<?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. Ini adalah kode belakang untuk file App.xaml. File ini mendefinisikan kelas Aplikasi. Kelas ini mewakili aplikasi Anda saat runtime bahasa umum. Konstruktor di kelas ini membuat jendela awal dan menetapkannya ke properti MainPage; properti ini menentukan halaman mana yang ditampilkan saat aplikasi mulai berjalan. Selain itu, kelas ini memungkinkan Anda untuk menimpa penanganan kejadian siklus hidup aplikasi netral platform umum. Peristiwa meliputi OnStart, OnResume, dan OnSleep. Penangan ini didefinisikan sebagai anggota kelas dasar Application. Kode berikut menunjukkan contoh:

Catatan

Anda juga dapat menimpa kejadian siklus hidup khusus platform saat aplikasi pertama kali mulai berjalan. Hal ini dijelaskan kemudian.
```
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. File ini adalah struktur utama aplikasi .NET MAUI. .NET MAUI Shell menyediakan banyak fitur yang bermanfaat untuk aplikasi beberapa platform termasuk gaya aplikasi, navigasi berbasis URI, dan opsi tata letak termasuk navigasi flyout dan tab untuk akar aplikasi. Template default menyediakan satu halaman (atau ShellContent) yang disempurnakan saat aplikasi dimulai.

  <?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. File ini berisi definisi antarmuka pengguna. Aplikasi sampel yang dihasilkan templat Aplikasi MAUI berisi dua label, tombol, dan gambar. Kontrol diatur menggunakan VerticalStackLayout yang diapit dengan ScrollView. Kontrol VerticalStackLayout mengatur kontrol secara vertikal (dalam tumpukan), dan ScrollView menyediakan bilah gulir jika tampilan terlalu besar untuk ditampilkan pada perangkat. Anda dimaksudkan untuk mengganti konten file ini dengan tata letak UI Anda sendiri. Anda juga bisa menentukan lebih banyak halaman XAML jika Anda memiliki aplikasi multi-halaman.

<?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. Ini adalah kode di belakang untuk halaman. Dalam file ini, Anda menentukan logika untuk berbagai penanganan kejadian dan tindakan lain yang dipicu oleh kontrol di halaman. Kode contoh menerapkan penanganan untuk acara Clicked untuk tombol di halaman. Kode hanya membuat penaikan variabel penghitung dan menampilkan hasilnya dalam label di halaman. Layanan Semantik yang disediakan sebagai bagian dari pustaka MAUI Essentials mendukung aksesibilitas. Metode Announce statis dari kelas SemanticScreenReader menentukan teks yang diumumkan oleh pembaca layar saat pengguna memilih tombol:
```
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. Setiap platform asli memiliki titik awal berbeda yang membuat dan menginisialisasi aplikasi. Anda dapat menemukan kode ini di folder Platform dalam proyek. Kode ini khusus platform, tetapi pada akhirnya ia memanggil CreateMauiApp metode kelas statis MauiProgram . Anda menggunakan metode CreateMauiApp untuk mengonfigurasi aplikasi dengan membuat objek pembuat aplikasi. Minimal, Anda perlu menentukan kelas mana yang menjelaskan aplikasi Anda. Anda melakukan ini dengan metode generik UseMauiApp objek pembuat aplikasi; parameter jenis menentukan kelas aplikasi. Pembuat aplikasi juga menyediakan metode untuk tugas seperti mendaftarkan font, mengonfigurasi layanan untuk injeksi dependensi, mendaftarkan pengendali kustom untuk kontrol, dan banyak lagi. Kode berikut ini memperlihatkan contoh penggunaan pembuat aplikasi untuk mendaftarkan font:
```
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();
    }
}
```
Platforms. Folder ini berisi file kode inisialisasi platform dan sumber daya. Ada folder untuk Android, iOS, MacCatalyst, Tizen, dan Windows. Pada runtime bahasa umum, aplikasi dimulai dengan cara khusus platform. Sebagian besar proses start-up diabstraksi oleh internal pustaka MAUI, tetapi file kode dalam folder ini menyediakan mekanisme untuk menghubungkan inisialisasi kustom Anda sendiri. Poin pentingnya adalah bahwa ketika inisialisasi MauiProgram.CreateMauiAppApp selesai, kode khusus platform memanggil metode , yang kemudian membuat dan menjalankan objek seperti yang dijelaskan sebelumnya. Misalnya, file MainApplication.cs di folder Android, file AppDelegate.cs di folder iOS dan MacCatalyst, dan file App.xaml.cs di folder Windows semuanya berisi penimpaan:
```
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
```

Gambar berikut ini mengilustrasikan aliran kontrol ketika aplikasi .NET MAUI dimulai:

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.

Sumber daya proyek

File .csproj untuk proyek utama menyertakan beberapa bagian penting. PropertyGroup awal menentukan kerangka kerja platform yang ditargetkan proyek, serta item seperti judul aplikasi, ID, versi, versi tampilan, dan sistem operasi yang didukung. Anda dapat mengubah properti ini seperlunya.

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

Bagian ItemGroup di bawah grup properti awal memungkinkan Anda menentukan gambar dan warna untuk layar splash yang muncul saat aplikasi dimuat, sebelum jendela pertama muncul. Anda juga dapat mengatur lokasi default untuk font, gambar, dan aset yang digunakan aplikasi.

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

Di jendela Penjelajah Solusi di Visual Studio, Anda dapat memperluas folder Sumber Daya untuk melihat item ini. Anda dapat menambahkan font, gambar, dan sumber daya grafis lainnya yang diperlukan aplikasi ke folder dan subfolder ini.

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.

Anda harus mendaftarkan font apa pun yang ditambahkan ke folder font dengan objek pembuat aplikasi saat aplikasi Anda mulai berjalan. Ingat bahwa metode CreateMauiApp di kelas MauiProgram melakukan ini dengan metode ConfigureFonts:

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

        ...
    }
}

Dalam contoh ini, metode AddFont mengaitkan font dengan nama OpenSansRegular. Anda dapat menentukan font ini saat memformat item dalam deskripsi XAML halaman atau kamus sumber daya aplikasi:

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

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

Gunakan folder Sumber Daya di folder Android, dan iOS di bawah folder Platform untuk sumber daya khusus platform Android dan iOS.

Uji pengetahuan

Dalam metode objek aplikasi mana Anda harus membuat jendela awal yang ditampilkan oleh aplikasi?

Startup

Mengonfigurasi

Konstruktor

Di mana Anda menerapkan logika untuk pengatur kejadian untuk kontrol, seperti acara Diklik untuk tombol?

Dalam deskripsi XAML halaman yang berisi kontrol

Anda menerapkan logika dalam file code-behind untuk halaman XAML yang berisi kontrol.

Dalam file App.xaml.cs

Anda harus menjawab semua pertanyaan sebelum memeriksa pekerjaan Anda.

Lanjutkan

Membuat proyek .NET MAUI di Visual Studio

Cara memulai

Struktur proyek .NET MAUI dan startup aplikasi

Sumber daya proyek

Uji pengetahuan

Saran dan Komentar