チュートリアル: C を使用して WPF アプリケーションを作成する#

このチュートリアルでは、Visual Studio でアプリケーションを開発するときに使用できるツール、ダイアログ ボックス、デザイナーの多くについて理解します。 "Hello, World" アプリケーションを作成し、ユーザー インターフェイスを設計し、コードを追加し、エラーをデバッグします。 同時に、Visual Studio 統合開発環境 (IDE) での作業についても説明します。

• IDE を構成する
• プロジェクトを作成する
• ユーザー インターフェイスを設計する
• アプリケーションをデバッグしてテストする

前提 条件

• Visual Studio をお持ちでない場合は、Visual Studio のダウンロード に移動して無料でインストールしてください。
• .NET デスクトップ開発 ワークロードがインストールされていることを確認します。 この構成は、Visual Studio インストーラーで確認できます。
• このチュートリアルでは、.NET Framework または .NET Core を使用できます。 .NET Core は、より新しく最新のフレームワークです。 .NET Core には、Visual Studio 2019 バージョン 16.3 以降が必要です。

Windows Presentation Foundation とは

Windows Presentation Foundation (WPF) は、デスクトップ クライアント アプリケーションを作成するユーザー インターフェイス (UI) フレームワークです。 WPF 開発プラットフォームでは、アプリケーション モデル、リソース、コントロール、グラフィックス、レイアウト、データ バインディング、ドキュメント、セキュリティなど、さまざまなアプリケーション開発機能がサポートされています。

WPF は .NET の一部です。 以前に ASP.NET または Windows フォームを使用して .NET を使用してアプリケーションをビルドした場合、プログラミング エクスペリエンスは使い慣れているはずです。 WPF では、Extensible Application Markup Language (XAML) を使用して、アプリケーション プログラミング用の宣言型モデルを提供します。 詳細については、「デスクトップ ガイド (WPF .NET)を参照してください。

IDE を構成する

Visual Studio を起動すると、スタート ウィンドウが開きます。 [コードなしで続行] を選択して、開発環境を開きます。 ツール ウィンドウ、メニューとツール バー、メイン ウィンドウ領域が表示されます。 ツール ウィンドウは、アプリケーション ウィンドウの側面にドッキングされます。 検索ボックス、メニュー バー、標準ツール バーが上部にあります。 ソリューションまたはプロジェクトを読み込むと、エディターとデザイナーがアプリケーション ウィンドウの中央の領域に表示されます。 アプリケーションを開発するときは、ほとんどの時間をこの中央の領域で過ごします。

プロジェクトを作成する

Visual Studio でアプリケーションを作成するときは、最初にプロジェクトとソリューションを作成します。 この例では、Windows Presentation Foundation (WPF) プロジェクトを作成します。

1. Visual Studio を開きます。

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

   

3. [新しいプロジェクト の作成] 画面で、WPFを検索します。 [WPF アプリケーション ] を選択し、[次 ] を選択します。

   

4. 次の画面で、プロジェクトに「HelloWPFApp」という名前を付け、「次へ」を選択します。

   

