マウスのドラッグ イベントを Rx で実装する

WPF などの GUI アプリケーションでマウスのドラッグ操作を扱うには、
例えばマウスのドラッグ中の各点の情報も通知するなどの要件に合わせて、
基本的には自分で実装することになると思います。

従来であれば、MouseDown などの各イベントごとにイベントハンドラーを登録して実装していましたが、
リアクティブ プログラミングにすることで、より抽象度の高い形式で扱えるようになります。
今回は、WPF のマウスのドラッグ イベントを Reactive Extensions (Rx) で実装してみます。

WPF アプリケーション プロジェクトを作成して、NuGet で System.Reactive をインストールします。
そして次のクラスを作成します。

イベントと IObservable は、本質的には等価です。
まず Observable.FromEventPattern メソッドを使って、
MouseDown などの既存のイベントを IObservable<MouseEventArgs> に変換します。

ドラッグの実装方法については、
MouseDown が発生してから MouseUp または MouseLeave が発生するまでの間、MouseMove を通知させます。
これが MouseDown の発生のたびに開始するため、
MouseDrag の型は IObservable<IObservable<Vector>> のような入れ子になります。
ここでは、MouseDown イベントが発生した位置からの変位を通知することにしています。
(要件によって実装方法は異なるでしょう。)

次に、上で実装した MouseDrag を利用するには、次のコードのようになります (主にコンストラクターの部分)。
完全なソースコードは MouseRx2Wpf (GitHub) にあります。

ウィンドウには、変位とそれを表す 8 方向の矢印を表示しています。

MouseRx2Wpf

 

この方法はマウス以外にも応用できます。
Leap Image Pinch は、Leap Motion Controller を使って空中で 2 本の指でつまんで画像をドラッグする例です。

作成したサンプル
MouseRx2Wpf (GitHub)

バージョン情報
.NET Framework 4.5

参照
System.Reactive
Reactive Extensionsの概要と利用方法
Leap Image Pinch

広告

WPF で外枠にはみ出さないようにする

WPF で、Border や Grid などの枠の中に、その領域をはみ出すようなコントロールを配置して、
それを Transform などで移動させるとします。
すると、そのコントロールの一部が切り取られてしまったり、外枠にはみ出てしまうなど、期待通りの動作にならないことがあります。
以下では、この現象をどうすれば回避できるかを試していきます。
(追記: Canvas で ClipToBounds="True" とすればよい、とコメントを頂いたため、後半に追記しました。)

Blend for Visual Studio で WPF アプリケーション プロジェクトを作成して、
Border の中に Rectangle を配置して、Rectangle を期待通りに動かせるかどうかを調べます。

Window の領域を 4 つに分けて、以下の方法を試してみます。

  • 左上: Border の中に Rectangle を配置するだけ
  • 右上: Border と Rectangle の間に Canvas を配置する
  • 左下: Border と Rectangle の間に ScrollViewer と Canvas を配置する
  • 右下: Border と Rectangle の間に ScrollContentPresenter と Canvas を配置する

ScrollViewer を使うことで、外側にはみ出さないようにします。
スクロールバーを消すために、VerticalScrollBarVisibility プロパティを Disabled に設定します。
また、ScrollContentPresenter は、ScrollViewer の中で使われているコントロールです。

すると、Blend for Visual Studio のデザイナーでは次のように表示されます。
この時点で、右上の方法では外枠の Border の上に描画されてしまうことがわかります。

FrameLayoutWpf

また、この 4 つの Rectangle に対して、TranslateZoomRotateBehavior を設定します。
(Blend for Visual Studio のアセットからドラッグ アンド ドロップします。)
これで、実行時にタッチ操作などでコントロールを動かせるようになります。

全体の XAML は次のようになります。

このアプリケーションを実際に動かしてみます。

FrameLayoutWpf

  • 左上: 初期配置の領域以外の部分は切り取られてしまいます。
  • 右上: Rectangle が枠外にはみ出します。
  • 左下: 期待通りです。
  • 右下: 期待通りの動作ですが、ScrollContentPresenter.Content が既定プロパティではないため、
    上の階層がデザインツールに表示されません。

 

