Dynamic Data Display がInteractive Data Display for WPFへ

おちラボでは、WPFでのグラフ表示にD3（Dynamic Data Display）を利用していましたが、いつのまにか（約1年ほど前に）、Interactive Data Display for WPFという名前で新しくリリースされていた模様。
D3は5年以上も更新がされておらず、それに代替するライブラリとして

• LiveCharts

を一部で利用していたのですが、Microsoft謹製ということで、Interactive Data Display for WPFのほうがいいのかどうか。。。以前と変更点はあるのか、、要チェックですね。

XAML の UI デバッグツールを無効にする

最近、やっとVisual Studio2015を使い始めたのですが、実行するとなにやら変な物が出ます。上の画像みたいな黒いやつです。これは、

• 実行中の WPF アプリケーションのビジュアル ツリーやツリー内の任意の要素のプロパティを検査することができます（Visual Studio日本チームBLOGより）

という優れものらしいですが、とりあえず今の私には不要なので、邪魔。。。

というわけで、消し方ですが、

• デバッグ > オプション メニューより、デバッグ > 全般 > XAML のUI デバッグツールを有効にするのチェックを外す

で解決です。

ホントは、使いこなせたほうがいいんでしょうけど、とりあえず。

WPFにてメニューバーを設置する

WPFでもFormと同様にメニューを設置することはできますが、デザイン画面でドラッグ＆ドロップするだけではだめで、レイアウトを決める必要があります。コツとしては、

• Gridレイアウトに載せる

ということですが、そのテンプレートをここに書いておきます。

WPFで画像表示が荒いと感じた場合の設定

WPFを本格的に使いだして２年目ですが、まだまだよくわからないところがありますね。tiffファイルの表示をWPFでやろうと思ったら、やけに荒い。。。WPFってUI周りが綺麗になるんじゃないの？Formの時より汚くなってるジャーンって、いろいろ調べて解決策がわかりました。XAMLのウィンドウタグに

• RenderOptions.BitmapScalingMode="HighQuality"

のパラメータを設定すれば、OKです。どれだけ違いがあるのかは、下記のとおりです。

【デフォルト設定】


【HighQuality設定】


おわかりいただけだだろうか？

Gridパネルに配置された子要素を行列指定で取得する

WPFのGridパネルに配置された子要素を行列指定で取得する方法です。直接参照はできないようで、ラムダ式を使って検索をかけて該当する子要素をとってくるという形式になります。WPFでのUIコンポーネントの配置や参照方法はいまいち癖がありますね

WPFでDoEventsを実現する

WindowsプログラミングというかVisualBasicの古くからあるおまじない的なメソッドとしてDoEventsがあります。これはOS側に処理を一旦渡す処理を行ってくれるので、ループ処理で重くなったUI描画を軽くしたい（実行させたい）ときに使う常套手段でした。昔のWindowsは擬似マルチタスクでしたからこのような処理が有効でしたが、現在はマルチスレッド化で対応するのが奨励されています。
ただ、マルチスレッド化するまでもない処理もあるわけで、.Net Frameworkに移行してからも「Application.DoEvents」というメソッドが残っており利用されてきましたが、WPFのフレームワークではそれがなくなってしまいました。
で、その代替手段が下記のコードになります。DispacherFrameというWPFのUIキューを呼び出してそれをInvokerにより実行させることで、UIの描画処理を行わせてます。

Dynamic Data DisplayでWPF版グラフ処理

WPFではFormアプリケーションと比べるとライブラリの数が少ない傾向があります。グラフ作成に関して、FormアプリケーションではChart コンポーネントが標準であるのですが、WPFでは今だに標準では用意されていない状況です。とりあえず以下の3つを使うのが一般的なようです。各ライブラリの細かい説明は省きますが、だいたい次の特徴があります。
（1）WPF Toolkit
Chartコンポーネントの実装がunstableになっているなど、一部不安定。更新もされていない。後継に、Extended WPF Toolというのがある？

（2）Dynamic Data Display
動的な変化に強い。更新はされてない
（3）Metoro Chart
Windows8のメトロUI向け。最近更新されている。

本ラボでは、動的なLineChartのグラフ更新をしたかったので（2）を選択しました。（1）も試してみたんですが、unstableな状態のせいか、だんだん速度が遅くなって最終的に動作が停止してしまうんです。同じような使い方で（2）では問題なくサクサク更新してくれました。(3)については将来的に使うようになるかもしれません。

スレッド外にあるImageクラス（WPF）にWritableBitmapを割り当てる

WindowsのUIクラスは、基本的にメインのスレッドで動いており、他のスレッドから操作することはできないようになっています。例えば、他のスレッドからカメラの映像をリアルタイムで取り出し、それをImageクラス（WPF）に表示するという記述は原則できません。
もちろん、これを解決する策はあり、Invokerを経由すれば可能です。一番簡単な方法は、下記のサンプルソースに示すようにラムダ式を利用することで簡潔に表現できます。

なお、このケースでの注意点はもう１つあります。それは、Imageクラスに描画するためのWritableBitmapもスレッド外から操作できるように、Freezeしておく必要があります。実はここが一番の悩みどころだったりしました。

Byte[]に入っているJPEGデータをBitmapImageに変換する

Byte[]に格納されているデータをWritableBitmapに変換するためには、

MemoryStream を経由してBitmapImageのStreamSourceに設定する 

のがよいらしいです。ただし、BeginInitとEndInitが必要です。これがないとダメです。

Byte[]に入っているJPEGデータをWritableBitmapに変換する

Byte[]に格納されているデータをWritableBitmapに変換するためには、

MemoryStream -> BitmapFrame -> WritableBitmap

という流れでやるとよいらしいです。下記のサンプルでは、MemoryStreamへの変換を２回やってますが、１回でいいかもしれません。

WPFでChartを利用するには、Silverlight/WPF Data Visualization Developmentを使えばよい

C#のデスクトップアプリでグラフ（Chart）を利用するには、Windows Formプロジェクトであれば、

System.Windows.Forms.DataVisualization.Charting

を利用すればいいわけですが、WPFプロジェクトであればそう簡単にはいきません。なんと標準ではChart系のGUIコンポーネントがないという信じられない状況。
で、どうやら

• Silverlight/WPF Data Visualization Development

というのをダウンロードするといいようです。

使い方

次のいずれかの方法で使えます。

• ダウンロードしたプロジェクトを参照する
• \Binaries\WPF4にあるSystem.Windows.Controls.DataVisualization.Toolkit.dll　を参照に追加

とりあえず、Visual Studio2010でデスクトップアプリ（WPFプロジェクト）で動作確認しました。ネットの資料が少なそうですが、WPF ToolKitと同じ流れにあるようなので、その関連資料をみれば使い方がわかるのではないでしょうか？