XAML およびコードの作成と比較した場合のビジュアル デザイン

XAML コードの編集は、デザイン作業を行う人にとって複雑に感じられるかもしれません。しかし、Microsoft Expression Blend は、クリエイティブな人向けのツールです。実際に使える Windows Presentation Foundation (WPF) アプリケーションや Microsoft Silverlight アプリケーションを [デザイン] ビューで作成できるようになっています。さらに、Microsoft Expression Design からエクスポートされたアートや XAML をインポートしたり、Microsoft Expression Encoder で生成された Silverlight のエンコード用テンプレートをインポートすることもできます。

Expression Blend は、共同開発でも利用できるように設計されています。多くの場合、ソフトウェア開発チームは、ユーザー インターフェイス (UI) を開発するデザイナーと、UI のバックグラウンドで動作するコードを開発するプログラマに分かれています。そのため、Expression Blend には、プログラマに渡せるシンプルなコードを生成する機能と、イベント ハンドラーなどの既存のコードや、既存のコントロールと同じように使用できるカスタム コントロールなどにフックする機能も備わっています。

Expression Blend で行えるプロジェクト関連作業

• WPF ベースのアプリケーション (.exe)、Silverlight ペースのアプリケーション (.exe)、Silverlight ベースのアプリケーションおよび対応する Web サイト、またはコントロールのライブラリ (.dll) 用のプロジェクトを含むソリューションを作成します。

• 新しい XAML (Extensible Application Markup Language) ファイルを追加します。このファイルで、アプリケーションの最上位のウィンドウ、ユーザー コントロール、アプリケーションのナビゲーション用ページ、再利用可能なスタイルの入ったリソース ディクショナリ、コントロール テンプレート、ブラシ リソースなどを作成できます。

• プロジェクトに既存のファイルを追加したり、そのファイルへのリンクを設定します。イメージ、XML、ビデオ、オーディオ、ライセンス、XAML、コード ファイルなど、さまざまなファイルを利用できます。

• .dll ファイルに含まれている既存のカスタム コントロールへの参照を追加します。カスタム コントロールは、既存のソース コード ファイル (.vb または .cs) に含まれている場合もあります。Expression Blend プロジェクトに追加したカスタム コントロールは、Expression Blend に付属しているコントロールと同じように使用できます。

  .cs ファイルに含まれるカスタム コントロールの例については、「試してみよう : カスタム プロパティを持つカスタム コントロールの作成」を参照してください。

  ヒント :
  カスタム コントロールを含むソース コード ファイルを Expression Blend のプロジェクトに追加した場合は、プロジェクトをビルドしないと、[アセット] パネルの [コントロール] カテゴリにそのコントロールが表示されません。

• ソリューションに新しいプロジェクトを追加します。Expression Blend の WPF プロジェクトに、既存のプロジェクトを追加したり、既存のプロジェクトへのリンクを設定したりできます。

• プロジェクトのファイルを開きます。XAML ファイルが編集モードでアートボードに開かれます。作業中のドキュメントにイメージ ファイルを挿入でき、サウンドおよびビデオのファイルがアニメーションのタイムラインに開かれます。プロジェクトの分離コード ファイルは、アートボードのテキスト エディターで開きます。すべてのファイルを、各ファイルの種類に割り当てられた外部エディターで開くことができます。たとえば、Expression Blend の [プロジェクト] パネルで .xml ファイルをダブルクリックすると、通常、メモ帳でファイルが開きます。コード ファイルは、Expression Blend のテキスト エディターで開きますが、Microsoft Visual Studio 2008 をインストールしている場合は、で開くこともできます。

  詳細については、「コードビハインド ファイルの変更」を参照してください。

• WPF アプリケーションまたは Silverlight アプリケーション用の Visual Studio 2008 のプロジェクトまたはソリューションを開き、UI を作成します。

• アプリケーションをビルド (Ctrl + Shift + B キーを押します) するか実行 (F5 キーを押します)して、デバッグします。[結果] パネルにエラーが表示された場合は、そのエラーを修正します。

• アプリケーションでインスタンス化できるカスタム クラスのコード ファイルを追加します。

  例については、「試してみよう : カスタム プロパティを持つカスタム コントロールの作成」を参照してください。

• コード ファイルを編集します。Expression Blend の [プロジェクト] パネルでコード ファイルをダブルクリックすると、アートボードのテキスト エディターでコード ファイルが開きます。このテキスト エディターには、検索と置換機能および IntelliSense が備わっています。

  詳細については、「コードビハインド ファイルの変更」を参照してください。

Expression Blend でコードを使用せずにできること

• アプリケーションの外観 (UI) をデザインします。[ツール] パネルのツールを使用して、要素を追加したり変更したりします。要素のスタイルを設定するには、[プロパティ] パネルでプロパティ (ブラシなど) を指定します。

  詳細については、次のトピックを参照してください。

  • インタラクティブ コントロールの選択と使用

  • 図形とパスの描画

  • オブジェクトの配置

  • 色、ブラシ、およびマスクの設定

• アプリケーションの要素をアニメーションにします。

  詳細については、「アニメーション オブジェクト」を参照してください。

• プロジェクトでアートボードに追加したビデオ ファイルやオーディオ ファイルのタイムラインを変更します。

  詳細については、「イメージとアートの挿入」および「ビデオおよびオーディオの挿入」を参照してください。

• アニメーション タイムライン、オーディオ ファイル、ビデオ ファイルのトリガーを設定してユーザーの操作 (ボタンをクリックした場合やポインターを置いた場合など) に反応するようにします。

  詳細については、「イベントに応答するコードを記述」を参照してください。

