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

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

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

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

WPF とは

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

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

[前提条件]

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

プロジェクトを作成する

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

1. Visual Studio を開きます。

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

   

3. [新しいプロジェクトの作成] ウィンドウで、"WPF" を検索し、[すべての言語] ドロップダウン リストで [Visual Basic] を選択します。 [WPF アプリ (.NET Framework)]、[次へ] の順に選択します。

   

4. プロジェクトに HelloWPFApp という名前を付けて、[ 作成] を選択します。

   Visual Studio によって HelloWPFApp プロジェクトとソリューションが作成されます。 ソリューション エクスプローラー さまざまなファイルが表示されます。

   

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

注

eXtensible Application Markup Language (XAML) の詳細については、「 WPF の XAML の概要」を参照してください。

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

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

1. ソリューション エクスプローラーでMainWindow.xaml を開きます。

2. XAML ビューで、 Window.Title プロパティの値を Title="MainWindow" から Title="Greetings" に変更します。

3. Visual Studio IDE の左側で、[ツールボックスの ] タブ 選択します。表示されない場合は、メニュー バーから [>選択するか、Ctrl ++をします。

4. [共通 WPF コントロール] を展開するか、検索バーに「Text」と入力して TextBlock を検索します。

   

5. TextBlock 項目を選択し、デザイン画面のウィンドウにドラッグします。 TextBlock コントロールは、ドラッグして移動できます。 ガイドラインを使用してコントロールを配置します。

   

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

   <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   

6. XAML ビューで、TextBlock のマークアップを見つけて 、Text 属性を変更します。

   Text="Select a message option and then choose the Display button."
   

   必要に応じて TextBlock をもう一度中央揃えする

7. [ すべて保存 ] ツール バー ボタンを選択して、アプリを保存します。 または、アプリを保存するには、メニュー バーから [ファイル] >[すべて保存] を選択するか、Ctrl キー++キーを押します。 早期に頻繁に保存することをお勧めします。

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

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

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

   

2. RadioButton 項目を選択し、デザイン サーフェイスにドラッグして、2 つの RadioButton コントロールをデザイン サーフェイスに追加します。 ボタンを選択し、方向キーを使用してボタンを移動します。 ボタンを TextBlock コントロールの下に並べて配置します。

   

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

   

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

5. とHelloButtonの GoodbyeButton 属性を XAML で"Hello"および"Goodbye"に更新します。

   <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>
   

6. XAML ビューで、HelloButton のマークアップを見つけて 、IsChecked 属性を追加します。

   IsChecked="True"
   

   値が True の IsChecked 属性は、HelloButton が既定でチェックされることを意味します。 この設定は、プログラムが開始された場合でも、ラジオ ボタンが常に選択されることを意味します。

7. ツールボックスでボタン コントロールを見つけ、RadioButton コントロールの下のデザインサーフェイスにボタンをドラッグします。

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

   <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
   

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

   

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

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

   Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

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

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

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

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

1. ソリューション エクスプローラーでMainWindow.xaml を右クリックし、[名前の変更] を選択します。 ファイルの名前を Greetings.xaml に変更します。

2. F5 キーを押すか、[デバッグ]、[デバッグの開始] の順に選択して、デバッガーを起動します。

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

   

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

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

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

5. StartupUri="MainWindow.xaml" を StartupUri="Greetings.xaml" に変更します。

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

   

7. [ Hello ]\(こんにちは\) と [Display ]\(表示\) ボタンを選択し、[ Goodbye]\(さよなら \) と [Display ]\(表示\) ボタンを選択します。 右上隅にある閉じるアイコンを使用してデバッグを停止します。

詳細については、「WPF アプリケーション (WPF) のビルドと WPF のデバッグする」を参照してください。

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

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

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

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

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

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. メニュー バーで、[デバッグ] >を無効にする]選択します。

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

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

1. [ビルド>Clean ソリューション] を選択して、以前のビルド中に作成された中間ファイルと出力ファイルを削除します。

2. ツール バーのドロップダウン コントロールを使用して、HelloWPFApp のビルド構成を Debug から Release に変更します。

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

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

次のステップ

Visual Basic を使用して Visual Studio で Windows フォーム アプリを作成する方法については、次の記事に進んでください。

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

関連リンク

Visual Studio の詳細については、次のリソースを参照してください。

• 生産性に関するヒント