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

Windows App SDK を使用した C# アプリ開発の場合は、[ WinUI アプリケーション開発] を選択します。

Windows App SDK を使用した C# アプリ開発の場合は、[ WinUI アプリケーション開発] を選択します。

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

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

   

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

   

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

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

   

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

   

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

   

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

   

2. <Grid>項目内で、<Buttonの入力を開始します。 Intellisense にはボタン オプションが用意されています。 Tab キーを押して同意します。

   

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

   

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

   

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

   

1. XAML エディターで、Button Content の値を現在の値から "Hello World!" に変更します。

   

2. <Button>要素の開始タグ (Content など、既存の属性の後) にカーソルを置き、「クリック」と入力します。 Intellisense には、Button_Clickと呼ばれる新しいイベント ハンドラーが用意 されます。 次のセクションでは、そのコードを操作します。

   

1. XAML エディターで、Button Content の値を現在の値から "Hello World!" に変更します。

   

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

   

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

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

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

   

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

   

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

   private async void Button_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 = ((FrameworkElement)sender).XamlRoot
       };
       await welcomeDialog.ShowAsync();
   }
   

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();
   }