Membuat aplikasi Halo Dunia menggunakan C# dan WinUI 3 / SDK Aplikasi Windows

Dalam panduan ini, kita akan menggunakan Visual Studio 2022 dan WinUI 3 / SDK Aplikasi Windows untuk membangun aplikasi desktop Windows yang menampilkan "Halo dunia!" saat diluncurkan:

Cara ini ditargetkan pada pemula dan tidak membuat asumsi tentang keakraban Anda dengan pengembangan desktop Windows.

Prasyarat

Tutorial ini menggunakan Visual Studio dan dibangun pada templat aplikasi kosong WinUI 3. Untuk menyiapkan, ikuti instruksi di Mulai menggunakan WinUI. Anda akan menginstal Visual Studio, mengonfigurasinya untuk mengembangkan aplikasi dengan WinUI, membuat proyek Halo Dunia, dan memastikan Anda memiliki WinUI versi terbaru.

Ketika Anda telah melakukan itu, kembali ke sini untuk mempelajari lebih lanjut tentang proyek Halo Dunia dan membuat beberapa pembaruan untuk itu.

Tinjau proyek aplikasi kosong

Templat proyek WinUI di Visual Studio berisi semua yang Anda butuhkan untuk membangun dan menjalankan aplikasi Anda. Templat Aplikasi Kosong membuat Jendela dengan Tombol interaktif yang terlihat seperti ini saat Anda menjalankannya dalam mode debug.

Klik tombol Click Me untuk demonstrasi penanganan peristiwa:

Dalam hal ini, peristiwa Klik kontrol Tombol terikat ke myButton_Click penanganan aktivitas yang terletak di MainWindow.xaml.cs:

Meskipun MainWindow.xaml.cs berisi masalah logika bisnis jendela utama kami dalam bentuk file code-behind, masalah presentasinya hidup di MainWindow.xaml:

Pemisahan logika bisnis dan masalah presentasi ini memungkinkan Anda mengikat data dan peristiwa ke dan dari UI aplikasi Anda menggunakan pola pengembangan aplikasi yang konsisten.

Struktur file proyek

Mari kita tinjau struktur file proyek sebelum membuat perubahan kode. Ini terletak di Penjelajah Solusi.

Struktur file proyek saat ini terlihat seperti ini:

Tabel ini menjelaskan file, mulai dari bagian atas dan bekerja ke bawah:

Tampilkan "Halo dunia!"

Untuk menampilkan "Halo dunia!" alih-alih tombol "Klik saya", navigasikan ke MainWindow.xaml. Anda akan melihat StackPanel markup XAML kontrol:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

Mari kita perbarui StackPanel kontrol untuk ditampilkan Hello world! dengan teks merah:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
</StackPanel>

Jika Anda mencoba menjalankan aplikasi sekarang, Visual Studio akan melemparkan kesalahan di sepanjang baris The name 'myButton' does not exist in the current context. Ini karena kami memperbarui lapisan presentasi dengan kontrol baru, tetapi kami tidak memperbarui logika bisnis kontrol lama dalam file code-behind kami.

Navigasi ke MainWindow.xaml.cs dan hapus penanganan myButton_Click aktivitas. Kita dapat melakukan ini karena kita telah mengganti tombol interaktif Click me dengan teks statis Hello world! . Logika bisnis jendela utama kami sekarang akan terlihat seperti ini:

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    // ↓ you can delete this ↓
    //private void myButton_Click(object sender, RoutedEventArgs e)
    //{
    //    myButton.Content = "Clicked";
    //}
}

Reset aplikasi Anda dengan memilih Build > Membangun Kembali Solusi dari menu atau menekan Ctrl + Shift + B. Kemudian Mulai aplikasi Anda lagi dengan mengklik tombol "Mulai" di toolbar Visual Studio atau dengan menekan F5.

Aplikasi akan diperbarui dan Anda akan melihat Hello world!merah :

Memperbarui bilah judul aplikasi Anda

Tambahkan this.Title = "Hello world!"; ke file code-behind Anda MainWindow.xaml.cs :

public MainWindow()
{
    this.InitializeComponent();
    this.Title = "Hello world!"; // <- this is new
}

Jika memulai ulang aplikasi, Anda sekarang akan melihat Hello world! di isi dan bilah judul:

Selamat! Anda telah membangun aplikasi SDK Aplikasi Windows / WinUI 3 pertama Anda.

Rekap

Inilah yang Anda capai dalam cara ini:

1. Anda mulai menggunakan templat proyek Visual Studio.
2. Anda mengalami penanganan aktivitas yang mengikatButtonClick ke pembaruan UI.
3. Anda membiasakan diri dengan konvensi memisahkan masalah presentasi dari logika bisnis menggunakan file markup XAML yang digabungkan dengan erat dan file kode C# di belakang.
4. Anda meninjau struktur file proyek WinUI 3 default.
5. Anda memodifikasi lapisan presentasi (markup XAML) dan logika bisnis (code-behind) untuk mendukung kontrolTextBlock dalam StackPanel.
6. Anda meninjau dokumen referensi untuk lebih memahami StackPanel properti kontrol.
7. Anda memperbarui bilah judul jendela utama Anda.

File kode lengkap

<!-- MainWindow.xaml -->
<Window
    x:Class="Hello_World.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
    </StackPanel>
</Window>

// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "Hello world!";
        }
    }
}

<!-- App.xaml -->
<Application
    x:Class="Hello_World.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>

// App.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Microsoft.UI.Xaml.Shapes;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();
        }

        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new MainWindow();
            m_window.Activate();
        }

        private Window m_window;
    }
}

FAQ

T: Apa artinya "dibungkus"?

Aplikasi Windows dapat dikirimkan ke pengguna akhir menggunakan berbagai format kemasan aplikasi. Saat bekerja dengan WinUI dan Windows App SDK, aplikasi paket menggunakan MSIX untuk memaketkan aplikasi Anda dengan cara yang menawarkan penginstalan dan pembaruan yang nyaman untuk pengguna akhir. Kunjungi Arsitektur penyebaran dan gambaran umum untuk aplikasi yang bergantung pada kerangka kerja untuk mempelajari lebih lanjut.

Q: Dapatkah saya menggunakan Visual Studio Code untuk membangun aplikasi WinUI?

Meskipun secara teknis memungkinkan, sebaiknya gunakan Visual Studio 2022 untuk membangun aplikasi desktop dengan WinUI dan Windows App SDK. Lihat FAQ pengembang Windows untuk informasi selengkapnya.

Q: Dapatkah saya menggunakan C++ untuk membangun aplikasi WinUI?

Ya! Untuk informasi selengkapnya, lihat Pengantar C++/WinRT.

Terkait

• Aplikasi sampel untuk pengembangan Windows
• Tanya Jawab Umum pengembang Windows
• Glosarium pengembang Windows
• Praktik terbaik pengembangan Windows