方法 : C# Windows フォーム アプリケーションを作成する

更新 : 2007 年 11 月

このトピックを読むと、Visual C# Express Edition 統合開発環境 (IDE: Integrated Development Environment) の要素を理解して、Windows フォームを使用して比較的に簡単な C# プログラムを構築できるようになります。Windows フォームを使用すると、ダイアログ ボックス、メニュー、ボタンなどのコントロールを始め、標準的な Windows アプリケーションのユーザー インターフェイス (UI) を構成するコンポーネントが含まれたプロジェクトを作成できます。基本的に、これらのコントロールは、.NET Framework クラス ライブラリに含まれるクラスに過ぎません。Visual C# Express Edition の デザイナ ビューを使用すると、コントロールをアプリケーションのメイン フォームにドラッグし、サイズと位置を調整できます。その結果、IDE でソース コードが自動的に追加され、適切なクラスのインスタンスが作成されて、初期化されます。

この例では、Web ブラウザ アプリケーションを作成する方法を説明します。このアプリケーションは、任意の Web サイトへ簡単にカスタマイズできます。

このセクションでは、次のタスクを完了する方法を学びます。

  • 新しい Windows フォームアプリケーションを作成します。

  • コード ビューと デザイナ ビューを切り替えます。

  • Windows フォームのプロパティを変更します。

  • MenuStrip コントロールを追加します。

  • Button コントロールを追加します。

  • ComboBox コントロールを作成して値を設定します。

  • WebBrowser コントロールを使用します。

  • コントロールのイベント ハンドラを作成します。

ビデオへのリンク ビデオ デモについては、「Video How to: Create a C# Windows Forms Application」を参照してください。

