XAML の編集

  • [アーティクル]

Extensible Application Markup Language (XAML) ドキュメントは、どのようなテキスト エディターでも編集できますが、Microsoft Expression Blend を使用すると、次のような点で便利です。

  • Expression Blend では、XAML ドキュメントを簡単にビルドおよび実行して (F5 キーを押します)、編集結果を簡単に確認できます。

  • Expression Blend では、ファイルを保存するたび、またはビュー ([デザイン] ビューと [XAML] ビュー) を切り替えるたびに、[結果] パネルに表示されている構文エラーが更新されます。

  • [XAML] ビューでは、XAML 要素が色分けして表示されるため、各要素を簡単に識別できます。[検索] 機能で特定のテキストを検索したり、[ジャンプ] 機能で特定の行に移動したりすることもできます。

  • [デザイン] ビューでは、アプリケーションを視覚的にデザインするだけで、必要な XAML が Expression Blend で自動生成されます。[XAML の表示] 機能を使用して、ドキュメント内の任意のオブジェクトに対応する XAML をすばやく表示することもできます。

Noteメモ :

テキスト エディターまたは Expression Blend の [XAML] ビューで XAML ドキュメントを編集するにあたっては、事前に XAML の作業経験があることが望まれます。XAML を直接編集すると、アプリケーションで解析エラーが発生する結果を招く場合があります。これらのエラーを修正しない限り、Expression Blend の [デザイン] ビューでアートボード上にドキュメントを正しく表示したり、アプリケーションをビルドおよび実行したりできません。

上記の点から、[デザイン] ビューと [XAML] ビューを切り替えながら作業することは、XAML の基礎を習得するうえで効果的な方法と言えます。
Noteメモ :

Microsoft Visual Studio 2010 には、Expression Blend の [XAML] ビューと同じ機能が備わっていて、XAML ドキュメントを編集することもできます。

Expression Blend の XAML ビューを使用した XAML の編集

Expression Blend の [XAML] ビューを使用すると、Expression Blend プロジェクトの XAML を変更できます。[XAML] ビューを表示するには、Expression Blend ワークスペースのアートボードの右側にある [XAML] タブをクリックします。[XAML] ビューで行った変更は、[デザイン] ビューに自動的に反映されます。

[XAML] ビューのタブ ([デザイン] ビューのタブは非表示)

Cc294525.9c6c58bb-f156-4394-a4e2-dc30bfcb7369(ja-jp,Expression.40).png

[XAML] ビューでは、新しい要素のコードを入力できるほか、文書処理プログラムでの文字列操作と同様に、既存のコードを選択して切り取りまたはコピーし、貼り付けることができます。次の図は、[XAML] ビューでテキストを選択した状態を示しています。

[XAML] ビューでのテキスト選択

Cc294525.200569f5-655e-43de-bd34-f0799678fec1(ja-jp,Expression.40).png

[XAML] ビューでは、クリップボードを使用した通常の操作に加えて、[編集] メニューの [ジャンプ]、[検索]、[次を検索]、[置換] の各コマンドを使用して、XAML の特定行への移動、テキストの検索や置換を実行することもできます。詳細については、このユーザー ガイドの「検索と置換」および「特定の行への移動」を参照してください。

個々のコントロールの構文については、MSDN Cc294525.xtlink_newWindow(ja-jp,Expression.40).png の「コントロール ライブラリ Cc294525.xtlink_newWindow(ja-jp,Expression.40).png」を参照するか、MSDN Cc294525.xtlink_newWindow(ja-jp,Expression.40).png の 「クラス ライブラリ (WPF) Cc294525.xtlink_newWindow(ja-jp,Expression.40).png」にある XAML の要素と属性の説明を参照してください。

Expression Blend のデザイン ビューを使用した XAML の編集

[デザイン] ビューで作業を行うと、対応する XAML が Expression Blend によって自動的に生成されます。[デザイン] ビューでは、新しいオブジェクトを [ツール] パネルから追加し、これらの要素にデータをバインドしてスタイルを設定できるほか、要素のアニメーション化、さらにユーザーの操作に応答するように設定するなど、さまざまな操作を行えます。デザインした部分に対応する XAML は Expression Blend によって随時自動的に更新されます。

[デザイン] ビューを表示するには、Expression Blend ワークスペースのアートボードの右側にある [デザイン] タブをクリックします。[デザイン] ビューで行った変更は、[XAML] ビューに自動的に反映されます。

次の図は、Expression Blendの [デザイン] ビューを左に 、[XAML] ビューを右に示しています。この図では、Rectangle (四角形) が [デザイン] ビューのドキュメントに追加され、Expression Blend が生成したその四角形の XAML が [XAML] ビューに表示されています。

Expression Blend の [デザイン] ビューと [XAML] ビューの間の接続

Cc294525.b5f7566b-7d9a-4cff-a898-53b96c3bba7c(ja-jp,Expression.40).png

[デザイン] ビューで作業しているときに、特定のオブジェクトの XAML をすばやく表示するには、アートボードまたは [オブジェクトとタイムライン] パネルでそのオブジェクトを右クリックして、[XAML の表示] をクリックします。この操作を行うと、自動的に [XAML] ビューに切り替わり、選択したオブジェクトの XAML が強調表示されます。

Expression Blend の [デザイン] ビューでのアプリケーションの作成の詳細については、「オブジェクトの配置」、「図形とパスの描画」、「3D オブジェクトの挿入」および他の関連トピックを参照してください。

Copyright ©2011 by Microsoft Corporation. All rights reserved.