ユーザーインターフェイスのデザイン (Visual C#)

[アーティクル]
09/30/2008

更新 : 2007 年 11 月

Visual C# で Windows アプリケーションのユーザーインターフェイス (UI) を作成するには、Windows フォームデザイナとツールボックスを使用するのが最も簡単で便利な方法です。

メモ :
ここでは、Windows フォーム技術についてのみ説明します。Visual C# を使って Windows Presentation Foundation (WPF) アプリケーションを作成することもできます。詳細については、「Windows Presentation Foundation の概要」および「方法 : 新しい WPF アプリケーションプロジェクトを作成する」を参照してください。また、Visual C# を使用して、単純なテキストベースの UI を持つ、MS-DOS プログラムに似たコンソールアプリケーションを作成することもできます。詳細については、「方法 : C# コンソールアプリケーションを作成する」を参照してください。

ここでは、Windows フォーム技術についてのみ説明します。Visual C# を使って Windows Presentation Foundation (WPF) アプリケーションを作成することもできます。詳細については、「Windows Presentation Foundation の概要」および「方法 : 新しい WPF アプリケーションプロジェクトを作成する」を参照してください。

また、Visual C# を使用して、単純なテキストベースの UI を持つ、MS-DOS プログラムに似たコンソールアプリケーションを作成することもできます。詳細については、「方法 : C# コンソールアプリケーションを作成する」を参照してください。

Windows フォームアプリケーションのユーザーインターフェイスの作成には、次の 3 つの基本的な手順があります。

コントロールをデザインサーフェイスに追加します。
コントロールの初期プロパティを設定します。
指定したイベントのハンドラを記述します。

自分でコードを記述して UI を作成することもできますが、デザイナを使用すると、手動でのコーディングよりもはるかに速く UI を作成できます。

コントロールの追加

デザイナで、フォームを表すデザインサーフェイスに、ボタンやテキストボックスなどのコントロールを、マウスを使用してドラッグします。次の図に、[ツールボックス] から Windows フォームデザイナのフォームへドラッグしたコンボボックスを示します。

ツールボックス

ユーザーが視覚的に作業を行うと、デザイナはアクションを C# ソースコードに変換し、<name>.designer.cs というプロジェクトファイルに書き込みます (ここで、<name> はフォームに付けた名前です)。アプリケーションを実行すると、デザインサーフェイスで配置したとおりの位置とサイズで UI 要素が表示されます。詳細については、「Windows フォームデザイナ」を参照してください。

プロパティの設定

フォームにコントロールを追加した後は、[プロパティ] ウィンドウを使用して、背景色や既定のテキストなど、コントロールのプロパティを設定できます。[プロパティ] ウィンドウで指定した値は、実行時にコントロールが作成されるときに割り当てられるプロパティの初期値です。多くの場合、この初期値は、実行時にプログラムでアクセスまたは変更できます。このとき、アプリケーションで、コントロールクラスのインスタンスに関するプロパティを取得または設定します。[プロパティ] は、デザイン時に便利なウィンドウです。コントロールでサポートされているプロパティ、イベント、およびメソッドのすべてを参照できます。詳細については、「[プロパティ] ウィンドウ」を参照してください。

イベントの処理

グラフィカルユーザーインターフェイスのあるプログラムは、まずイベントドリブン型です。つまり、テキストボックスへのテキスト入力、ボタンのクリック、リストボックスの選択変更など、ユーザーが何かを実行するまで待機しています。ユーザー操作が発生すると、.NET Framework クラスの単なるインスタンスであるコントロールから、アプリケーションにイベントが送信されます。この場合、イベントを受信したときにアプリケーションで呼び出す特殊なメソッドを記述して、イベントを処理する、という選択肢があります。

[プロパティ] ウィンドウを使用して、コードで処理するイベントを指定します。イベントを確認するには、デザイナでコントロールを選択し、[プロパティ] ウィンドウのツールバーにある稲妻のアイコンの [イベント] ボタンをクリックします。イベントのボタンを次の図に示します。

プロパティウィンドウのイベントボタン

[プロパティ] ウィンドウでイベントハンドラを追加すると、本文が空であるメソッドが自動的に記述されます。メソッドにコードを記述し、何かに利用できるようにする必要があります。コントロールでは多数のイベントが生成されることが多いのですが、ほとんどの場合、処理が必要なイベントは数個で、1 つのこともあります。たとえば、ボタンの Click イベントは処理しなければなりませんが、ボタンの外観を詳細にカスタマイズしないのであれば、Paint イベントを処理する必要はありません。各コントロールには、既定のイベントハンドラがあります。デザイナでコントロールをダブルクリックすることにより、既定のイベントハンドラを作成できます。ダブルクリックすると、イベントハンドラの作成とコードエディタを開くことが行われるので、イベントを処理するコードを記述できます。