XAML の編集

  • [アーティクル]

Extensible Application Markup Language (XAML) ドキュメントは任意のテキスト エディタで編集できますが、Microsoft Expression Blend をエディタとして使用すると、さまざまなメリットがあります。

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

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

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

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

Cc294525.alert_note(ja-jp,Expression.10).gifメモ :

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

上記の点から、[デザイン] ビューと [XAML] ビューを切り替えながら作業することは、XAML の基礎を習得するうえで効果的な方法と言えます。
Cc294525.alert_note(ja-jp,Expression.10).gifメモ :

Microsoft Visual Studio 2008 で XAML ドキュメントを編集することもできます。これは、Expression Blend 2 の [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.10).png

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

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

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

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

個々のコントロールの構文については、MSDN でコントロール ライブラリに関するトピック (英語の可能性あり) を参照するか、MSDN のクラス ライブラリのリファレンス (英語の可能性あり) で XAML の要素と属性を検索してください。

Cc294525.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

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

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

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

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

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

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

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

Expression Blend の [デザイン] ビューを使用したアプリケーション作成の詳細については、このユーザー ガイドの「レイアウト」、「図形とパスの描画」、「3D」や、その他の関連トピックを参照してください。

Cc294525.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る