ここで、よねやんさんから、Canvas の ClipToBounds プロパティの値を True にすればよい、とコメントを頂きました。

右上の Canvas を変更して実行してみます。

FrameLayoutWpf

期待通りです。
というわけで、ScrollViewer などは不要になりました。
Canvas を配置して、ClipToBounds="True" を設定するだけです。

 

作成したサンプル
FrameLayoutWpf (GitHub)

バージョン情報
.NET Framework 4.5

参照
UIElement.ClipToBounds プロパティ

C# のコードでデータ バインディング (4)

C# のコードでデータ バインディング (1) の中で Binding Source の条件について書きましたが、
INotifyPropertyChanged でも DependencyObject でもないオブジェクトの場合は少し難解な動作をします。
というのも、プロパティ変更通知ができないはずのオブジェクトに対して、
内部で PropertyDescriptor を経由して双方向のバインディングができるように試みるためです。

POCO である Person0 クラスを利用したコードを以下に示します。

Binding Source 側を変更しようとするとき、通常の

person.Name = "Jiro";

というコードでは変更は通知されません。
変更を通知するには PropertyDescriptor.SetValue メソッドを使います。
なお、変更時のイベントハンドラーを登録するには PropertyDescriptor.AddValueChanged メソッドを使います。

Binding オブジェクトの内部では OneTime バインディングの場合を除き、
PropertyDescriptor.SetValue メソッドおよび PropertyDescriptor.AddValueChanged メソッドを利用して、
プロパティ変更通知を試みます。

このように、オブジェクトへの操作は PropertyDescriptor を経由しなければならなくなるため、
WPF などのアプリケーションでこの方法でコードを書くのは大変です。
また、アプリケーションのコードで person への参照を削除しても、
PropertyDescriptor の中で person への参照を持ち続けるため、メモリリークの原因となるようです。
したがって、Binding Source として使うオブジェクトには INotifyPropertyChanged インターフェイスを実装させるのがよいでしょう。

補足として、PropertyDescriptor の挙動を確認するためのコードを以下に示します。

 

前回: C# のコードでデータ バインディング (3)

作成したサンプル
BindingConsole (GitHub)
PocoBindingWpf (GitHub)

バージョン情報
C# 6.0
.NET Framework 4.5

参照
【WPF】変更通知をサポートしないCLRプロパティの変更通知
【WPF】PropertyDescriptorを取得 / 利用する。

XAML マークアップ拡張を自作する

例えば XAML でデータ バインディングをするときに、

Text="{Binding Message}"

のような記法を用いますが、これは XAML マークアップ拡張と呼ばれ、
Binding クラスが MarkupExtension クラスを継承しているためにこの形式の記述ができるようになっています。

今回は例として、構成ファイル (.config) の <appSettings> の値を読み込む
XAML マークアップ拡張クラスを自作してみたいと思います。
先にコードを示します。

マークアップ拡張クラスでは、ProvideValue メソッドを実装して実際に設定する値を返します。
設定先となる依存関係プロパティを取得するには、
ProvideValue メソッドに渡される serviceProvider から IProvideValueTarget を取り出します。

さて、App.config の <appSettings> に設定値を追加して、
MainWindow.xaml 上の UI コントロールのプロパティにそれらの値を設定します。

クラス名にサフィックスとして Extension を付けておくと、サフィックスを除いた名前で記述できます。
値を設定している部分は、

Height="{local:AppSettings Key=WindowHeight}"

と書いてもよいですが、Key を引数に取るコンストラクターが存在することで、

Height="{local:AppSettings WindowHeight}"

と書けるようになります。
なお、この部分は次のようにも書けます。

<Window>
    <Window.Height>
        <local:AppSettings Key="WindowHeight"/>
    </Window.Height>
</Window>

MarkupExWpf

 

前回: プロパティ変更をタイマーで同期して通知する

作成したサンプル
MarkupExWpf (GitHub)

バージョン情報
C# 6.0
.NET Framework 4.5

参照
MarkupExtension クラス
XAML のマークアップ拡張機能の概要
型コンバーターおよびマークアップ拡張機能で使用できるサービス コンテキスト

プロパティ変更をタイマーで同期して通知する