• [アセット] パネルにあるビヘイビアーを使用して、アプリケーションにインタラクティブ機能を追加します。ビヘイビアーとは、パッケージ化された再利用可能なコードのことです。どのオブジェクトにもドラッグでき、そのプロパティを調整することができます。

  詳細については、「ビヘイビアーをオブジェクトに追加」を参照してください。

• カスタム ユーザー コントロールを作成してデザインします。ユーザー コントロールは、Expression Blend で作成できるプロジェクトの一種です。ユーザー コントロールは、Visual Studio 2008 で開発されたカスタム コントロールと同じ方法で使用できます。

  例については、「空のユーザー コントロールの作成」および「既存のオブジェクトからのユーザー コントロールの作成」を参照してください。

• 既存のコントロールの外観をカスタマイズして、そのスタイル テンプレートを同じ型の別のコントロールに適用します。コントロール テンプレートにアニメーションを追加することもできます。

  例については、「WPF 簡易スタイルのスタイル処理のヒント」および「一般的な Silverlight コントロールのスタイル処理のヒント」を参照してください。

• 再利用可能なリソース (ブラシなど) を作成します。このためには、[プロパティ] パネルでプロパティの名前をクリックしてから、[新しいリソースに変換] をクリックします。

  例については、「ブラシ リソースまたは色リソースの作成」を参照してください。

• [ツール] メニューのオプションを使用して、要素をボタンやブラシ リソースに変換したり、イメージを 3D オブジェクトに変換したりします。

  例については、「既存のオブジェクトからのコントロールの作成」および「2D イメージの 3D イメージへの変換」を参照してください。

• 要素のプロパティを別のプロパティの値にバインドします。この機能は、要素の幅をスライド バーに対応させるなど、さまざまな場面で利用できます。

  例については、「ユーザー入力またはその他の内部値へのオブジェクトのバインド」を参照してください。

• [データ] パネルにあるツールを使用して、要素のプロパティをデータ ソースにバインドします。XML ファイル (WPF プロジェクトのみ)、共通言語ランタイム (CLR) オブジェクト、サンプル データにバインドできます。

  詳細については、「データの表示」を参照してください。

コードを使用してできること

• アプリケーションの UI 要素をユーザーが操作したときに起こる複雑な動作をイベント ハンドラーで定義します。キーの押下操作やマウスの動作などに応答するようにイベント ハンドラーをプログラミングできます。これは、アニメーションやメディア ファイルのイベント トリガーとは異なります。たとえば、イベント ハンドラーでは、数式を使用してアプリケーションの動作をプログラミングできます。

  例については、「新しいイベント ハンドラー メソッドの作成」を参照してください。

  イベントの一覧については、[コントロール、プロパティ、およびイベント リファレンス」を参照してください。

• 既存のコントロールの動作をカスタマイズしたり、新しいカスタム コントロールを作成したりします。

  WPF アプリケーションの Button コントロールに基づいたカスタム コントロールの例については、「試してみよう : カスタム プロパティを持つカスタム コントロールの作成」を参照してください。

• データ テーブルにデータ (Microsoft SQL Server のデータなど) を読み込んで、Expression Blend で使用できる CLR データ オブジェクトに変換します。

  例については、「試してみよう : サンプル SQL データベースからのデータ表示」を参照してください。

• データをバインドするときにカスタム ロジックを使用するために、値コンバーターを作成します。この機能は、ある要素のプロパティを、互換性のないデータ型のプロパティにバインドする場合に便利です。

  例については、「試してみよう: データのタイプ変更」を参照してください。

Visual Studio 2008 だけでできること

• アプリケーションを起動させ、1 行ずつステップ実行してデバッグします。

  ヒント :
  同じコンピューターの Visual Studio 2008 と Expression Blend で、同じプロジェクトファイルを同時に開くことができます。一方のシステムでファイルに対する変更内容を保存すると、別のシステムに切り替えたときに、そのファイルを再読み込みするかどうかを確認するメッセージが表示されます。

  詳細については、「Visual Studio 2008 での Expression Blend アプリケーションのデバッグ」を参照してください。

コードを記述するときに Expression Blend で行われる処理

• 新しいアイテムの追加ウィザードで作成した XAML ファイルに対応する分離コード ファイルが作成されます (オプション)。Expression Blend の [プロジェクト] パネルでコード ファイルをダブルクリックすると、アートボードのテキスト エディターでコード ファイルが開きます。このテキスト エディターには、検索と置換機能が備わっています。

  詳細については、「コードビハインド ファイルの変更」を参照してください。

• [プロパティ] パネルの [イベント] ビュー にあるイベントをダブルクリックすると、空のイベント ハンドラー メソッドのコードが生成されます。

  詳細については、「イベントに応答するコードを記述」を参照してください。

  ヒント :
  複数のユーザーが同じプロジェクトで同時に作業する必要がある場合は、Microsoft Team Foundation などのソース管理システムを使用することをお勧めします。ソース管理システムでは、中央で管理されているリポジトリにプロジェクト ファイルを保管し、各自のコンピューターからファイルをチェックアウトしてローカルで編集することができます。詳細については、「Team Foundation ソース コントロールの作業」を参照してください。

コードの記述に関する参考情報

「情報とコミュニティのリソース」には、ディスカッション フォーラムやチュートリアル、各種リソースなど、Expression Blend アプリケーションのコードの記述に関係のある情報を入手できる場所が一覧されています。