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

このチュートリアルでは、Visual Studio統合開発環境 (IDE) でVisual Basicを使用してアプリケーションを作成します。プログラムでは、Windows Presentation Foundation (WPF) UI フレームワークが使用されます。このチュートリアルでは、Visual Studioで使用できるツール、ダイアログボックス、デザイナーの多くについて理解を深めます。

このチュートリアルでは、以下の内容を学習します。

プロジェクトを作成する
ウィンドウの構成とテキストの追加
ボタンとコードを追加する
アプリケーションをデバッグしてテストする
ブレークポイントを使用したデバッグ
リリースバージョンをビルドする

WPFとは

WPF (Windows Presentation Foundation) は、デスクトップクライアントアプリケーションを作成するユーザーインターフェイス (UI) フレームワークです。 WPF開発プラットフォームでは、次のようなさまざまなアプリケーション開発機能がサポートされています。

アプリケーションモデル
リソース
コントロール
Graphics
レイアウト
データバインディング
ドキュメント
セキュリティ

WPFは.NETの一部です。 ASP.NET またはWindows フォームを使用して.NETを使用してアプリケーションを作成したことがある場合は、プログラミングエクスペリエンスをよく理解しておく必要があります。 WPFは、Extensible Application Markup Language XAML を使用して、アプリケーションプログラミング用の宣言型モデルを提供します。詳細については、「WPF .NETの概要を参照してください。

[前提条件]

このチュートリアルを完了するには、Visual Studioが必要です。無料版については、Visual Studioダウンロードを参照してください。

プロジェクトを作成する

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

Visual Studioを開きます。
スタートウィンドウで、[新しいプロジェクト作成] を選択します。
新しいプロジェクトの作成ウィンドウで、WPF を検索し、All languages リストで Visual Basic を選択します。 WPF App (.NET Framework) を選択し、 Next を選択します。
プロジェクトに HelloWPFApp という名前を付けて、[ 作成] を選択します。

Visual Studioは、HelloWPFApp プロジェクトとソリューションを作成します。 ソリューションエクスプローラー は、さまざまなファイルを示します。

WPF デザイナーは、分割ビューにデザインビューと MainWindow.xaml の XAML ビューを表示します。

Visual Studioを開きます。
スタートウィンドウで、[新しいプロジェクト作成] を選択します。
新しいプロジェクトの作成ウィンドウで、WPF を検索し、All languages リストで Visual Basic を選択します。 WPF App (.NET Framework) を選択し、 Next を選択します。
プロジェクトに HelloWPFApp という名前を付けて、[ 作成] を選択します。

Visual Studioは、HelloWPFApp プロジェクトとソリューションを作成します。 ソリューションエクスプローラー は、さまざまなファイルを示します。

WPF デザイナーは、分割ビューにデザインビューと MainWindow.xaml の XAML ビューを表示します。

注

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

ウィンドウの構成とテキストの追加

[プロパティ] ウィンドウを使用すると、プロジェクト項目、コントロール、およびその他の項目のオプションを表示および変更できます。

ソリューションエクスプローラー で、MainWindow.xaml を開きます。
XAML ビューで、 Window.Title プロパティの値を Title="MainWindow" から Title="Greetings" に変更します。
Visual Studio IDEの左側にある Toolbox タブを選択します。表示されない場合は、メニューバーから ViewToolbox を選択するか、CtrlAltX を押してください。
Common WPF Controls を展開するか、検索バーに「Text」と入力してTextBlockを検索します。
TextBlock 項目を選択し、デザイン画面のウィンドウにドラッグします。 TextBlock コントロールは、ドラッグして移動できます。ガイドラインを使用してコントロールを配置します。

ガイドラインが表示されている [Greetings] フォームに配置された TextBlock コントロールを示すスクリーンショット。

XAML マークアップは次の例のようになります。
```
<TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
```
XAML ビューで、TextBlock のマークアップを見つけて、Text 属性を変更します。
```
Text="Select a message option and then choose the Display button."
```
必要に応じて、TextBlock をもう一度中央揃えにします。
[ すべて保存 ] ツールバーボタンを選択して、アプリを保存します。または、アプリを保存するには、メニューバーから [ファイル] [すべて保存] を選択するか、Ctrl キーキーを押します。早期に頻繁に保存することをお勧めします。

ボタンとコードを追加する

アプリケーションでは、2 つのラジオボタンと 1 つのボタンを使用します。これらの手順を使用して追加します。ボタンにVisual Basicコードも追加します。そのコードは、ラジオボタンの選択を参照します。

ツールボックスで RadioButton を見つけます。

Visual Studio 2022 のツールボックスウィンドウのスクリーンショットで、Common WPF Controls の一覧にある RadioButton コントロールが選択されています。
RadioButton 項目を選択し、デザインサーフェイスにドラッグして、2 つの RadioButton コントロールをデザインサーフェイスに追加します。ボタンを選択し、方向キーを使用してボタンを移動します。ボタンを TextBlock コントロールの下に並べて配置します。

TextBlock コントロールと 2 つのラジオボタンを含む Greetings フォームを示すスクリーンショット。
左側の RadioButton コントロールの [プロパティ] ウィンドウで、[プロパティ] ウィンドウの上部にある Name プロパティを HelloButton に変更します。

