チュートリアル : WPF デザイナーでの XAML の編集

[アーティクル]
08/09/2011

WPF Designer for Visual Studio には、Visual Studio のその他の言語エディターと同じ多くの機能を備えた XAML エディターがあります。このトピックでは、IntelliSense、アウトライン機能などの機能を使用する方法について説明します。

このチュートリアルでは次のタスクを行います。

WPF プロジェクトを作成する。
リソースを作成する。
構文を強調表示する。
タグナビゲーションを使用する。
アウトライン機能を使用する。
IntelliSense を使用する。
かっこの一致機能を使用する。
自動フォーマットを使用する。

注意

実際に画面に表示されるダイアログボックスとメニューコマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「設定の操作」を参照してください。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

Visual Studio 2010.

プロジェクトの作成

最初に、ホストアプリケーションのプロジェクトを作成します。

プロジェクトを作成するには

Visual Basic または Visual C# で XamlEditing という名前の新しい WPF アプリケーションプロジェクトを作成します。詳細については、「方法 : 新しい WPF アプリケーションプロジェクトを作成する」を参照してください。

WPF デザイナーで MainWindow.xaml が開きます。

リソースの作成

WPF アプリケーションでは、よくリソースを使用します。 WPF デザイナーには、リソースセクションの折りたたみ可能なアウトライン機能と、[ドキュメントアウトライン] ウィンドウでのリソースセクションへのナビゲーション機能が用意されています。

リソースを作成するには

WPF デザイナーで MainWindow.xaml を開きます。

XAML ビューで、次の XAML を MainWindow の開始タグの後に挿入します。

この 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 要素にマウスポインターを移動します。

MainWindow のサムネールが表示されます。
タグナビゲーターで、Window のハイパーリンクをクリックします。

MainWindow の開始タグが XAML ビューで強調表示されます。
XAML ビューで、<Window.Resources> タグをクリックします。

タグナビゲーターは、<Window.Resources> 要素への XAML ツリー階層を表示します。
タグナビゲーターで、Resources の右側の [子タグの選択] 矢印をクリックします。

ポップアップに子要素が表示されます。
[LinearGradientBrush (backgroundBrush1)] をクリックします。

XAML ビューで、<LinearGradientBrush> 要素が選択されます。

アウトライン

WPF デザイナーは、折りたたみ可能なアウトライン機能を完全にサポートしています。

アウトライン機能を使用するには

XAML ビューで、<Window.Resources> 要素までスクロールします。
開始タグの左側にある折りたたみボタンをクリックします。

<Window.Resources> 要素が折りたたまれて、1 行になります。
開始タグの左側にある展開ボタンをクリックします。

<Window.Resources> 要素が展開されて、元の状態に戻ります。

IntelliSense

WPF デザイナーは IntelliSense を完全にサポートしています。

IntelliSense を使用するには

grid1 要素内で「<Gr」と入力します。

IntelliSense リストが表示され、Grid クラスが選択されています。
Tab キーを押して、開始タグを完成させます。
「.c」と入力します。必ずピリオドも入力してください。

IntelliSense リストが表示され、文字 C で始まる最初のプロパティが選択されています。
下方向キーを使用して 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 属性の位置は変わりません。

参照

次の方法で共有

チュートリアル : WPF デザイナーでの XAML の編集

必須コンポーネント