チュートリアル: C# でシンプルな WPF アプリケーションを作成する

適用対象:Visual Studio Visual Studio for Mac Visual Studio Code

このチュートリアルを完了すると、Visual Studio を使用してアプリケーションを開発する際に使用できるさまざまなツール、ダイアログ ボックス、およびデザイナーの使用方法を習得できます。 "Hello, World" アプリケーションの作成、UI の設計、コードの追加、エラーのデバッグを行いながら、統合開発環境 (IDE) での作業方法について学習します。

前提条件

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

WPF とは

WPF (または Windows Presentation Foundation) は、デスクトップ クライアント アプリケーションを作成する 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 6.0 (長期的なサポート)] が既に選択されているはずです。 それ以外の場合は、 [.NET 6.0 (長期的なサポート)] を選択します。 次に、 [作成] を選択します。

   

Visual Studio は HelloWPFApp というプロジェクトとソリューションを作成し、ソリューション エクスプローラーは各種ファイルを表示します。 WPF デザイナーには、MainWindow.xaml のデザイン ビューと XAML ビューが分割ビューで表示されます。 分割線をスライドして、それぞれのビューの表示範囲を増減できます。 ビジュアル ビューか XAML ビューの一方のみを表示することも選択できます。

注意

XAML (eXtensible Application Markup Language) について詳しくは、WPF のための XAML の概要に関するページをご覧ください。

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

ユーザー インターフェイス (UI) のデザイン

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

このアプリケーションに、次の 3 種類のコントロールを追加します: TextBlock コントロール、2 つの RadioButton コントロール、Button コントロール。

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>
   

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

1. XAML ビューで、TextBlock のマークアップを探し、Text 属性を TextBox から 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. RadioButton 項目を選択してデザイン サーフェイス上のウィンドウにドラッグし、RadioButto コントロールを 2 つデザイン サーフェイスに追加します。 TextBlock コントロールの下にボタンが並んで表示されるように、ボタンを移動します (ボタンを選択し、方向キーを使います)。 ガイドラインを使用して、コントロールを配置できます。

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

   

3. 左側の RadioButton コントロールの [プロパティ] ウィンドウで、 [Name] プロパティ ( [プロパティ] ウィンドウの一番上のプロパティ) を HelloButtonに変更します。

   

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

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

各オプション ボタンの表示テキストを追加する

1. XAML で、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 コントロールです。

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

1. [ツールボックス] で、 Button コントロールを探し、デザイン サーフェイスの RadioButton コントロールの下に追加します。デザイン ビュー内のフォームにドラッグすると追加されます。 ガイドラインを使用すると、コントロールを中央に配置しやすくなります。

2. XAML ビューで、Button コントロールの [Content] の値を 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>
   

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

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

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

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

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

2. 次のコードを入力します。

   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. [Greetings] ウィンドウで、 [Hello] オプション ボタンを選択してから、 [Display] ボタンを選択します。

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

   

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

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

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

8. [Greetings] ウィンドウで、 [Goodbye] オプション ボタンを選択し、 [Display] ボタンを選択します。

   MessageBox.Show("Goodbye.") という行が黄色で強調表示されます。

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

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

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

UI 要素の表現を表示する

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

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

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

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

2. ツールバー上のドロップダウン コントロール (現時点で [デバッグ] になっている) を使って、HelloWPFApp のビルド構成を [デバッグ] から [リリース] に変更します。

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

これでこのチュートリアルは完了です。 ビルドした .exe は、ソリューションとプロジェクトのディレクトリ ( ...\HelloWPFApp\HelloWPFApp\bin\Release) の下にあります。

次の手順

これでこのチュートリアルは完了です。 さらに詳しく学習するには、引き続き以下のチュートリアルをご覧ください。

さらに WPF のチュートリアルを続ける

関連項目

• 生産性に関するヒント