チュートリアル: C# または Visual Basic を使用する Visual Studio IDE の調査

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

This topic contains the following sections:

Configure the IDE

簡単なアプリケーションの作成

アプリケーションのデバッグとテスト

[!メモ]

このチュートリアルは、Visual Studio 2012 Professional Edition に基づいています。ユーザー インターフェイス要素の一部は、お使いの Visual Studio では名前や場所が異なる場合があります。これらの要素は、使用する Visual Studio のエディションとその設定によって決まります。設定の詳細については、「Visual Studio の設定」を参照してください。

Configure the IDE

When you start Visual Studio for the first time, you must choose a settings combination that applies a set of pre-defined customizations to the IDE.各設定の組み合わせは、アプリケーションを簡単に開発できるように設計されています。

Figure 1: Choose Default Environment Settings dialog box

このチュートリアルでは、[全般的な開発設定] を適用しています。この設定では、IDE に最小限のカスタマイズが適用されます。You can change your settings combination by using the Import and Export Settings Wizard.詳細については、「方法: 選択した設定を変更する」を参照してください。

Visual Studio を開くと、ツール ウィンドウ、メニューとツール バー、およびメイン ウィンドウ領域を確認できます。Tool windows are docked on the left and right sides of the application window, with Quick Launch, the menu bar, and the standard toolbar at the top.アプリケーション ウィンドウの中央には、スタート ページが表示されます。ソリューションまたはプロジェクトが読み込まれると、この領域にはエディターとデザイナーが表示されます。When you develop an application, you’ll spend most of your time in this central area.

Figure 2: Visual Studio IDE

[オプション] ダイアログ ボックスを使用すると、Visual Studio をさらにカスタマイズできます。たとえば、エディターのテキストのフォント フェイスとサイズや IDE の配色テーマを変更できます。Depending on the settings combination that you’ve applied, some items in that dialog box might not appear automatically.You can make sure that all possible options appear by choosing the Show all settings check box.

Figure 3: Options dialog box

In this example, you’ll change the color theme of the IDE from light to dark.

To change the color theme of the IDE

1. Open the Options dialog box.

   

2. [配色テーマ] を [濃色] に変更して、[OK] をクリックします。

   

The colors in Visual Studio should match the following image:

このチュートリアルの残りの部分で使用する配色テーマは淡色テーマです。IDE のカスタマイズの詳細については、「開発環境のカスタマイズ」を参照してください。

簡単なアプリケーションの作成

プロジェクトの作成

When you create an application in Visual Studio, you first create a project and a solution.この例では、Windows Presentation Foundation ソリューションを作成します。

WPF プロジェクトを作成するには

1. 新しいプロジェクトを作成します。メニュー バーで [ファイル]、[新規]、[プロジェクト] の順にクリックします。

   

   また、[クイック起動] ボックスに「新しいプロジェクト」と入力しても、同じことができます。

   

2. Visual Basic または Visual C# の [WPF アプリケーション] テンプレートを選択し、プロジェクトに HelloWPFApp という名前を付けます。

   

   OR

   

HelloWPFApp プロジェクトとソリューションが作成され、さまざまなファイルがソリューション エクスプローラーに表示されます。WPF デザイナーには、MainWindow.xaml のデザイン ビューと XAML ビューが分割ビューで表示されます (詳細については、「Windows フォーム開発者向け WPF デザイナー」を参照してください)。The following items appear in Solution Explorer:

図 5: プロジェクト項目

プロジェクトは、作成後にカスタマイズできます。[プロパティ] ウィンドウを使用すると、アプリケーションのプロジェクト項目やコントロールなどの項目のオプションを表示および変更できます。プロジェクトのプロパティおよびプロパティ ページを使用すると、プロジェクトおよびソリューションのオプションを表示および変更できます。

MainWindow.xaml の名前を変更するには

1. 次の手順では、MainWindow にもっと具体的な名前を付けます。ソリューション エクスプローラーで、MainWindow.xaml を選択します。ウィンドウの下にそのファイルの [プロパティ] ウィンドウが表示されます。[プロパティ] ウィンドウが表示されない場合は、ソリューション エクスプローラーで MainWindow.xaml を選択し、右クリックしてショートカット メニューを開き、[プロパティ] を選択します。[File Name] プロパティを Greetings.xaml に変更します。

   

   ソリューション エクスプローラーに表示されているこのファイルの名前が Greetings.xaml になり、MainWindow.xaml.vb または MainWindow.xaml.cs の名前が Greetings.xaml.vb または Greetings.xaml.cs になります。

2. ソリューション エクスプローラーで、Greetings.xaml をデザイナー ビューで開き、ウィンドウのタイトル バーを選択します。

