C# と WinUI 3 / Windows App SDK を使用して Hello World アプリを構築する

[アーティクル]
05/16/2024

このハウツーでは、Visual Studio 2022 と WinUI 3/Windows App SDK を使用して、起動時に、「Hello World!」と表示される Windows デスクトップアプリを構築します。

ビルド中の「Hello World」アプリ。

このハウツーは初心者を対象としており、Windows デスクトップ開発に精通している必要はありません。

前提条件

このチュートリアルでは、Visual Studio を使用し、WinUI 3 の空のアプリテンプレートを基に構築します。セットアップするには、「WinUI の概要」の手順を実行します。 Visual Studio をインストールし、WinUI を使用してアプリを開発するように構成し、Hello World プロジェクトを作成して、最新バージョンの WinUI があることを確認します。

完了したら、ここに戻って Hello World プロジェクトの詳細を確認し、更新してください。

空のアプリプロジェクトを確認する

Visual Studio の WinUI プロジェクトテンプレートには、アプリをビルドして実行するために必要なものがすべて含まれています。デバッグモードで空のアプリテンプレートを実行すると、次のような対話型ボタンを含むウィンドウが作成されます。

実行中にビルドされたテンプレート化プロジェクト

イベント処理のデモ用 Click Me ボタンをクリックします。

[ここをクリック] ボタン

この場合、ボタンコントロールのクリックイベントが MainWindow.xaml.cs にある myButton_Click イベントハンドラーにバインドされます。

メインウィンドウのコードビハインドファイルにある [ここをクリック] ボタンのイベントハンドラー

MainWindow.xaml.cs には、メインウィンドウの ビジネスロジックに関する懸念事項がコードビハインドファイル形式で含まれていますが、MainWindow.xaml には、プレゼンテーションに関する懸念事項があります。

メインウィンドウのマークアップファイルにある [ここをクリック] ボタンの XML マークアップ

ビジネスロジックとプレゼンテーションに関する懸念を分離することで、データとイベントをバインドし、一貫したアプリケーション開発パターンをして、アプリケーションの UI を作成できます。

プロジェクトのファイル構造

コードを変更する前に、プロジェクトのファイル構造を確認しましょう。

現在、プロジェクトのファイル構造は次のようになっています。

ファイル構造の概要

次の表では、上から下の順番でファイルを説明します。

アイテム	説明
`Solution 'Hello World'`	これは、ソリューションファイルであり、プロジェクトの論理コンテナーです。多くの場合、プロジェクトはアプリですが、クラスライブラリをサポートすることもできます。
`Hello World`	これはプロジェクトファイルであり、アプリファイルの論理コンテナーです。
`Dependencies`	アプリは、フレームワーク (.NET や Windows SDK など) やパッケージ (Windows App 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`	このパッケージマニフェストファイルを使用すると、発行元情報、ロゴ、プロセッサアーキテクチャ、および Windows ストアでのアプリの表示方法を決定するその他の詳細を構成できます。

「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 コントロールとそのカスタマイズ方法について詳しく説明されています。

赤いテキストでHello world! を表示ように StackPanel コントロールを更新しましょう。

<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! が表示されます。

赤い「Hello World!」

アプリのタイトルバーを更新する

MainWindow.xaml.cs コードビハインドファイルに this.Title = "Hello world!"; を追加します。

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

アプリを再起動すると、本文とタイトルバーの両方に Hello world! が表示されます。

ビルド中の「Hello World!」アプリ。

お疲れさまでした。最初の Windows App SDK/WinUI 3 の構築が完了しました。

まとめ

このチュートリアルで実行した内容は次のとおりです。

Visual Studio のプロジェクトテンプレートから開始しました。
Button コントロールの Click イベント UI の更新にバインドするイベントハンドラーが発生しました。
綿密に結合された XAML マークアップファイルとC# コードビハインドファイルをそれぞれ使用して、ビジネスロジックからプレゼンテーションの懸念を分離する規則について理解しました。
既定の WinUI 3 プロジェクト ファイル構造を確認しました。
StackPanel内で、新しいTextBlockコントロールをサポートするためにプレゼンテーション層 (XAML マークアップ) とビジネスロジック (コードビハインド) の両方を修正しました。
StackPanelコントロールのプロパティについて理解を深めるために、リファレンスドキュメントを確認しました。
メインウィンドウのタイトルバーを更新しました。

完全なコード例:

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

よく寄せられる質問

Q:「パッケージ化」とはどういう意味ですか?

Windows アプリは、さまざまなアプリケーションパッケージ形式を使用してエンドユーザーに配信できます。 WinUI 3/Windows App SDK の作業を行う場合、パッケージ化されたアプリは MSIX を使用して、エンドユーザーに便利なインストールと更新プログラムを提供する方法でアプリをバンドルします。詳細については、「フレームワーク依存型アプリのデプロイアーキテクチャと概要」を参照してください。

Q: VS Code を使用して WinUI 3 アプリをビルドできますか?

技術的には可能ですが、Visual Studio 2019/2022 を使用して WinUI 3/Windows App SDK でデスクトップアプリをビルドすることを強くお勧めします。詳細については、「Windows 開発者 FAQ」を参照してください。

Q: C++ を使用して WinUI 3 アプリをビルドできますか?

はい。詳しくは、「C++/WinRT の概要」をご覧ください。

次の方法で共有

C# と WinUI 3 / Windows App SDK を使用して Hello World アプリを構築する

前提条件

空のアプリプロジェクトを確認する

プロジェクトのファイル構造

「Hello World!」を表示する

アプリのタイトルバーを更新する

まとめ

完全なコード例:

よく寄せられる質問

その他のリソース

次の方法で共有

C# と WinUI 3 / Windows App SDK を使用して Hello World アプリを構築する

前提条件

空のアプリ プロジェクトを確認する

プロジェクトのファイル構造

「Hello World!」を表示する

アプリのタイトル バーを更新する

まとめ

完全なコード例:

よく寄せられる質問

関連項目

その他のリソース

空のアプリプロジェクトを確認する

アプリのタイトルバーを更新する