使用 C# 和 WinUI 3/Windows 應用程式 SDK 建置 Hello World 應用程式

在此操作說明中，我們將使用 Visual Studio 2022 和 WinUI 3/Windows 應用程式 SDK 建置 Windows 傳統型應用程式，以在啟動時顯示「Hello world!」：

本操作說明是以初學者為目標，且不會假設您對 Windows 桌面開發很熟悉。

必要條件

本教學課程使用 Visual Studio，並以 WinUI 3 空白應用程式範本建置。 若要設定，請依照開始使用 WinUI 中的指示操作。 您將安裝 Visual Studio，將其設定為使用 WinUI 來開發應用程式，建立 Hello World 專案，並確保您擁有最新版本的 WinUI。

當您完成此操作時，請回到這裡深入瞭解 Hello World 專案，並進行一些更新。

檢閱空白應用程式專案

Visual Studio 中的 WinUI 專案範本包含建置和執行應用程式所需的一切。 [空白應用程式] 範本會建立具有互動式按鈕的視窗，當您以偵錯模式執行時，其看起來會像這樣。

按一下 Click Me 按鈕查看事件處理的示範：

在此情況下，Button 控制項的 Click 事件會繫結至 myButton_Click 中的 MainWindow.xaml.cs 事件處理常式：

在 MainWindow.xaml.cs 中包含了主視窗的商務邏輯，以程式碼後置檔案的形式呈現；而它的呈現層則存在於 MainWindow.xaml 中：

這種將商務邏輯和呈現層分開的方法，讓您可以使用一致的應用程式開發模式，將資料和事件繫結到應用程式的 UI，並從中繫結資料和事件。

專案的檔案結構

讓我們先檢閱專案的檔案結構，再進行程式碼變更。

專案的檔案結構目前看起來像這樣：

下表描述這些檔案，從上到下：

項目	說明
Solution 'Hello World'	這是方案檔案，是您專案的邏輯容器。 專案通常是應用程式，但它們也可以支援類別庫。
Hello World	這是專案檔案，是您應用程式檔案的邏輯容器。
Dependencies	您的應用程式依賴於框架 (如 .NET 和 Windows SDK) 和套件 (如 Windows 應用程式 SDK)。 當您在應用程式中引進更複雜的功能和協力廠商程式庫時，將會在這裡顯示其他相依性。
Properties	根據慣例，WinUI 3 專案會將發佈設定檔和啟動組態檔放在此資料夾中。
PublishProfiles	您的發行設定檔會指定應用程式跨各種平台的發佈組態設定。
launchSettings.json	此檔案可讓您設定透過 執行應用程式時可以使用的dotnet run。
Assets	此資料夾包含您應用程式的標誌、影像和其他媒體資產。
app.manifest	此應用程式資訊清單檔案包含與 Windows 在使用者裝置上安裝應用程式的方式相關的設定。
App.xaml	此標記檔案會指定應用程式相依的共用、可全域存取的資源。
App.xaml.cs	這個程式碼後置檔案代表您應用程式商業邏輯的進入點。 它負責建立和啟動 MainWindow 執行個體。
MainWindow.xaml	此標記檔案包含您應用程式主視窗的呈現層。
MainWindow.xaml.cs	此程式碼後置檔案包含與應用程式主視窗相關聯的商業邏輯。
Package.appxmanifest	此套件資訊清單檔案可讓您設定發行者資訊、標誌、處理器架構和其他詳細資料，以決定您的應用程式在 Microsoft Store 中的顯示方式。

顯示「Hello world!」

若要顯示 「Hello world!」，而不是 [按我] 按鈕，請瀏覽 MainWindow.xaml。 您應該會看到 StackPanel 控制項的 XAML 標記：

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

提示

建置 Windows 應用程式時，您將會經常參考 API 參考文件。 StackPanel 的參考文件會告訴您 StackPanel 控制項及其自訂方式的詳細資訊。

讓我們更新 StackPanel 控制項，以紅色文字顯示 Hello world!：

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

如果您現在嘗試執行應用程式，Visual Studio 會擲回類似以下錯誤：The name 'myButton' does not exist in the current context。 這是因為我們已使用新的控制項來更新呈現層，但我們未在程式碼後置檔案中更新舊控制項的商業邏輯。

瀏覽至 MainWindow.xaml.cs 並刪除 myButton_Click 事件處理常式。 我們可以這麼做，因為我們已將互動式 [Click me] 按鈕取代為靜態 Hello world! 文字。 主視窗的商業邏輯現在看起來應該像這樣：

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

如果您重新啟動應用程式，您應該會看到紅色的 Hello world!：

更新應用程式的標題列

將 this.Title = "Hello world!"; 新增至 MainWindow.xaml.cs 程式碼後置檔案：

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

如果您重新啟動應用程式，則現在應該會在本文和標題列中看到 Hello world!：

恭喜！ 您已建置第一個 Windows 應用程式 SDK /WinUI 3 應用程式。

概括回顧

以下是您在此操作說明中完成的工作：

1. 您從 Visual Studio 的專案範本開始。
2. 您經歷了將控制項事件Click事件處理程式。
3. 您已熟悉使用緊密結合的 XAML 標記檔案和 C# 程式碼後置檔案，將呈現層與商業邏輯分開的慣例。
4. 您已檢閱預設 WinUI 3 專案檔案結構。
5. 您已修改呈現層 (XAML 標記) 和商業邏輯 (程序碼後置)，以支援 TextBlock 中的新StackPanel。
6. 您已檢閱 參考文件，以進一步瞭解StackPanel控制項的屬性。
7. 您已更新主視窗的標題列。

完整程式碼檔案

<!-- 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;
    }
}

常見問題集

問：「已封裝」是什麼意思？

Windows 應用程式可以使用各種應用程式封裝格式傳遞給使用者。 使用 WinUI 和 Windows App SDK 時，已封裝的應用程式 使用 MSIX，以方便使用者安裝和更新的方式組合您的應用程式。 如需深入瞭解，請瀏覽架構相依應用程式的部署架構和概觀。

問：我是否可以使用 VS Code 來建置 WinUI 應用程式？

雖然技術上可行，但我們強烈建議使用 Visual Studio 2022 來建置 WinUI 和 Windows App SDK 的桌上型應用程式。 如需詳細資訊，請參閱 Windows 開發人員常見問題集。

問：是否可以使用C++來建置 WinUI 應用程式？

可以！ 如需詳細資訊，請參閱 C++/WinRT 簡介。

相關

• 適用於 Windows 開發的範例應用程式
• Windows 開發人員常見問題集
• Windows 開發人員詞彙
• Windows 開發最佳做法