Visual Studio 2022 の 'HelloButton' ラジオボタンについてのソリューションエクスプローラープロパティウィンドウを示すスクリーンショット
右側の RadioButton コントロールの [プロパティ ] ウィンドウで、 Name プロパティを GoodbyeButton に変更します。

との属性を 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>

XAML ビューで、HelloButton のマークアップを見つけて、IsChecked 属性を追加します。
```
IsChecked="True"
```
値が True の IsChecked 属性は、HelloButton が既定でチェックされることを意味します。この設定は、プログラムが開始された場合でも、ラジオボタンが常に選択されることを意味します。
ツールボックスで、ボタンコントロールを見つけます。次に、RadioButton コントロールの下のデザイン画面にボタンをドラッグします。
XAML ビューで、Button コントロールの Content の値をからに変更します。
```
<Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
```
ウィンドウは次の図のようになります。

TextBlock、RadioButtons が "Hello" と "Goodbye" というラベルの付いた Greetings フォーム、および "Display" というラベルが付いた Button コントロールがすべてフォーム上に配置されていることを示すスクリーンショット。
デザインサーフェイスで、 [Display] ボタンをダブルクリックします。

MainWindow.xaml.vb が開き、イベントにカーソルが表示されます。
```
Private Sub Button_Click(sender As Object, e As RoutedEventArgs)

End Sub
```

次のコードを追加します。

If HelloButton.IsChecked = True Then
    MessageBox.Show("Hello.")
ElseIf GoodbyeButton.IsChecked = True Then
    MessageBox.Show("Goodbye.")
End If

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

次に、アプリケーションをデバッグしてエラーを探し、両方のメッセージボックスが正しく表示されることをテストします。このプロセスのしくみを確認するために、最初の手順では意図的にプログラムにエラーが発生します。

ソリューションエクスプローラー で、MainWindow.xaml を右クリックし、 Rename を選択します。ファイルの名前を Greetings.xaml に変更します。
F5 キーを押すか、[デバッグ]、[デバッグの開始] の順に選択して、デバッガーを起動します。

[ブレークモード] ウィンドウが表示され、[出力] ウィンドウに例外が発生したことが示されます。

"リソース mainwindow.xaml を見つけることができません" という System.IO.Exception メッセージが表示された [Exception Unhandled] ウィンドウを示すスクリーンショット。
[デバッグ] の停止]選択して、デバッガーを停止します。

このセクションの先頭で MainWindow.xaml の名前を Greetings.xaml に変更しました。コードは MainWindow.xaml をアプリケーションのスタートアップ URI として引き続き参照するため、プロジェクトを開始できません。
ソリューションエクスプローラー で、Application.xaml ファイルを開きます。
をに変更します。
デバッガーをもう一度起動します (F5 押します)。これで、アプリケーションの Greetings ウィンドウが表示されます。

TextBlock、RadioButtons、Button コントロールが表示されている [Greetings] ウィンドウのスクリーンショット。[Hello] ラジオボタンが選択されています。
[ Hello ]\(こんにちは\) と [Display ]\(表示\) ボタンを選択し、[ Goodbye]\(さよなら \) と [Display ]\(表示\) ボタンを選択します。右上隅にある閉じるアイコンを使用してデバッグを停止します。

詳細については、「WPF アプリケーションのコンパイル」および「Debug WPF」を参照してください。

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

いくつかのブレークポイントを追加することで、デバッグ中にコードをテストできます。

Greetings.xaml.vbを開き、次の行を選択します。
F9 キーを押すか、[デバッグ]、[ブレークポイントの切り替え] の順に選択して、ブレークポイントを追加します。

エディターウィンドウの左余白のコード行の横に赤い円が表示されます。
次の行を選択します: 。
F9 キーを押してブレークポイントを追加し、F5 キーを押してデバッグを開始します。
[あいさつ] ウィンドウで、[ Hello ] ボタンを選択し、[表示] を選択します。

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

アプリケーションが再び起動します。 "Hello" という単語を含むダイアログが表示されます。
[ OK ] ボタンを選択してダイアログを閉じます。
グリーティングウィンドウで、[さよなら] ラジオボタンを選択し、[表示] ボタンを選択します。

線は黄色で強調表示されています。
F5 キーを選択してデバッグを続行します。ダイアログが表示されたら、[ OK] を選択してダイアログを閉じます。
アプリケーションウィンドウを閉じてデバッグを停止します。
メニューバーで、[デバッグ] を無効にする]選択します。

リリースバージョンをビルドする

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

[ビルドClean ソリューション] を選択して、以前のビルド中に作成された中間ファイルと出力ファイルを削除します。
ツールバーのドロップダウンコントロールを使用して、HelloWPFApp のビルド構成を Debug から Release に変更します。
[ビルド][ビルドするソリューション] を選択します。

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

次のステップ

次の記事に進み、Visual Basicを使用してVisual StudioでWindows フォームアプリを作成する方法について説明します。

Windows フォームアプリを作成します

Visual Studioの詳細については、以下を参照してください。

生産性に関するヒント

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-06