SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

Visual StudioのXAMLエディタの地味に便利な機能

WPF UWP

この記事はXAMLアドベントカレンダー 2016 3日目の記事です。

この記事では、Visual StudioのXAMLエディタの機能で、そこそこ便利なんだけど、あまり知られて無さそうなものをいくつか紹介したいと思います。

VS2015に搭載されている機能を紹介しているので、以前のバージョンのVSでは使用できないものもちらほらありますのでご注意を。

GUI部品のレイアウトなど

まずは、XAMLデザイナ上でのレイアウト機能について。

VSのXAMLデザイナでは、パワーポイントなどでの図形編集のように、要素を水平/垂直方向に整列させたり、レイアウトを調整するようなことができます。

整列/レイアウト

以下のように適当にコントロールを配置し、それらを複数選択した状態から、要素の中央ぞろえなどをすることができます。
f:id:minami_SC:20161203235708p:plain

ほかにも、右クリックメニューレイアウトの項目から、余白やサイズの調整などもできます。
f:id:minami_SC:20161203235841p:plain

パネルに含める

f:id:minami_SC:20161203235847p:plain
上記メニュー項目を実行すると、選択していた項目を指定したパネルに内包した構造になるように変更できます。

グリッド表示とスナップ

f:id:minami_SC:20161203235928p:plain
サンプルコード用などで、ちゃっちゃとコントロール類を配置したい場合には、
グリッドへのスナップをONにして、適当にコントロールを並べるのも便利かもしれません。

ドキュメントアウトライン

XAMLのツリー構造を、このようにアウトライン表示できます。
f:id:minami_SC:20161203235857p:plain

ドキュメントアウトラインで要素を選択すると、その要素をXAMLデザイナで選択した状態になります。

コントロールの非表示/ロック機能

f:id:minami_SC:20161203235946p:plain
このドキュメントアウトラインで、要素名右側のアイコンで以下のようなことができます。

  • デザイナ上での表示/非表示を切り替え
  • デザイナ上で編集できないようにロックする
    • ⇒ロックしておくと、誤ったマウス操作により、レイアウトを崩してしまうのを防げます。

非表示/ロックの設定をすると、↓のようにd:IsHiddenなどのプロパティが設定されます。

            <Button Width="75"
                    Margin="5"
                    Content="Button1" d:IsHidden="True" />
            <Button Width="75"
                    Margin="5"
                    Content="Button2" d:IsLocked="True"/>

XAMLエディタの関係

この辺は、主にVS2015で追加された機能です。

XAMLコードの折り畳み機能

<!--#region 領域名-->、<!--#endregion -->というコメントで括った領域を、XAMLエディタ上で折りたたむことができます。

通常状態 折り畳み状態
f:id:minami_SC:20161204000000p:plain f:id:minami_SC:20161204000006p:plain

詳細は以前書いた↓をご参照ください。
http://sourcechord.hatenablog.com/entry/2015/08/08/005048

Peek in XAML

XAMLでも、「定義をここに表示」できるようになりました。
f:id:minami_SC:20161204000029p:plain

StaticResouceなどを指定している部分で、右クリックメニューから「定義をここに表示」を選ぶと、以下のように定義内容をポップアップで表示してくれます。
f:id:minami_SC:20161204000046p:plain

また、この状態でコードを編集することもできます。

今日はこの辺まで。