C# のコードでデータ バインディング (1) で書いた通り、
Binding Source は INotifyPropertyChanged か DependencyObject でなければ
プロパティ変更通知ができないため、永続的に値が反映される OneWay バインディングはできません。

そこで、プロパティ変更通知機能を持たない既存のオブジェクトをタイマーで監視して
プロパティ変更通知を発生させる DynamicSyncProxy<T> クラスというのを作ってみました。

DynamicObject クラスを継承し、既存のオブジェクトを内部に持ちます。
そのオブジェクトのプロパティへのアクセスを透過するプロキシとして機能します。

さて、プロパティ変更通知機能を持たない TextModel クラスを用意して、
DynamicSyncProxy<T> を介してデータ バインディングを設定します (dynamic 型として扱います)。

この例では 0.3 秒ごとに値が同期されます。

DynamicBinding

 

前回: ExpandoObject を使ったデータ バインディング
次回: XAML マークアップ拡張を自作する

作成したサンプル
DynamicBindingWpf (GitHub)

バージョン情報
C# 6.0
.NET Framework 4.5

参照
データ バインディングの概要
C# のコードでデータ バインディング (1)

ExpandoObject を使ったデータ バインディング

C# のコードでデータ バインディング (1) では、
INotifyPropertyChanged インターフェイスを実装した Person1 クラスに
プロパティを定義してデータ バインディングを構成しました。

ところで、dynamic 型として扱うことで実行時に任意のプロパティを追加できる ExpandoObject クラスというものがあり、
しかも INotifyPropertyChanged インターフェイスを実装しています。
したがって ExpandoObject クラスを使えば、
プロパティを事前に定義しなくてもデータ バインディングができるようになります。

次のコードは、C# のコードでデータ バインディング (1) の TwoWay バインディングのコードを少し書き換えて、
ExpandoObject クラスを使うようにしたものです。
Person1 クラスを使ったときと同様にデータ バインディングが動作します。

 

さて、ExpandoObject は、XAML で DataContext に設定した場合でもプロパティにアクセスできます。
次に示す XAML では、空の ExpandoObject オブジェクトに対して、
UI コントロールから Input プロパティと Output プロパティに直接バインドしています。

コード側で、Input を大文字に変換して Output に反映させています。

ExpandoBinding

 

前回: C# のコードでデータ バインディング (3)
次回: プロパティ変更をタイマーで同期して通知する

作成したサンプル
BindingConsole (GitHub)
ExpandoBindingWpf (GitHub)

バージョン情報
C# 6.0
.NET Framework 4.5

参照
データ バインディングの概要
C# のコードでデータ バインディング (1)

C# のコードでデータ バインディング (3)

前回の C# のコードでデータ バインディング (2) では、インデクサーの変更通知について説明しました。
今回は、コレクションのデータ バインディングについてです。

コレクションのデータ バインディングをするには、
まず当然の条件として Binding Source がコレクションであることが必要です。
これがさらに INotifyCollectionChanged インターフェイスを実装していると、
コレクション内のアイテムの増減や変更を通知することができ、永続的な OneWay バインディングができます。
INotifyCollectionChanged インターフェイスを実装していない場合は OneTime バインディングとなります。

.NET Framework には、INotifyCollectionChanged インターフェイスを実装したコレクションとして
ObservableCollection<T> クラスが用意されています。
通常はこの ObservableCollection<T> を使えば十分でしょう。

また、プロパティのときの Binding クラスに相当する機能 (Source と Target をつなぐ役割) は、
たいていは ItemsControl などのコレクションを扱うコントロールに組み込まれています。

次のコードで、ItemsControl と ObservableCollection<T> を使った
データ バインディングの動作を確認できます。

ItemsControl.ItemsSource プロパティに Binding Source を設定するだけです。
ItemsControl.Items プロパティは ItemsSource に設定されたコレクションのビューとして機能するもので、
UI はこの Items プロパティの状態を元に構築されます。
Items プロパティを通して、フィルターやソートなどを設定できます。

 

前回: C# のコードでデータ バインディング (2)
次回: ExpandoObject を使ったデータ バインディング

作成したサンプル
BindingConsole (GitHub)

バージョン情報
C# 6.0
.NET Framework 4.5

参照
データ バインディングの概要