WPF 超入門　〜番外編「エッセンシャル WPF その壱」

お待たせしました。チョー久々の WPF ネタです。
先日やっと「エッセンシャル WPF」を入手でき、いま読み進めている最中ですが、WPF の開発スタッフが、WPF の概要につきかなり突っ込んで解説してるなかなか面白い本です。

エッセンシャルWPF:Windows Presentation Foundation (Programmer's SELECTION)

作者: Chris Anderson,星睦
出版社/メーカー: 翔泳社
発売日: 2007/10/31
メディア: 大型本
購入: 6人クリック: 128回
この商品を含むブログ (32件) を見る

本書はチュートリアルでなく、WPF の概念や構造・設計思想を公開してるので、.NET に関してある程度理解があり WPF も齧ったことある人なら読むのにさほど苦労しないでしょうが、初心者がいきなり読むにはかなりきついのも事実です。ましてサンプルコードが挙げられていても、初心者では試しづらいコードが沢山あります。

そこで今回は、初めて WPF に触れる人が「エッセンシャル WPF」を理解できるよう、サンプルコードを実行するためのポイントを簡単に纏めてみました。最初は第一章「はじめに」から「新しい GUI としての WPF」のサンプルの実行の仕方。続いて「WPF ツアー」をハンズオンで実行出来るよう、二回に分けて記事を書きたいと思います。

新しい GUI としての WPF

第一章の冒頭、三つプログラムが出てきます。これを実際に動かしながら読み進めると理解もぐっと深まります。では三つのプログラムを実際に動かしながら学習してみましょう。

User32 を使った画面の表示方法

一番最初は「User32 を利用する場合の Hello World プログラム」です。C のプログラムですが、たまにはネイティブもいいものです。これを動かせたら面白いと思いませんか？ VB ユーザーや C# エンジニアの中には、このコードが何か判らない、もしくはどうやって実行するか判らないという人もいそうです。そこで後学のために、画像を交えながら紹介したいと思います。

以下、まずエッセンシャル WPF 2頁のコードを実行したところです。

標準的な Window です。まず WPF と従来の User32 を使った画面の違いを説明する前に、User32（Win32API）を使った画面の表示方法、次に .NET による Form の表示、最後は WPF の画面表示と順を追って過去の歴史をおさらいしているワケです。ではまず「User32 を使った画面の表示方法」です。

まず Visual Studio を起動し、「スタートページ」の「新しいプロジェクト」をクリックします。

左側テンプレートから（普段 VC++ を使ってなければ「他の言語」→）「Visual C++」→「空のプロジェクト」を選択し、プロジェクト名を「sample01」として、OKボタンをクリックしてください。なおテンプレートを選択する際、「空の CLR プロジェクト」を誤って選択しないよう注意してください。

プロジェクトが生成されたら、ソースファイルを追加します。「ソリューションエクスプローラー」でプロジェクトを選択、右クリックでショートカットを出し、「追加」→「新しい項目」をクリックします。

「C++ ファイル」を選択します。名前は「sample01.cpp」として下さい。最後に「追加」をクリックします。

エッセンシャル WPF 2頁から始まる C のコードを、先程追加したソースファイルに記述します。これはコピペするより、極力自分で書くことをお勧めします。

#include <Windows.h>

LRESULT CALLBACK WndProc(HWND hwnd,
			UINT msg, WPARAM wparam, LPARAM lparam);

INT WINAPI WinMain
	(HINSTANCE hInstance, 
	 HINSTANCE hPrevInstance, LPSTR cmdLine, int cmdshow) {

	MSG			msg;
	HWND		hwnd;
	WNDCLASSEX	wndclass = { 0 };
	wndclass.cbSize			= sizeof(WNDCLASSEX);
	wndclass.style			= CS_HREDRAW | CS_VREDRAW;
	wndclass.lpfnWndProc	= WndProc;
	wndclass.hIcon			= LoadIcon(NULL, IDI_APPLICATION);
	wndclass.hCursor		= LoadCursor(NULL, IDC_ARROW);
	wndclass.hbrBackground	= (HBRUSH)GetStockObject(WHITE_BRUSH);
	wndclass.lpszClassName	= TEXT("Window1");
	wndclass.hInstance		= hInstance;
	wndclass.hIconSm		= LoadIcon(NULL, IDI_APPLICATION);
	RegisterClassEx(&wndclass);
	hwnd = CreateWindow( TEXT("Window1"),
				TEXT("Hello World"),
				WS_OVERLAPPEDWINDOW,
				CW_USEDEFAULT,
				0,
				CW_USEDEFAULT,
				0,
				NULL,
				NULL,
				hInstance,
				NULL);
	if (!hwnd) return 0;
	ShowWindow(hwnd, SW_SHOWNORMAL);
	UpdateWindow(hwnd);
	while( GetMessage(&msg, NULL, 0, 0 ) ){
		TranslateMessage(&msg);
		DispatchMessage(&msg);
	}
}

LRESULT CALLBACK WndProc
		(HWND hwnd, UINT msg, WPARAM wparam, LPARAM lparam) {

	switch(msg) {
		case WM_DESTROY:
			PostQuitMessage(WM_QUIT);
			break;
		default:
			return DefWindowProc(hwnd, msg, wparam, lparam);
	}
	return 0;
}

コードを書き終えたら、F5キーを押して実行します。以下、実行画面です。

System.Windows.Forms.Form による画面の表示方法

お次は System.Windows.Forms.Form による画面表示です。まず C# の空のプロジェクトを用意しましょう。「Visual C#」→「Windows」と展開すると「空のプロジェクト」があるので選択します。プロジェクトは sample02 といたします。

お次は参照の追加です。「ソリューションエクスプローラ」で「参照設定」を選択し右クリックでショートカットを展開、「参照の追加」をクリックします。

「参照の追加」ダイアログが表示したら、「.NET」タブで「System.Windows.Forms」を選択し「OK」ボタンをクリックします。

次はクラスの追加です。「ソリューションエクスプローラ」で「プロジェクト」を選択、右クリックでショートカットを展開し、「追加」→「クラス」をクリックしてください。

「名前」を sample02.cs にして「追加」ボタンをクリックします。

以下「ソリューションエクスプローラ」ですが、参照設定に System.Windows.Forms が追加され、プロジェクトに sample02.cs が追加されたのが判ると思います。

コードを「エッセンシャル WPF 3頁」のサンプルコードで書き直します。

using System;
using System.Windows.Forms;

class Program {
    [STAThread]
    static void Main() {
        Form f = new Form();
        f.Text = "Hello World";
        Application.Run(f);
    }
}

次に「プロジェクト」の「プロパティ」を表示します。「アプリケーション」タブを選択し、以下の図のように「出力の種類」と「スタートアッププロジェクト」を変更してください。

コードを書き終えたら、F5キーを押して実行します。以下、実行画面です。

WPF による画面表示

さて最後が WPF です。先程の sample02 プロジェクトをそのまま応用しましょう。まずプロジェクトの参照設定を変更します。System.Windows.Forms を削除し、新たに PresentationCore・PresentationFramework・System.Xaml・WindowsBase の 4つの参照を設定します。

コードを「エッセンシャル WPF 4頁」のサンプルコードで書き直します。

using System;
using System.Windows;

class Program {
    [STAThread]
    static void Main() {
        Window f = new Window();
        f.Title = "Hello World";
        new Application().Run(f);
    }
}

コードを書き終えたら、F5キーを押して実行します。以下、実行画面です。

お次は「WPF ツアー」です。