チュートリアル: XAML と C を使用して Visual Studio で初めての Windows App SDK アプリケーションを作成する#

この Visual Studio 統合開発環境 (IDE) の概要では、Windows 10 以降のデバイスで実行される "Hello World" アプリを作成します。 そのためには、Windows App SDK (WinUI 3) プロジェクト テンプレート、拡張アプリケーション マークアップ言語 (XAML)、および C# プログラミング言語を使用します。

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動して無料でインストールします。

プロジェクトを作成する

まず、WinUI 3 プロジェクトを作成します。 プロジェクトの種類には、何も追加する前に、必要なすべてのテンプレート ファイルが付属しています。

1. Visual Studio を開き、スタート ウィンドウで [新しいプロジェクト の作成]選択します。

2. [新しいプロジェクトの作成] 画面で、検索ボックスに「WinUI」と入力し、[空のアプリ、パッケージ化 (デスクトップの WinUI 3)] 用の C# テンプレートを選択して、[次へ] を選択します。

   

3. プロジェクトに HelloWorldという名前を付け、作成を選択します。

   

   手記

   Visual Studio を初めて使用して Windows App SDK アプリを作成する場合は、[の設定] ダイアログ ボックスが表示されることがあります。 [開発者モード ] を選択し、次に [はい ] を選択します。
   
   
   
   Visual Studio によって追加の開発者モード パッケージがインストールされます。 パッケージのインストールが完了したら、[設定] ダイアログ ボックスを閉じます。

アプリケーションを作成する

開発を始めましょう。 ボタン コントロールを追加し、そのボタンにアクションを追加し、"Hello World" アプリを実行して外観を確認します。

デザイン キャンバスにボタンを追加する

1. ソリューション エクスプローラーで、MainWindow.xaml ダブルクリックして XAML マークアップ エディターを開きます。

   

   XAML エディター では、マークアップを追加または変更できます。 UWP プロジェクトとは異なり、WinUI 3 には デザイン ビューはありません。

   

2. ウィンドウのルートにある StackPanel にネストされた Button コントロールをレビューします。

   

ボタンのラベルを変更する

1. XAML エディターので、[ボタンのコンテンツ] の値を [クリックしてください] から [Hello World!] に変更します。

   

2. ボタンに Click イベント ハンドラー myButton_Click 指定されていることにも注意してください。 これについては、次の手順で説明します。

   

イベント ハンドラーを変更する

"イベント ハンドラー" は複雑に思われますが、イベントが発生したときに呼び出されるコードの名前にすぎません。 この場合、"Hello World!" ボタンによってトリガーされるアクションが追加されます。

1. ソリューション エクスプローラー で、コードビハインド ページの MainWindow.xaml.csをダブルクリックします。

2. 開いた C# エディター ウィンドウでイベント ハンドラー コードを編集します。

   ここで興味深いものが得られます。 既定のイベント ハンドラーは次のようになります。

   

   これを変更してみましょう。次のようになります。

   

   コピーして貼り付けるコードを次に示します。

   private async void myButton_Click(object sender, RoutedEventArgs e)
   {
       var welcomeDialog = new ContentDialog()
       {
           Title = "Hello from HelloWorld",
           Content = "Welcome to your first Windows App SDK app.",
           CloseButtonText = "Ok",
           XamlRoot = myButton.XamlRoot
       };
       await welcomeDialog.ShowAsync();
   }
   

私たちは何をしましたか?

このコードでは、ContentDialog コントロールを使用して、現在のウィンドウ内のモーダル ポップアップ コントロールにウェルカム メッセージを表示します。 (Microsoft.UI.Xaml.Controls.ContentDialogの使用の詳細については、「ContentDialog クラスの」を参照してください)。

アプリケーションを実行する

次に、"Hello World" Windows アプリ SDK アプリをビルド、デプロイ、起動して、その外観を確認します。 その方法を次に示します。

1. [再生] ボタン (HelloWorld (パッケージ) テキスト) を使用して、ローカル コンピューターでアプリケーションを起動します。

   

   (または、メニュー バーから [デバッグ] >[デバッグの開始]選択するか、F5 キー 押してアプリを起動することもできます)。

2. スプラッシュ画面が消えた直後に表示されるアプリを表示します。 アプリは次の画像のようになります。

   

3. Hello World ボタンを選択します。

   Windows 10 以降のデバイスに、"Hello from HelloWorld" というタイトルの "最初の Windows App SDK アプリへようこそ" というメッセージが表示されます。[ok] クリックして、メッセージを閉じます。

   

4. アプリを閉じるには、ツール バーの [デバッグの停止] ボタンを選択します。 (または、メニュー バー [デバッグ]>[デバッグの停止] を選択するか、Shift キー 押しながら F5 キーを押) を選択します。

次の手順

このチュートリアルを完了しておめでとうございます。 Windows App SDK、WinUI 3、および Visual Studio IDE に関するいくつかの基本を学習していただければ幸いです。 詳細については、次のチュートリアルに進んでください。

関連項目

• Windows 用アプリの作成: 開発テクノロジ の選択
• Windows App SDK の概要
• Windows App SDK/WinUI 3 サンプル