WPF アプリケーションのユーザー インターフェイスのデザイン

更新 : 2007 年 11 月

Windows フォーム アプリケーションの場合と同様、Windows Presentation Foundation (WPF) アプリケーションでもユーザー インターフェイスを設計することができます。ツールボックスからデザイン サーフェイスにコントロールをドラッグします。統合開発環境 (IDE: Integrated Development Environment) は WPF アプリケーションの場合は異なります。[プロパティ] ウィンドウ、ツールボックス に加えて、WPF IDE には XAML エディタがあります。XAML は、ユーザー インターフェイスの作成で使用できる、拡張可能アプリケーション マークアップ言語です。次の図は、XAML エディタの場所を示しています。詳細については、「チュートリアル : WPF デザイナでの XAML の編集」を参照してください。

XAML エディタ

Windows フォームの開発でコードを手動で記述してコントロールを作成できるのと同じように、XAML マークアップを使ってコントロールを作成することもできます。コントロールを作成するために XAML を記述するということはほとんどありません。ツールボックスからコントロールをドラッグし、Visual C# Express Edition に XAML を自動生成させる方がずっと簡単です。その後、XAML マークアップに変更を加え、Height や Text などのコントロールの属性を変えることができます。たとえば、次の XAML マークアップは、Button コントロールをダブルクリックして WPF ウィンドウに追加したときに生成されるマークアップに似ています。

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

既定では、幅や高さなど、変更できる属性は、赤で表示されます。次の例に示すように、XAML マークアップの値は直接変更することができます。

<Button Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="60">Submit</Button>

WPF アプリケーションを作成するには

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

2. [新しいプロジェクト] ダイアログ ボックスで、[WPF アプリケーション] をクリックします。

3. [名前] ボックスに「WPF Application」と入力し、[OK] をクリックします。

   新しい WPF プロジェクトが作成されます。Window1 という名前の新しいウィンドウが表示され、その XAML マークアップが Visual C# Express Edition IDE の XAML エディタに表示されます。

4. [Window1] をクリックして選択します。

5. XAML ビューで、Window 要素の Title 属性を WPF Application に変更します。

   Window1 のタイトル バーのテキストが WPF Application に変わります。

WPF ウィンドウへのコントロールの追加

ツールボックス からコントロールをドラッグすると、WPF ウィンドウに追加できます。詳細については、「コモン WPF コントロール」を参照してください。

WPF ウィンドウにコントロールを追加するには

1. ツールボックスから TextBox コントロールを WPF ウィンドウの右側上へドラッグします。

2. TextBox コントロールをクリックして選択します。

3. [プロパティ] ウィンドウで、次の図に示すように、HorizontalAlignment プロパティの最初の矢印 ([左]) をクリックします。

   HorizontalAlignment プロパティ
   

   これにより、TextBox が WPF ウィンドウの右側から左側に移動します。

4. TextBox の以下のプロパティを設定します。

   プロパティ	値
   VerticalAlignment	Top
   Width	75
   Height	26

5. XAML エディタで、次の例のように、TextBox 要素の Width 属性を 140 に変更し、Margin 要素を 30, 56, 0, 0 に変更します。

   <TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
       Name="TextBox1" VerticalAlignment="Top" Width="140" />
   

   これらの新しい値を入力すると、TextBox の幅と位置が変わります。

6. Button コントロールを WPF ウィンドウの TextBox の横に追加します。

7. Button の開始タグと終了タグの間にあるテキスト Button を、次の例のように Submit に変更します。

   <Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
       Name="Button1" VerticalAlignment="Top" 
       Width="75">Submit</Button>
   

   この新しい値を入力すると、ボタン上のテキストが変わります。

8. F5 キーを押してプログラムを実行します。先ほど追加したテキスト ボックスとボタンがあるウィンドウが表示されます。

   ボタンをクリックしたり、テキスト ボックスに入力したりできますが、何も起こりません。コントロールにイベント ハンドラを追加し、ボタンがクリックされたときの処理をするコードを記述する必要があります。詳細については、「方法 : WPF コントロールのイベント ハンドラを作成する」を参照してください。

参照

処理手順

方法 : 新しい WPF アプリケーション プロジェクトを作成する

方法 : 新しい項目を WPF プロジェクトに追加する

その他の技術情報

WPF アプリケーションの作成