WPF を使用して描画アプリケーションを作成する

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

更新 : 2007 年 11 月

このレッスンでは、ピクチャを描画できる Windows Presentation Foundation (WPF) アプリケーションを作成する方法について説明します。WPF アプリケーションの作成は、Windows フォームアプリケーションの作成に似ています。ツールボックスからコントロールをデザイン画面にドラッグし、コントロールのイベントを処理するコードを記述します。

ビデオへのリンクビデオデモについては、「Video How to: Creating a Drawing Application by Using WPF」を参照してください。

やってみよう

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

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

[新しいプロジェクト] ダイアログボックスが表示されます。このダイアログボックスには、Visual Basic Express Edition を使用して作成できる既定のアプリケーションの種類が一覧表示されます。
プロジェクトの種類として [WPF アプリケーション] を選択します。
アプリケーションの名前を「Ink Pad」に変更し、[OK] をクリックします。

Visual Basic Express Edition によって、プロジェクトの新しいフォルダが作成されます。このフォルダには、プロジェクトのタイトルと同じ名前が付けられます。また、Visual Basic Express Edition によって、デザインビューに Window1 というタイトルの新しい WPF ウィンドウが表示されます。デザイン画面を右クリックし、[コードの表示] をクリックすると、いつでもコードエディタに移動できます。既定では、XAML エディタはデザイナの下に表示されますが、デザイン画面を右クリックし、[XAML の表示] をクリックすると、XAML ビューを全画面表示できます。

ユーザーインターフェイスをデザインするには

[プロパティ] ウィンドウが表示されていない場合は、[表示] メニューの [プロパティウィンドウ] をクリックします。このウィンドウには、現在選択されているフォームまたはコントロールのプロパティが一覧表示されます。このウィンドウで、既存のプロパティ値を変更できます。
[プロパティ] ウィンドウで、Height プロパティを「550」に、Width プロパティを「370」に設定して、WPF ウィンドウのサイズを変更します。
WPF ウィンドウのタイトルプロパティを「Ink Pad」に変更します。

WPF ウィンドウの Background プロパティを茶色に変更するために、ドロップダウンボックスの一覧の [Brown] をクリックして Enter キーを押します。

メモ :
もう 1 つの方法として、XAML マークアップを直接変更することもできます。この場合は、Background 属性を追加し、その値を Brown に設定します (Background="Brown")。

[表示] メニューの [ツールボックス] をクリックしてツールボックスを開きます。
ツールボックスを右クリックし、[アイテムの選択] をクリックします。

[ツールボックスアイテムの選択] ダイアログボックスが表示されます。
[ツールボックスアイテムの選択] ダイアログボックスの [WPF コンポーネント] タブで、[InkCanvas] チェックボックスまでスクロールダウンし、これをオンにします。
[OK] をクリックすると、InkCanvas コントロールがツールボックスに追加されます。
ツールボックスから InkCanvas コントロールをデザイン画面にドラッグします。
[プロパティ] ウィンドウで InkCanvas コントロールの次のプロパティを設定します。

プロパティ

値

Width

Auto

Height

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margins

9, 9, 9, 68
InkCanvas コントロールの色を黄色に変更するために、Background プロパティを LightYellow に設定します。

実行時には、InkCanvas コントロールの背景色が明るい黄色として表示されます。
Button コントロールを 2 つ WPF ウィンドウにドラッグし、InkCanvas コントロールの下に配置します。button1 を左側に、button2 を右側に配置します。
button1 を選択し、XAML ビューで、XAML マークアップを次のように変更します。このマークアップは、Text プロパティを Clear に設定します。
```
<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="Button1" VerticalAlignment="Bottom" 
    Width="75">Clear</Button>
```
button2 を選択し、XAML マークアップを次のように変更します。このマークアップは、Text プロパティを Close に設定します。
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="Button2" VerticalAlignment="Bottom" 
    Width="75">Close</Button>
```
この WPF アプリケーションは、次の図の Ink Pad アプリケーションのようになります。

WPF Ink Pad アプリケーション

プロパティ	値
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margins	9, 9, 9, 68

ボタンのイベントハンドラにコードを追加するには

[Clear] をダブルクリックし、生成された Click イベントハンドラに次のコードを追加します。
```
    Me.InkCanvas1.Strokes.Clear() 
```
コードエディタを右クリックし、[デザイナ] をクリックしてデザインビューに戻ります。
[Close] をダブルクリックし、生成された Click イベントハンドラに次のコードを追加します。
```
    Me.Close()
```
F5 キーを押してプロジェクトを実行します。
アプリケーションが起動したら、InkCanvas コントロールにピクチャを描画します。間違った場合でも、[Clear] をクリックしてやり直すことができます。
[Close] をクリックしてアプリケーションを終了します。