XAML のエディットコンティニューがすごい (VS2017)

Visual Studio 2017 で XAML のエディットコンティニューが出来るようになりました。これがかなりすごいので紹介したいと思います。Visual Studio 2015 でのライブビジュアルツリーもそれなりに便利にしてくれましたが、この XAML エディットコンティニューは最強だと思います。

環境

今回使用している環境は、 Windows 10 Professional (AU) です。
ここでは、 Visual Studio 2017 Professional を使用しています。
おそらく Visual Studio 2017 Community でも同様に動作するとは思っていますが未確認です。

始めに

XAML関連のデバッグ関連の機能は ON/OFF が出来るものなので、使用する前には有効状態となっているかを確認しておきます。
『「Live Visual Tree」 の機能を使わないから、黒いつまみ消したい』などといって、デバッグの機能を OFF にしている可能性もあるからです。

メニューから、 ”デバッグ – オプション” と辿って、設定ウィンドウを開きます。
ここで、デバッグ全般の項目の中に、 ”XAML の UI デバッグツールを有効にする” というものがあります。
これにチェックを入れて、 ”XAML のエディットコンティニュを有効にする” にチェックをいれれば準備は完了です。

実験

早速、 XAML のエディットコンティニューを確かめてみる前に XAML で表示すべき内容を準備しておく必要がありました。
WPF といえば　MVVM の形で組み上げていくのがお作法ともいえるので、以下のように ViewModel を作成してみました。
（一部分のみですが、値をプロパティとして公開していることがわかるかと思います）。

public class ViewModel : ViewModelBase
{
    private string _myText = "";
    public string MyText
    {
        get { return _myText; }
        set
        {
            if (_myText == value)
                return;
            _myText = value;
            RaisePropertyChanged("MyText");
        }
    }
    private RelayCommand _command = null;
    public ICommand OnChangeCommand
    {
        get
        {
            return _command ?? new RelayCommand(
                x =>
                {
                    _clickCount++;
                    MyText = string.Format($"PushCount = {_clickCount}");
                }
                );
        }
    }

またこれに対応するビューとして XAML のほうは以下のような感じとなっています。（必要なところのみ抜粋です）

こうして準備した後、デバッグ実行をしてウィンドウが表示され、値が意図通りに出ていることをまず確認しておきます。

確認できたら、これを実行したままにしておいて、 VisualStudio で XAML の編集を行います。編集したあと、保存する必要はないようです。

ここでは、TextBlock の行を TextBox に変更してみました。以下のアニメーションを見てもらうとわかるように、すぐに結果が実行中のアプリに反映されます。

C/C++ のエディットコンティニューはデバッガで停止中にコード変更、再開時に反映という手続きでした。
これが XAML の場合にはデバッガでの停止も不要、コードの保存も不要という点で恐ろしく便利になりました。
ちなみにエラーのある XAML は反映されず、手元ではいきなりクラッシュの場面にはまだ出遭っていません。

バインディングで値を変更した後、コントロールを変更するとどうなるかを見てみましょう。

このようにバインディングの値はそのままに変更が可能です。
Window のほうに OnApplyTemplate や、 Loaded イベントあたりにブレークポイントを仕掛けてみましたが、xaml の編集後のタイミングで再度停止することもありませんでした。

動画版

これらの作業をムービーにして、 YouTube にアップロードしてみました。
あまり画質がいいものではないですが、上記の流れをそのままわかってもらえるのではないかとおもいます。

こちらのほうではボタンの押下コマンドを外してみたり、ボタンそのものを削除してみたりと追加のこともやってますが、うまく動作中のアプリケーションに反映されています。しかも戻したらちゃんとバインディングも復帰します。

まとめ

WPF でアプリケーションを作っている身としては今回のこの機能が恐ろしく便利に感じています。
今回はシンプルなもので試していますが、実際のコードで通用してくれればいいと思っています。また UWP のアプリでも同様に機能するとすれば、実機などでのUIの微調整がやりやすくなるなと期待が持てます。
特に Windows10 IoT デバイスに送り込んだアプリのUIとか・・・。

[amazonjs asin=”4798114200″ locale=”JP” title=”エッセンシャルWPF:Windows Presentation Foundation (Programmer’s SELECTION)”]

[amazonjs asin=”4839956790″ locale=”JP” title=”Raspberry Pi 2とWindows 10ではじめるIoTプログラミング”]