次の方法で共有


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

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

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

  • WPF プロジェクトを作成する。

  • リソースを作成する。

  • 構文を強調表示する。

  • タグ ナビゲーションを使用する。

  • アウトライン機能を使用する。

  • IntelliSense を使用する。

  • かっこの一致機能を使用する。

  • 自動フォーマットを使用する。

注意

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

必須コンポーネント

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

  • Visual Studio 2010.

プロジェクトの作成

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

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

リソースの作成

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

リソースを作成するには

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

  2. 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>
    

    要素、プロパティ、およびプロパティ値は、それぞれ固有の色になります。

    XAML ビューにおける構文の強調表示

    マークアップ拡張機能が Background プロパティにバインドされます。 さらに、デザイン ビューでのグリッド背景も更新されます。

    デザイン ビューにおけるバックグラウンド リソース

    XAML 要素と属性の色を変更することができます。 詳細については、「方法 : XAML ビュー設定を変更する」を参照してください。

タグ ナビゲーション

タグ ナビゲーターを使用して、タグ間を移動できます。 [ドキュメント アウトライン] ウィンドウを使用して移動することもできます。 詳細については、「WPF ドキュメントの要素階層内の移動」を参照してください。

タグ ナビゲーターを使用するには

  1. XAML ビューで、<Grid> 要素の開始タグをクリックします。

  2. WPF デザイナーの下部にあるタグ ナビゲーターを見つけます。 Grid (grid1) Window/Grid と表示されています。

  3. タグ ナビゲーターで、Window 要素にマウス ポインターを移動します。

    MainWindow のサムネールが表示されます。

    XAML ビューにおけるサムネイルを使用したタグ ナビゲーター

  4. タグ ナビゲーターで、Window のハイパーリンクをクリックします。

    MainWindow の開始タグが XAML ビューで強調表示されます。

  5. XAML ビューで、<Window.Resources> タグをクリックします。

    タグ ナビゲーターは、<Window.Resources> 要素への XAML ツリー階層を表示します。

  6. タグ ナビゲーターで、Resources の右側の [子タグの選択] 矢印をクリックします。

    ポップアップに子要素が表示されます。

  7. [LinearGradientBrush (backgroundBrush1)] をクリックします。

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

アウトライン

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

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

  1. XAML ビューで、<Window.Resources> 要素までスクロールします。

  2. 開始タグの左側にある折りたたみボタンをクリックします。

    <Window.Resources> 要素が折りたたまれて、1 行になります。

    XAML ビューにおける折りたたまれたアウトライン

  3. 開始タグの左側にある展開ボタンをクリックします。

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

IntelliSense

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

IntelliSense を使用するには

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

    IntelliSense リストが表示され、Grid クラスが選択されています。

    XAML IntelliSense

  2. Tab キーを押して、開始タグを完成させます。

  3. 「.c」と入力します。 必ずピリオドも入力してください。

    IntelliSense リストが表示され、文字 C で始まる最初のプロパティが選択されています。

  4. 下方向キーを使用して ColumnDefinitions プロパティまでスクロールします。

  5. Tab キーを押して、タグを完成させます。

    カスタム型での IntelliSense の使用方法の詳細については、「方法 : 名前空間を XAML にインポートする」を参照してください。

かっこの一致機能

かっこの一致機能を使用して、要素内を移動できます。

かっこの一致機能を使用するには

  1. XAML ビューで、<LinearGradientBrush> 開始タグ内をクリックします。

  2. Ctrl + 終わり角かっこ (]) キーを押します。

    カーソルが開始タグの末尾に移動します。

  3. 再度 Ctrl + 終わり角かっこ (]) キーを押します。

    カーソルは終了タグの先頭に移動します。

  4. <LinearGradientBrush> 要素の終了タグから右山かっこ > を削除します。

  5. 「>」と入力し、終了タグを閉じます。

    XAML ビューで、開始タグと終了タグが強調表示されます。

    XAML ビューにおけるかっこの一致機能

自動フォーマット

Ctrl キーを押しながら K キーと D キーを押すと、XAML を書式設定したり、自動フォーマット設定を指定したりできます。 詳細については、「方法 : XAML ビュー設定を変更する」を参照してください。

自動フォーマットを使用するには

  1. XAML ビューで、4 つの <GradientStop> 要素を選択します。

  2. Shift + Tab キーを押します。

    4 つの要素宣言が左に移動します。

  3. Ctrl キーを押しながら K キーと D キーを押します。

    4 つの要素宣言がインデントされます。 その他にも XAML に変化を確認できます。

  4. 最初の <GradientStop> タグで、Color 属性の前のスペース内をクリックします。

  5. Enter キーを押して改行します。

  6. Offset 属性の前のスペース内をクリックし、Enter キーを押して改行します。

  7. Ctrl キーを押しながら K キーと D キーを押します。

    属性は新しい行のままです。

  8. Color 属性の前に 4 つのスペースを挿入し、Ctrl キーを押しながら K キーと D キーを押します。

    Color 属性の位置は変わりません。

参照

処理手順

方法 : 名前空間を XAML にインポートする

方法 : XAML ビュー設定を変更する

概念

WPF ドキュメントの要素階層内の移動

その他の技術情報

WPF デザイナー

XAML とコードのチュートリアル