この記事はXAMLアドベントカレンダー 2016 3日目の記事です。
この記事では、Visual StudioのXAMLエディタの機能で、そこそこ便利なんだけど、あまり知られて無さそうなものをいくつか紹介したいと思います。
VS2015に搭載されている機能を紹介しているので、以前のバージョンのVSでは使用できないものもちらほらありますのでご注意を。
GUI部品のレイアウトなど
まずは、XAMLデザイナ上でのレイアウト機能について。
VSのXAMLデザイナでは、パワーポイントなどでの図形編集のように、要素を水平/垂直方向に整列させたり、レイアウトを調整するようなことができます。
整列/レイアウト
以下のように適当にコントロールを配置し、それらを複数選択した状態から、要素の中央ぞろえなどをすることができます。
ほかにも、右クリックメニューレイアウトの項目から、余白やサイズの調整などもできます。
パネルに含める
上記メニュー項目を実行すると、選択していた項目を指定したパネルに内包した構造になるように変更できます。
グリッド表示とスナップ
サンプルコード用などで、ちゃっちゃとコントロール類を配置したい場合には、
グリッドへのスナップをONにして、適当にコントロールを並べるのも便利かもしれません。
ドキュメントアウトライン
XAMLのツリー構造を、このようにアウトライン表示できます。
ドキュメントアウトラインで要素を選択すると、その要素をXAMLデザイナで選択した状態になります。
コントロールの非表示/ロック機能
このドキュメントアウトラインで、要素名右側のアイコンで以下のようなことができます。
- デザイナ上での表示/非表示を切り替え
- デザイナ上で編集できないようにロックする
- ⇒ロックしておくと、誤ったマウス操作により、レイアウトを崩してしまうのを防げます。
非表示/ロックの設定をすると、↓のように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エディタ上で折りたたむことができます。
| 通常状態 | 折り畳み状態 |
|---|---|
 |  |
詳細は以前書いた↓をご参照ください。
http://sourcechord.hatenablog.com/entry/2015/08/08/005048
Peek in XAML
XAMLでも、「定義をここに表示」できるようになりました。
StaticResouceなどを指定している部分で、右クリックメニューから「定義をここに表示」を選ぶと、以下のように定義内容をポップアップで表示してくれます。
また、この状態でコードを編集することもできます。
今日はこの辺まで。