3. [プロパティ] ウィンドウで、[Title] プロパティの値を Greetings に変更します。

   注意
   この変更により、エラーが発生します。後の手順で、このエラーをデバッグして修正する方法を学習します。

MainWindow.xaml のタイトル バーに Greetings と表示されます。

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

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

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

1. [ツールボックス] ウィンドウを開きます。デザイナー ウィンドウの左側に表示されます。また、[表示] メニューから開くことや、Ctrl キーと Alt キーを押しながら X キーを押して開くこともできます。

2. [ツールボックス] で、TextBlock コントロールを探します。

   

3. TextBlock コントロールをデザイン サーフェイスに追加し、ウィンドウの上部付近の中央にコントロールを配置します。

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

図 7: TextBlock コントロールが配置されている Greetings ウィンドウ

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

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

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

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

2. デザイン ビューで TextBlock が拡張されない場合は、テキストがすべて表示されるように TextBlock コントロールを拡大します。

3. 変更内容を保存します。

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

オプション ボタンを追加するには

1. [ツールボックス] で、RadioButton コントロールを探します。

   

2. 2 個の RadioButton コントロールをデザイン サーフェイスに追加し、TextBlock コントロールの下に横に並んで表示されるように移動します。

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

   図 8: Greetings ウィンドウの RadioButton

   

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

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

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

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

1. デザイン サーフェイスで、RadioButton1 のショートカット メニューを開き、[テキストの編集] を選択し、「Hello」と入力します。

2. RadioButton2 のショートカット メニューを開き、[テキストの編集] を選択し、「Goodbye」と入力します。

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

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

1. [ツールボックス] で、Button コントロールを探し、それをデザイン サーフェイスの RadioButton コントロールの下に追加します。

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

   マークアップは、次の例のようになります。<Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

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

図 9: Greetings の最後の UI

Display ボタンのコードの追加

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

メッセージ ボックスを表示するコードの追加

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

   Greetings.xaml.vb または Greetings.xaml.cs が開き、Button_Click イベントにカーソルが表示されます。また、次のようにクリック イベント ハンドラーを追加することもできます。

   Visual Basic では、イベント ハンドラーは次のようになります。

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

   Visual C# では、イベント ハンドラーは次のようになります。

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

2. Visual Basic の場合は、次のコードを入力します。

   If RadioButton1.IsChecked = True Then
       MessageBox.Show("Hello.")
   Else RadioButton2.IsChecked = True
       MessageBox.Show("Goodbye.")
   End If
   

   Visual C# の場合は、次のコードを入力します。

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

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

アプリケーションのデバッグとテスト

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

エラーの検出と修正

この手順では、前にメイン ウィンドウの XAML ファイルの名前を変更することで引き起こしたエラーを見つけます。

デバッグを開始し、エラーを見つけるには

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

   

   ダイアログ ボックスが表示され、IOException が発生し、リソース 'mainwindow.xaml' を見つけることができないことが示されます。

2. [OK] を選択し、デバッガーを停止します。

   

このチュートリアルの最初で Mainwindow.xaml の名前を Greetings.xaml に変更しましたが、このソリューションではアプリケーションのスタートアップ URI として Mainwindow.xaml が指定されたままになっているため、プロジェクトを起動できません。

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

1. ソリューション エクスプローラーで、App.xaml ファイル (C# プロジェクトの場合) または Application.xaml ファイル (Visual Basic プロジェクトの場合) を XAML ビューで開きます (デザイン ビューで開くことはできません)。

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

デバッガーを再度起動します。アプリケーションの Greetings ウィンドウが表示されます。

ブレークポイントを使用してデバッグするには

ブレークポイントをいくつか追加して、デバッグ中にコードをテストできます。ブレークポイントを追加するには、メニュー バーで [デバッグ]、[ブレークポイントの設定/解除] の順に選択するか、中断するコード行の横のエディター ウィンドウの左端の余白をクリックします。

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

1. Greetings.xaml.vb または Greetings.xaml.cs を開き、MessageBox.Show("Hello.") という行を選択します。

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

   

   A red circle appears next to the line of code in the far left margin of the editor window.

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. Choose the SHIFT + F5 keys to stop debugging.

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

Build a release version of the application

Now that you’ve verified that everything works, you can prepare a release build of the application.

To clean the solution files and build a release version

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

   

2. HelloWPFApp のビルド構成を [デバッグ] から [リリース] に変更します。

   

3. ソリューションをビルドします。

   

Congratulations on completing this walkthrough!If you want to explore more examples, see Visual Studio のサンプル.

参照

概念

Visual Studio 2012 の新機能

Visual Studio の概要

Visual Studio の生産性に関するヒント