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

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

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

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

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

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

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

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

  .cs ファイルに含まれるカスタム コントロールの例については、「カスタム コントロールの作成」を参照してください。

  ヒント

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

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

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

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

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

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

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

  例については、「カスタム コントロールの作成」を参照してください。

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

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

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

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

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

  • Blend でコントロールを挿入し、そのビヘイビアーを変更する

  • Blend におけるオブジェクトの描画

  • Blend でオブジェクトをレイアウト コンテナーに編成する

  • データの表示

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

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

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

  詳細については、「Blend におけるイメージとアートの挿入」および「Blend でイメージ、ビデオ、およびオーディオ クリップを挿入する」を参照してください。

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

  詳細については、「タイムラインでのトリガーを使用したメディア コントロール」を参照してください。

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

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

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

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

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

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

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

  例については、「Blend でのリソースの作成」を参照してください。

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

  例については、「3D コンテンツのインポート」および「2D イメージの 3D イメージへの変換」を参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

  ヒント

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

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

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

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

  詳細については、「XAML の作業」を参照してください。

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

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

  ヒント

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

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

Blend アプリケーションのコードを記述するためのヘルプが必要な場合は、Blend の公式ブログ BlendInsider に記載されているリソースのいずれかを使用できます。 これらは、ディスカッション フォーラム、チュートリアル、および他のリソースへのリンクを示します。