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.30).gifメモ :

テキスト エディターまたは Expression Blend の [XAML] ビューで XAML ドキュメントを編集する前に XAML の操作に慣れておくことをお勧めします。XAML を直接編集すると、アプリケーションの解析エラーが発生することがあります。エラーを修正しないと、Expression Blend のアートボードの [デザイン] ビューにドキュメントを正しく表示したり、アプリケーションをビルドしたり実行したりできなくなります。

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

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

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

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

Cc294525.200569f5-655e-43de-bd34-f0799678fec1(JA-JP,Expression.30).png

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

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

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

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

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

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

Cc294525.b5f7566b-7d9a-4cff-a898-53b96c3bba7c(JA-JP,Expression.30).png

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

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

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