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 2010 をインストールしている場合は、で開くこともできます。

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

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

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

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

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

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

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

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

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

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

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

  • 図形とパスの描画

  • オブジェクトの配置

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

• アプリケーションのオブジェクトをアニメーション化します。

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

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

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

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

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

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

  詳細については、「ビヘイビアーの使用」を参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Visual Studio 2010 を使用する必要がある機能

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

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

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

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

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

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

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

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

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

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

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.