C# Windows アプリケーションを作成するには

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

    [新しいプロジェクト] ダイアログ ボックスが表示されます。このダイアログ ボックスには、Visual C# Express Edition で作成できる既定の各種アプリケーションが一覧表示されます。

  2. プロジェクトの種類として [Windows フォーム アプリケーション] を選択します。

  3. アプリケーション名を「Web ブラウザ」に変更します。

  4. [OK] をクリックします。

    Visual C# Express Edition によってプロジェクトのフォルダが新しく作成されます。フォルダ名はプロジェクトのタイトルに合わせて付けられます。デザイナ ビューに Form1 という新しい Windows フォームが表示されます。デザイナ ビューと コード ビューを切り替えるには、デザイン サーフェイスまたはコード ウィンドウを右クリックし、[コードの表示] または [デザイナの表示] をクリックします。

    ExpressForm1cs スクリーンショット

    Windows フォームを デザイナ ビューで表示すると、アプリケーションを開いたときに表示されるウィンドウのビジュアル表現を確認できます。デザイナ ビューでは、ツールボックスからフォームにさまざまなコントロールをドラッグできます。[デザイナ] ビューのコントロールは、実際に "有効" ではありません。フォーム上で正確な位置に移動できるように用意された、単なるイメージです。

    コントロールをフォームにドロップすると、Visual C# がバックグラウンドで機能し、コードが作成されます。これによって、プログラムを実行すると、実際のコントロールが正しい位置に配置されます。このソース コードは、通常、入れ子状に隠れているファイルに含まれます。このファイルは ソリューション エクスプローラ で Form1.cs を展開すると、Form1.designer.cs という名前で表示されます。

  5. コード ビューを表示している場合に デザイナ ビューに切り替えるには、コード ウィンドウを右クリックして [デザイナの表示] をクリックします。次に、Windows フォームのサイズを変更します。

    1. Windows フォームの右下隅をクリックします。

    2. カーソルの形が 2 方向矢印に変わったら、フォームの隅をドラッグし、画面の 4 分の 1 以上になるように幅と高さを調整します。

      このウィンドウには Web ページが表示されるので、画面があまり狭苦しくないようにします。

  6. [プロパティ] ウィンドウが表示されていることを確認します。このウィンドウの既定の位置は IDE の右下のセクションですが、別の位置に移動することもできます。次の図では、右上隅にあります。[プロパティ] ウィンドウが表示されていない場合は、[表示] メニューの [プロパティ ウィンドウ] をクリックします。このウィンドウには、現在選択されている Windows フォームまたはコントロールのプロパティが表示されます。また、既存の値を変更することもできます。

  7. Windows フォームのタイトルを変更します。

    1. フォームをクリックして選択します。

    2. [プロパティ] ウィンドウで、[Text] までスクロール ダウンし、「Form1」というテキストを選択して、「Web ブラウザ」と入力します。

    3. Enter キーまたは Tab を押し、[Text] テキスト ボックスからフォーカスを移動します。

    これで Windows フォームの上部 (タイトル バーと呼ばれるエリア) にあったテキストが変更されました。

    ExpressTextWebBrowser スクリーンショット

    コントロールの名前を簡単に変更するには、コントロールを右クリックし、[プロパティ] をクリックします。[Name] プロパティに、コントロールの新しい名前を入力できます。

  8. ツール バーの [ツールボックス] ボタンをクリックするか、[表示] メニューの [ツールボックス] をクリックします。コントロールの一覧をスクロール ダウンし、[メニューとツール バー] を展開して、MenuStrip を表示します。このコントロールを Windows フォームにドラッグします。

    ExpressMainmenuForm スクリーンショット

    このコントロールによって、フォームの上部に既定のメニューが作成されます。

  9. [ここへ入力] と表示されているボックスに、メニュー名を入力します (この例では「移動」)。Enter キーを押すと、新しい空のボックスが表示され、他のメニューおよびメニュー項目を作成できる状態になります。下の方のボックスに、「ホーム」と入力します。Enter キーを押すと、別のボックスが表示されます。「前に戻る」と入力します。Enter キーを押し、「次に進む」と入力します。

    ExpressTypeHere スクリーンショット

    以上のメニュー項目で、基本的な Web サイトのナビゲーション コントロールが作成されました。

  10. ボタンを追加します。

    ツールボックスの [コモン コントロール] カテゴリにある Button コントロールを、Windows フォームのメニュー バーの直下のほぼ真ん中にドラッグします。[プロパティ] ウィンドウの [Text] プロパティを「button1」から「移動」に変更します。また、[(Name)] のように表示されているデザイン名を、「button1」から「goButton」に変更します。

  11. ComboBox を追加します。

    ツールボックスの [コモン コントロール] カテゴリにある ComboBox コントロールをドラッグし、新しいボタンの左にドロップします。ComboBox の端と隅をドラッグし、ボタンと揃うようにサイズと位置を変更します。

    360kwx3z.alert_note(ja-jp,VS.90).gifメモ :

    Windows フォームでコントロールを移動すると、青い線が表示されます。この線は、コントロールの縦横を整列するときに補助するガイドです。複数のコントロールを選択して整列することもできます。この場合、フォーム内をクリックしてドラッグし、複数のコントロールを選択ボックスで囲むか、Shift キーを押しながらコントロールをクリックします。複数のコントロールを選択したら、整列とサイズ変更のアイコンを使って整列とサイズを変更することができます。このアイコンは、[デザイン] ウィンドウの上部にある [レイアウト] ツール バーに表示されます。

  12. ComboBox の内容を設定します。

    ComboBox は、ユーザーが選択できるオプションのドロップダウン リストを提供します。このプログラムでは、ComboBox にお気に入りの Web サイト一覧を表示して、簡単にアクセスできるようにします。

    サイト一覧を作成するには、ComboBox をクリックしてプロパティを表示します。[Items] プロパティを選択すると、"(コレクション)" と省略記号 (...) が表示されたボタンが表示されます。このボタンをクリックして、ComboBox の内容を変更します。Web サイトの URL を入力し、Enter キーを押します。URL はいくつでも追加できます。

    360kwx3z.alert_note(ja-jp,VS.90).gifメモ :

    各 Web サイト アドレスの前に必ず「http://」を入力します。

  13. WebBrowser コントロールを追加します。

    ツールボックスの [コモン コントロール] カテゴリをスクロール ダウンして、WebBrowser コントロールを見つけます。コントロールを Windows フォームにドラッグします。Windows フォーム内で、WebBrowser コントロールのサイズを適宜変更します。このとき、ComboBox コントロールや Button コントロールと重ならないようにします。WebBrowser コントロールのサイズを変更しづらいときは、まず目的のサイズに設定し、プロパティを開いて、Dock が [None] に設定されていることを確認します。Anchor を [Top, Bottom, Left, Right] に設定した場合、アプリケーションのウィンドウ サイズを変更すると、WebBrowser コントロールも適切なサイズに調整されます。

    WebBrowser コントロールを使用すると、Web ページのレンダリングに伴う困難な作業のすべてを実行できます。このコントロールには、WebBrowser クラスのインスタンスを通じて、アプリケーションでアクセスできます。form1.Designer.cs を確認すると、このクラスのインスタンスがアプリケーション コードに追加されていることがわかります。また、デザイナを使用して追加した項目を示すクラスのインスタンスも追加されています。このインスタンスは、コントロールにイベント ハンドラを追加するときや、コントロール上でメソッドを呼び出すときに使用します。

  14. Button コントロールのイベント ハンドラを追加します。

    ここまでの操作で、アプリケーションのデザイン段階が完了しました。これから、コードを追加して、プログラムの機能を組み込む段階に入ります。

    プログラムのボタンと各メニュー オプションにイベント ハンドラを追加する必要があります。イベント ハンドラとは、ユーザーがコントロールを操作したときに実行されるメソッドです。Visual C# Express Edition は空のイベント ハンドラを自動的に作成します。

    ボタンをダブルクリックすると、プロジェクトのコード エディタが表示されます。クリック イベント (ユーザーがボタンをクリックすると発生するイベント メッセージ) のイベント ハンドラが作成されているのも見ることができます。次のコードを参考にして、イベント ハンドラ メソッドにコードを追加します。

    private void goButton_Click(object sender, System.EventArgs e)
    {
        webBrowser1.Navigate(new Uri(comboBox1.SelectedItem.ToString()));
    }
    

    このコードは、ComboBox コントロールで現在選択されている項目 (Web URL を含む文字列) を取得し、Web ブラウザの Navigate メソッドに渡します。Navigate メソッドは、その URL にある Web ページの内容を読み込み、表示します。

  15. MenuStrip オプションのイベント ハンドラを追加します。

    デザイナ ウィンドウに戻り、メニューのサブ項目を順にダブルクリックします。Visual C# Express Edition は各項目のイベント ハンドラ メソッドを作成します。次のコードを参考にして、メソッドを編集します。

    private void homeToolStripMenuItem_Click(object sender, System.EventArgs e)
    {
        webBrowser1.GoHome();
    }
    
    private void goForwardToolStripMenuItem_Click(object sender, System.EventArgs e)
    {
        webBrowser1.GoForward();
    }
    
    private void goBackToolStripMenuItem_Click(object sender, System.EventArgs e)
    {
        webBrowser1.GoBack();
    }
    

    各メニューのイベント ハンドラから、WebBrowser クラスでサポートされているナビゲーション メソッドが呼び出されます。

    360kwx3z.alert_note(ja-jp,VS.90).gifメモ :

    このコードを見ると、メニュー オプションに付けられた既定の名前が紛らわしくなっていることがわかります。そのため、各メニュー コントロールを作成するときに、[プロパティ] エディタで名前を変更することをお勧めします。ハンドラの名前に、メニュー オプションの名前が反映されます。

  16. Visual C# で記述されたコードを確認します。

    この時点で、Visual C# の IDE によって初期化コードが記述されています。コード ビューで、Form1 クラスのコンストラクタを見つけます。このコンストラクタには、public Form1() というシグネチャがあります。コンストラクタ内部で呼び出される InitializeComponent メソッドを右クリックし、[定義へ移動] をクリックします。ここでは、コントロールをドラッグ アンド ドロップし、[プロパティ] ウィンドウでプロパティを設定したときに背後で作成されたコードを確認できます。

  17. 独自の初期化コードを追加します。

    最後に、Form1 に独自の初期化コードを追加します。このコンストラクタは、例外をスローするコードを呼び出すときには使用しません。そのため、このようなコードは他の場所に配置する必要があります。その場所は Form1_Load メソッドです。コード エディタの上部にある [Form1.cs [デザイン]] タブをクリックして、Windows フォームに戻ります。フォームを選択し、[プロパティ] ウィンドウの [イベント] (稲妻の印が付いたボタン) をクリックし、[Load] をダブルクリックします。これでイベント ハンドラ メソッドが追加され、コード ビュー内のこのメソッドにカーソルが配置されます。

    ユーザーがプログラムを起動すると、Windows は Load イベントを送信して、アプリケーションのフォームに通知します。フォームがこのイベントを受け取ると、Form1_Load メソッドが呼び出されます。イベントに反応して呼び出されるメソッドが、イベント ハンドラと呼ばれます。システムから適切なタイミングでイベントが呼び出されます。そのため、イベントが発生したときに実行するイベント ハンドラに、コードを記述する必要があります。

    コード ビューで、次のコードを参考にして、Form1_Load に 2 行を追加します。これで、WebBrowser コントロールから使用しているコンピュータの既定のホーム ページが表示され、ComboBox の初期値も設定されます。

    private void Form1_Load(object sender, EventArgs e)
    {
        comboBox1.SelectedIndex = 0;
        webBrowser1.GoHome();
    }
    
  18. プログラムをビルドして実行します。

    F5 キーを押してビルドし、Web ブラウザを実行します。画面に Windows フォームが表示され、次にコンピュータの既定のホーム ページが表示されます。ComboBox コントロールを使用して Web サイトを選択し、[移動] をクリックすると、そのサイトが表示されます。メニュー オプションでホーム ページに戻ったり、以前に表示した Web サイトと現在の Web サイト間で移動することもできます。

    MSN サンプル スクリーンショット

    C# プログラムの初心者の方は、この時点で「C# 言語の概要」を読むことをお勧めします。Visual C# Express Edition 開発環境の詳細と、特に IntelliSense を使用したコンソール アプリケーションの作成方法については、「方法 : C# コンソール アプリケーションを作成する」を参照してください。. Windows Presentation Foundation アプリケーションの構築方法については、「方法 : C# WPF アプリケーションを作成する」を参照してください。

参照

処理手順

方法 : C# コンソール アプリケーションを作成する

方法 : C# WPF アプリケーションを作成する

概念

C# 言語の概要

その他の技術情報

初めての Visual C# アプリケーションの作成

Visual C# Express の使用上のヒント