チュートリアル : WPF デザイナでの XAML の編集
更新 : 2007 年 11 月
Windows Presentation Foundation (WPF) Designer for Visual Studio には、Visual Studio のその他の言語エディタと同じ多くの機能を備えた XAML エディタがあります。このトピックでは、IntelliSense、アウトライン機能などの機能を使用する方法について説明します。
このチュートリアルでは次のタスクを行います。
WPF プロジェクトを作成する。
リソースを作成する。
構文を強調表示する。
タグ ナビゲーションを使用する。
アウトライン機能を使用する。
IntelliSense を使用する。
かっこの一致機能を使用する。
自動フォーマットを使用する。
.gif "メモ") メモ : |
|---|
使用している設定またはエディションによっては、ヘルプの記載と異なるダイアログ ボックスやメニュー コマンドが表示される場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。 |
前提条件
このチュートリアルを完了するには、次のコンポーネントが必要です。
- Visual Studio 2008.
プロジェクトの作成
最初に、ホスト アプリケーションのプロジェクトを作成します。
プロジェクトを作成するには
Visual Basic または Visual C# で XamlEditing という名前の新しい WPF アプリケーション プロジェクトを作成します。詳細については、「方法 : 新しい WPF アプリケーション プロジェクトを作成する」を参照してください。
WPF デザイナで Window1.xaml が開きます。
リソースの作成
WPF アプリケーションでは、よくリソースを使用します。WPF デザイナには、リソース セクションの折りたたみ可能なアウトライン機能と、[ドキュメント アウトライン] ウィンドウでのリソース セクションへのナビゲーション機能が用意されています。
リソースを作成するには
WPF デザイナで Window1.xaml を開きます。
XAML ビューで、次の XAML を Window1 の開始タグの後に挿入します。
この XAML は、色範囲を持つ線形グラデーション ブラシを作成します。
<Window.Resources> <LinearGradientBrush x:Key="backgroundBrush1" StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Window.Resources>
構文の強調表示
WPF デザイナでは、構文に従ってテキストの色を指定して、XAML コードを読みやすくすることができます。
構文を強調表示するには
XAML ビューで、既定の <Grid> 要素を次のテキストに置き換えます。
<Grid Name="grid1" Background="{StaticResource backgroundBrush1}"> </Grid>要素、プロパティ、およびプロパティ値は、それぞれ固有の色になります。加えて、マークアップ拡張機能が Background プロパティにバインドされます。さらに、デザイン ビューでのグリッド背景も更新されます。
XAML 要素と属性の色を変更することができます。詳細については、「方法 : XAML ビュー設定を変更する」を参照してください。
タグ ナビゲーション
タグ ナビゲータを使用して、タグ間を移動できます。[ドキュメント アウトライン] ウィンドウを使用して移動することもできます。詳細については、「WPF ドキュメントの要素階層内の移動」を参照してください。
タグ ナビゲータを使用するには
XAML ビューで、<Grid> 要素の開始タグをクリックします。
WPF デザイナの下部にあるタグ ナビゲータを見つけます。"Grid (grid1) Window/Grid" と表示されています。
タグ ナビゲータで、Window 要素にマウス ポインタを移動します。
Window1 のサムネールが表示されます。
タグ ナビゲータで、Window のハイパーリンクをクリックします。
Window1 の開始タグが XAML ビューで強調表示されます。
XAML ビューで、<Window.Resources> タグをクリックします。
タグ ナビゲータは、<Window.Resources> 要素への XAML ツリー階層を表示します。
タグ ナビゲータで、Resources の左側の [次の選択] 矢印をクリックします。
XAML ビューで、<LinearGradientBrush> 要素が選択されます。
[アウトライン]
WPF デザイナは、折りたたみ可能なアウトライン機能を完全にサポートしています。
アウトライン機能を使用するには
XAML ビューで、<Window.Resources> 要素までスクロールします。
開始タグの左側にある折りたたみボタンをクリックします。
<Window.Resources> 要素が折りたたまれて、1 行になります。
開始タグの左側にある展開ボタンをクリックします。
<Window.Resources> 要素が展開されて、元の状態に戻ります。
IntelliSense
WPF デザイナは IntelliSense を完全にサポートしています。
IntelliSense を使用するには
grid1 要素内で「<Gr」と入力します。
IntelliSense リストが表示され、Grid クラスが選択されています。
Tab キーを押して、開始タグを完成させます。
「.c」と入力します。必ずピリオドも入力してください。
IntelliSense リストが表示され、Children プロパティが選択されています。
下方向キーを使用して ColumnDefinitions プロパティまでスクロールします。
Tab キーを押して、タグを完成させます。
カスタム型での IntelliSense の使用方法の詳細については、「方法 : 名前空間を XAML にインポートする」を参照してください。
かっこの一致機能
かっこの一致機能を使用して、要素内を移動できます。
かっこの一致機能を使用するには
XAML ビューで、<LinearGradientBrush> 開始タグ内をクリックします。
Ctrl + 終わり角かっこ (]) キーを押します。
カーソルが開始タグの末尾に移動します。
再度 Ctrl + 終わり角かっこ (]) キーを押します。
カーソルは終了タグの先頭に移動します。
<LinearGradientBrush> 要素の終了タグから右山かっこ > を削除します。「>」と入力し、終了タグを閉じます。
XAML ビューで、開始タグと終了タグが強調表示されます。
自動フォーマット
Ctrl キーを押しながら K キーと D キーを押すと、XAML を書式設定したり、自動フォーマット設定を指定したりできます。詳細については、「方法 : XAML ビュー設定を変更する」を参照してください。
自動フォーマットを使用するには
XAML ビューで、4 つの <GradientStop> 要素を選択します。
Shift + Tab キーを押します。
4 つの要素宣言が左に移動します。
Ctrl キーを押しながら K キーと D キーを押します。
4 つの要素宣言がインデントされます。その他にも XAML に変化を確認できます。
最初の <GradientStop> タグで、Color 属性の前のスペース内をクリックします。Enter キーを押して改行します。
Offset 属性の前のスペース内をクリックし、Enter キーを押して改行します。
Ctrl キーを押しながら K キーと D キーを押します。
属性は新しい行のままです。
Color 属性の前に 4 つのスペースを挿入し、Ctrl キーを押しながら K キーと D キーを押します。
Color 属性の位置は変わりません。