3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

「Snoop」を使ってWPFでのUI作成を効率的に行う

Posted at

はじめに

本記事はWPFアプリケーションのビジュアルツリーを表示し、コントロールのプロパティ値変更などを支援する「Snoop」を使ってWPFでのUI作成を効率的に行う方法をまとめます。

Snoopとは

WPFアプリケーションのビジュアルツリーを表示するツールです。
UI画面上のコントロールが他のどんなコントローラを要素として構成されているかを確認できます。
また、コントロールのプロパティやコントロールのデータコンテキスト(MVVMパターンで実装している場合はViewModel)のプロパティも変更可能であり、その際の見た目の変わり方も確認できます。
詳細はこちらを参照ください。

何に使えるのか

以下のような場合にSnoopを使うことで作業効率を上げることができます。

  • コントロール中のどのプロパティを変更すると見た目が変更されるかわからない

SnoopではVisualStudio上でデバッグ中に、コントロールのプロパティ値を変更し、UIの変化をその場で確認できます。
そのため、プロパティ値の変更後にわざわざビルドしてUIの変化を確認する必要がなくなり、開発効率が向上すると考えられます。

使い方

基本的な使い方と実際に使っているイメージを示します。
(イメージは以下の3.以降の手順を対象としています。)

  1. 対象プロジェクトをデバッグ実行する
  2. Snoopを起動する
  3. 双眼鏡のボタンの右側のボタンをクリックし、コントロールの動きを見たいWPFアプリケーションにドラッグドロップする
  4. UI画面上で変化を見たいコントロールを"Ctrl+Shift"を押しながらマウスホバーする
  5. ビジュアルツリー右側のプロパティタブでプロパティを変更
  6. プロパティ変更に応じてコントロールの見た目が変化する
    Snoop動作イメージ2.gif

まとめ

本記事ではWPFアプリケーションのビジュアルツリーを表示し、コントロールのプロパティ値変更などを支援する「Snoop」を使ってWPFでのUI作成を効率的に行う方法をまとめました。
見た目の変化を即座に確認しながら開発を進めることができるため、活用していきたいですね。

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?