5. [追加情報 ウィンドウで、ターゲット フレームワーク .NET 8.0 が選択されていることを確認します。 次に、[作成] を選択します。

   

Visual Studio によって HelloWPFApp プロジェクトとソリューションが作成されます。 ソリューション エクスプローラー さまざまなファイルが表示されます。 WPF デザイナー は、分割ビューにデザイン ビューと MainWindow.xaml の XAML ビューを表示します。 スプリッターをスライドして、どちらかのビューの多かれ少なかれ表示することができます。 ビジュアル ビューのみを表示することも、XAML ビューのみを表示することもできます。

手記

拡張アプリケーション マークアップ言語 (XAML) の詳細については、「WPF の XAML の概要参照してください。

プロジェクトを作成したら、カスタマイズできます。 これを行うには、表示 メニューから プロパティ ウィンドウの を選択するか、F4 押します。 その後、アプリケーション内のプロジェクト項目、コントロール、およびその他の項目のオプションを表示および変更できます。

ユーザー インターフェイスを設計する

デザイナーが開いていない場合は、MainWindow.xaml を選択し、Shift +F7選択してデザイナーを開きます。

このチュートリアルでは、このアプリケーションに 3 種類のコントロール (TextBlock コントロール、2 つの RadioButton コントロール、Button コントロール) を追加します。

TextBlock コントロールを追加する

TextBlock を追加するには、次の手順に従います。

1. Ctrl+Q を選択して検索ボックスをアクティブにし、「ツールボックス」入力します。 結果リストから [表示] > [ツールボックス] を選択します。

2. ツールボックスで、の [共通 WPF コントロール] ノードを展開して、TextBlock コントロールを表示します。

   

3. TextBlock コントロールをデザイン サーフェイスに追加します。 TextBlock 項目を選択し、デザイン 画面のウィンドウにドラッグします。 ウィンドウの上部付近にコントロールを中央揃えします。 ガイドラインを使用して、コントロールを中央に配置できます。

   ウィンドウは次の画像のようになります。

   

   XAML マークアップは次の例のようになります。

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   </Grid>
   

テキスト ブロック内のテキストをカスタマイズする

TextBlock に表示されるテキストを変更できます。

1. XAML ビューで、TextBlock のマークアップを見つけて、Text 属性を TextBlock から Select a message option and then choose the Display button. に変更します。

   XAML マークアップは次の例のようになります。

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
   </Grid>
   

2. TextBlock をもう一度中央揃えし、Ctrl +S選択するか、ファイル メニュー項目を使用して変更を保存します。

ラジオ ボタンを追加する

次に、2 つの RadioButton コントロールをフォームに追加します。

1. ツールボックスで、RadioButton コントロールを見つけます。

   

2. デザイン サーフェイスに 2 つの RadioButton コントロールを追加します。 RadioButton 項目を選択し、デザイン画面のウィンドウにドラッグします。 ボタンを選択し、方向キーを使用してボタンを移動します。 ボタンが TextBlock コントロールの下に並んで表示されるように配置します。 ガイドラインを使用して、コントロールを配置できます。

   ウィンドウは次のようになります。

   

3. 左側の RadioButton コントロールの プロパティ ウィンドウの上部にある Name プロパティを HelloButtonに変更します。

   

4. 右の RadioButton コントロールの プロパティ ウィンドウで、名前 プロパティを GoodbyeButtonに変更し、変更を保存します。

各ラジオ ボタンに表示テキストを追加する

次に、各 RadioButton コントロールの表示テキストを追加します。 次の手順では、RadioButton コントロールの Content プロパティを更新します。

• XAML 内で 2 つのラジオ ボタン HelloButton および GoodbyeButton の Content 属性を "Hello" と "Goodbye" に更新します。 XAML マークアップは、次の例のようになります。

  <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
       <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
       <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
  </Grid>
  

既定でチェックされるようにラジオ ボタンを設定する

この手順では、2 つのラジオ ボタンのいずれかが常に選択されるように、HelloButton を既定でオンに設定します。

1. XAML ビューで、HelloButton のマークアップを見つけます。

2. IsChecked 属性を追加し、Trueに設定します。 具体的には、IsChecked="True"を追加します。

   XAML マークアップは、次の例のようになります。

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

ボタン コントロールを追加する

最後に追加する UI 要素は、Button コントロールです。

1. ツールボックスで、ボタン コントロールを探します。 デザイン ビューでフォームにドラッグして、RadioButton コントロールの下にあるデザイン サーフェイスに追加します。 ガイドラインは、コントロールを中央揃えするのに役立ちます。

2. XAML ビューで、Button コントロールの コンテンツ の値を Content="Button" から Content="Display"に変更し、変更を保存します。

   ウィンドウは次のスクリーンショットのようになります。

   

   XAML マークアップは、次の例のようになります。

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
   </Grid>
   

表示ボタンにコードを追加する

このアプリケーションを実行すると、ユーザーがラジオ ボタンを選択した後、表示 ボタンを選択すると、メッセージ ボックスが表示されます。 1 つのメッセージ ボックスが Hello 用に表示され、もう 1 つのメッセージ ボックスが Goodbye 用に表示されます。 この動作を作成するには、MainWindow.xaml.csの Button_Click イベントにコードを追加します。

1. デザイン サーフェイスで、[Display] ボタンをダブルクリックします。

   MainWindow.xaml.cs が開き、Button_Click イベントにカーソルが表示されます。

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   [表示] ボタンをダブルクリックすると、Click="Button_Click" が XAML に追加されます。

   XAML マークアップは、次の例のようになります。

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
   </Grid>
   

2. Button_Click の波括弧内に、次のコードを追加します。

   if (HelloButton.IsChecked == true)
   {
        MessageBox.Show("Hello.");
   }
   else if (GoodbyeButton.IsChecked == true)
   {
       MessageBox.Show("Goodbye.");
   }
   

3. アプリケーションを保存します。

アプリケーションをデバッグしてテストする

次に、アプリケーションをデバッグしてエラーを探し、両方のメッセージ ボックスが正しく表示されることをテストします。 次の手順では、デバッガーをビルドして起動する方法について説明します。 詳細については、「WPF アプリケーション (WPF) のビルドと WPF のデバッグする」を参照してください。

MainWindow.xaml の名前を変更する

MainWindow に、より具体的な名前を付けます。 ソリューション エクスプローラー で、MainWindow.xaml を右クリックし、[名前の変更] を選ぶ。 ファイルの名前を Greetings.xaml に変更します。 この例では、この変更により、デバッグのデモンストレーションに後で使用されるエラーが作成されます。

エラーを見つけて修正する

この手順では、MainWindow.xaml ファイルの名前を変更することで、以前に発生したエラーを見つけます。

デバッグを開始してエラーを見つける

1. デバッガーを起動するには、F5 を選択するか、デバッグ を選択した後、デバッグの開始 を選択します。

   ブレーク モード ウィンドウが表示され、[出力] ウィンドウに IOException が発生したことが示されます。リソース mainwindow.xamlが見つかりません。

   

2. [デバッグ] >[デバッグの停止]選択して、デバッガーを停止します。

MainWindow.xaml の名前を Greetings.xamlに変更しましたが、コードはアプリケーションのスタートアップ URI として MainWindow.xaml を参照しているため、プロジェクトを開始できません。

スタートアップ URI として Greetings.xaml を指定する

1. ソリューション エクスプローラー で、App.xaml ファイルを開きます。

2. StartupUri="MainWindow.xaml" を StartupUri="Greetings.xaml"に変更し、変更を保存します。

省略可能な手順として、この新しい名前に一致するようにアプリケーション ウィンドウのタイトルを変更する混乱を避けることができます。

1. ソリューション エクスプローラーで、名前を変更した Greetings.xaml ファイルを開きます。

2. Window.Title プロパティの値を Title="MainWindow" から Title="Greetings"に変更し、変更を保存します。

デバッガーをもう一度起動します (F5 押します)。 これで、アプリケーションの Greetings ウィンドウが表示されます。

デバッグを停止するには、アプリケーション ウィンドウを閉じます

ブレークポイントを使用したデバッグ

いくつかのブレークポイントを追加することで、デバッグ中にコードをテストできます。 ブレークポイントを追加するには、[デバッグ] >[ブレークポイントの切り替え]を選択するか、中断を発生させるコード行の横にあるエディターの左余白をクリックするか、F9 押します。

ブレークポイントを追加する

1. Greetings.xaml.csを開き、次の行を選択します: MessageBox.Show("Hello.")

2. [デバッグ]、[ブレークポイントの設定/解除] の順に選択して、メニューからブレークポイントを追加します。

   エディター ウィンドウの左端の余白のコード行の横に赤い円が表示されます。

3. 次の行を選択します: MessageBox.Show("Goodbye.")。

4. F9 キーを押してブレークポイントを追加し、F5 選択してデバッグを開始します。

5. [あいさつ] ウィンドウで、[Hello] ラジオ ボタンを選択し、[表示] ボタンを選択します。

   線 MessageBox.Show("Hello.") は黄色で強調表示されています。 IDE の下部にある [自動変数]、[ローカル]、[ウォッチ] ウィンドウは、左側にまとめて配置されています。 呼び出し履歴の、ブレークポイントの、例外設定の、コマンド、イミディエイト、および 出力 ウィンドウが右側にドッキングされます。

   

6. メニュー バーで、[デバッグ] >[ステップ アウト]選択します。

   アプリケーションが実行を再開すると、"Hello" というメッセージ ボックスが表示されます。

7. メッセージ ボックス [OK] を選択して閉じます。

8. グリーティング ウィンドウで、[さよなら] ラジオ ボタンを選択し、[表示] ボタンを選択します。

   線 MessageBox.Show("Goodbye.") は黄色で強調表示されています。

9. F5 キーを選択してデバッグを続行します。 メッセージ ボックスが表示されたら、メッセージ ボックス [OK] を選択して閉じます。

10. デバッグを停止するには、アプリケーション ウィンドウを閉じます。

11. メニュー バーで、[デバッグ] >[すべてのブレークポイントを無効にする]選択します。

UI 要素の表現を表示する

実行中のアプリでは、ウィンドウの上部にウィジェットが表示されます。 ウィジェットは、便利なデバッグ機能にすばやくアクセスできるランタイム ヘルパーです。 最初のボタンを選択 ライブ ビジュアル ツリーに移動します。 ページのすべてのビジュアル要素を含むツリーを含むウィンドウが表示されます。 ノードを展開して、追加したボタンを見つけます。

アプリケーションのリリース バージョンをビルドする

すべてが機能することを確認したら、アプリケーションのリリース ビルドを準備できます。

1. メイン メニュー ビルド>クリーン ソリューション を選択して、以前のビルド中に作成された中間ファイルと出力ファイルを削除します。 この手順は必要ありませんが、デバッグ ビルドの出力がクリーンアップされます。

2. ツール バーのドロップダウン コントロールを使用して、HelloWPFApp のビルド構成を Debug から Release に変更します。 現在、"デバッグ" と表示されています。

3. [ビルド]>[ソリューションのビルド] を選択して、ソリューションをビルドします。

このチュートリアルを完了しておめでとうございます。 あなたのソリューションとプロジェクト ディレクトリ (...\HelloWPFApp\HelloWPFApp\bin\Release) の中に、ビルドした .exe が見つかります。

関連コンテンツ

• 生産性に関するヒント

次の手順

このチュートリアルを完了しておめでとうございます。 さらに詳しく学習するには、次のチュートリアルに進んでください。

その他の WPF チュートリアルの に進む