Visual Studio の XAML デザイナーを使用すると、WPF および UWP プロジェクトの XAML ドキュメントを視覚的に編集できます。 デザイナー オプションを有効にしてカスタマイズすることで、ワークフローを合理化し、ニーズに合わせて編集エクスペリエンスを調整できます。 この記事では、デザイナーを有効にし、その主要なオプションを構成する方法について説明します。
[前提条件]
- Visual Studio がインストールされている
- XAML ベースのプロジェクト (WPF や UWP など)
XAML デザイナーを有効にする
XAML デザイナーで、XAML ドキュメントのビジュアル編集機能と高度な IntelliSense にアクセスできるようにします。
- Visual Studio を起動し、メイン メニューから [ツール] > [オプション] を選択します。
[オプション] ウィンドウで、[すべての設定]>XAML デザイナー>General セクションを展開します。
[ XAML デザイナーを有効にする] チェック ボックスをオンにします。
変更を有効にするには、Visual Studio を再起動します。
- [ オプション] ダイアログで、 XAML デザイナー>General セクションを展開します。
[ XAML デザイナーを有効にする ] チェック ボックスをオンにし、[ OK] を選択します。
変更を有効にするには、Visual Studio を再起動します。
既定のドキュメント ビューを設定する
XAML ソース コード、コードのビジュアル デザイン ビュー、またはその両方など、XAML ドキュメントを開いたときにどのように表示されるかを選択します。
- [ツール>オプション] ウィンドウを開き>>] セクションを展開します。
- [ツール>オプション] ダイアログを開き、[XAML デザイナー>General] セクションを展開します。
ドロップダウン リストを使用して、 既定のドキュメント ビュー 設定の値を設定します。
- ソース ビュー: XAML ソース コードのみを表示します。
- デザイン ビュー: ビジュアル デザイナーのみを表示します。
- 分割ビュー: ビジュアル デザイナーとソース コードの両方を並べて表示します。
- [OK] を選択.
分割の向きを変更する
ワークフローに合わせて分割ビューのレイアウトを調整します。
- [ツール>オプション] ウィンドウを開き>>] セクションを展開します。
- [ツール>オプション] ダイアログを開き、[XAML デザイナー>General] セクションを展開します。
ドロップダウン リストを使用して、[ 分割の向き ] 設定の値を設定します。
- 縦: 左側のウィンドウにソース コードを表示し、右側のウィンドウにビジュアル デザイナーを表示します。
- 水平: 上部ペインにビジュアル デザイナーを表示し、下部ペインにソース コードを表示します。
- 既定値: プラットフォームが推奨する向きを使用します。
- [OK] を選択.
ズーム動作を構成する
ナビゲーションを容易にするために XAML デザイナーを拡大する方法を設定します。
- [ツール>オプション] ウィンドウを開き>>] セクションを展開します。
- [ツール>オプション] ダイアログを開き、[XAML デザイナー>General] セクションを展開します。
ドロップダウン リストを使用し、次の設定を 使用して Zoom の値を設定します。
- マウス ホイール
- Ctrl + マウス ホイール
- Alt + マウス ホイール
- [OK] を選択.
Visual Studio の設定をリセットする方法の詳細については、「 設定のリセット」を参照してください。
既定のズーム設定
この設定を使用して、XAML ドキュメントを表示するための既定のズーム値を決定します。
- [ツール>オプション] ウィンドウを開き>>] セクションを展開します。
- [ツール>オプション] ダイアログを開き、[XAML デザイナー>General] セクションを展開します。
ドロップダウン リストを使用して、[ 既定のズーム設定 ] オプションの値を設定します。
- 最後に使用: 既定では、すべての XAML ドキュメントで最後に使用したズーム値を使用します。 XAML ドキュメントを初めて開く場合は、[すべて収める] 設定が初めて使用されます。
- すべて合わせる: このオプションを使用して、XAML デザイナーのズーム値を [すべて収める] に設定します。 XAML ドキュメントを閉じて再度開くと、最後の設定値はそのセッションに対して保持されますが、異なるセッションでは既定で "Fit All" が使用されます。
- [OK] を選択.
エディターの設定
これらの設定により、XAML ドキュメントを編集するときのビジュアル デザイナーの動作が決まります。
| 名前 | Description |
|---|---|
| 作成時に対話型要素に自動的に名前を付けます | デザイナーに追加するときに、新しい対話型要素の既定の名前を指定するかどうかを指定します。 |
| 要素の作成時にレイアウト プロパティを自動的に挿入する | 新しい要素をデザイナーに追加するときに、レイアウト プロパティを指定するかどうかを指定します。 レイアウト プロパティは、Margin や VerticalAlignment など、コントロールのレイアウトに影響を与えるプロパティです。 次の XAML は、このオプションを選択した状態と選択していない状態でボタンを作成する方法を示しています。<Button Content="Button" HorizontalAlignment="Left" Margin="245,56,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75"/><Button Content="Button" Grid.Row="1"/> |
| クアドラントベースのレイアウトを使用する | 現在選択されているコントロールが親コンテナーの最も近い端に揃えるかどうかを指定します。 このチェック ボックスをオフにすると、移動または作成操作中にコントロールの配置は変更されません。 |
| ツールボックス項目を自動的に設定する | 現在のソリューションのユーザー コントロールとカスタム コントロールをツールボックスに自動的に表示するかどうかを指定します。 |
| 要素の作成時にサンプル データを自動的に追加する | デザイナーに追加するときに、新しい対話型要素のサンプル データを自動的に追加するかどうかを指定します。 |
| デザイナーのクイック アクションを有効にする | キーボード クイック アクションを使用して、ツールボックスの機能にアクセスできます。 |
設定 (ブレンドのみ)
Blend を使用して XAML ファイルを編集するときに、これらのオプションを使用して一意の設定にアクセスします。
Blend で、[ツール>オプション] ウィンドウを開き>>] セクションを展開します。
Blend で、[ ツール>オプション ] ダイアログを開き、[ XAML デザイナー>General ] セクションを展開します。
Blend 固有のプロパティが 1 つあります。
- 型の単位: デザイナーの測定値がポイントまたはピクセルに基づいているかどうかを指定します。 ユニバーサル Windows アプリはポイントをサポートしていないため、[ ポイント] を選択すると、単位は自動的にピクセルに変換されます。
アートボード (ブレンドのみ)
これらの設定を使用して、Blend で XAML ドキュメントを編集するときの XAML デザイナーの動作を決定します。
Blend で、[ツール>オプション] ウィンドウを開き>>] セクションを展開します。
Blend で、[ ツール>オプション ] ダイアログを開き、[ XAML デザイナー>Artboard ] セクションを展開します。
次のセクションでは、使用可能な Artboard プロパティについて説明します。
スナップ機能
| 名前 | Description |
|---|---|
| スナップ グリッドを表示する | コントロールの配置に役立つグリッド線をデザイナーに表示するかどうかを指定します。 [グリッド線にスナップ] オプションが選択されている場合、デザイナーに追加されたコントロールは、これらの グリッド線にスナップ されます。 |
| グリッド線にスナップ | コントロールがデザイナーの周囲に追加または移動されると、グリッド線にスナップされます。 |
| 枠線の間隔 | グリッド線間の間隔をピクセルまたはポイントで指定します ( [種類の単位 ] 設定によって決まります)。 |
| スナップラインへのスナップ | コントロールをスナップ線にスナップするかどうかを指定します。 |
| 既定の余白 | スナップ線にスナップを有効にすると、コントロールとスナップ線の間隔をピクセルまたはポイントで指定します ([単位の種類] 設定で決まります)。 |
| 既定のパディング | スナップ線にスナップを有効にすると、コントロールとスナップ線の間の余分な間隔をピクセルまたはポイントで指定します ([単位の種類] 設定によって決まります)。 |
アニメーション
アニメーション 設定を使用して、依存する(アクセラレーションされていない)アニメーションが Blend で有効になっている場合に警告が表示されるかどうかを決定します。
エフェクツ
Blend で作業するときに XAML デザイナーで XAML ファイルを編集するときに効果がレンダリングされるかどうかを確認するには、[ 効果 ] 設定を使用します。
| 名前 | Description |
|---|---|
| レンダリング効果 | Blend を使用して XAML デザイナーで XAML ファイルを編集するときに効果をレンダリングするかどうかを指定します。 |
| ズームのしきい値 | [レンダリング 効果]チェックボックス がオンの場合に効果がレンダリングされるズームの割合を指定します。 この設定を超えてズームすると、XAML デザイナーで効果がレンダリングされなくなります。 |