2013年02月27日

WPFサンプル:CollectionViewSourceを使ったListViewの並び替えとフィルター処理

   このエントリーをはてなブックマークに追加 Clip to Evernote
前回「WPFサンプル:CollectionViewSourceを使い、ListViewを表示する」では、並び順をXAMLで
指定しただけなので、ヘッダー部分をクリックしても並び替えは行えませんでしたが、
今度はヘッダー部をクリックして並び替えを行えるようにします。

CollectionView21

CollectionView22

まずは、XAMLから。前回との違いは、GridViewColumnHeader.Click の指定を追加しただけです。


全体を示します。


Bookクラスと、BookListクラスは、前回と全く同じなので割愛します。

さて、前回はコードビハインドには何も追加しませんでしたが、今度はいろいろと書いていきます。

ひとつひとつ説明するのは面倒なので、MainWindow クラス(C#)を一度に載せちゃいます。


_lastHeaderClicked 変数は、どのヘッダーがクリックされたのかを覚えておくもの。
_lastDirection変数は、最後にソートされた方向(昇順、降順)を覚えておくものです。
_collectionView変数は、ListViewに関連付けられたCollectionViewSourceです。

GridViewColumnHeaderClickedHandlerで、どのカラムヘッダーがクリックされたのかを調べ、
ソート順を決定し、Sortメソッドを呼び出しています。
Sortメソッドで、CollectionViewSourceにソートを指示しています。
Aカラム、Bカラムの順にクリックしたら、第2ソートキーをBカラムにするといった処理にしたい場合には、
もう少し工夫が必要ですが、CollectionViewSourceでどう並び替えをするのか
という本質が見えにくくなるのでここでは単純なやり方にしています。

おまけで、フィルター処理も追加しましょう。
例えば、この画面では、Priceが2600以上の書籍のみを表示させたいという場合には、MianWindowの
コンストラクタを以下のように記述します。


このコードには、どこにもモデルであるBookListクラスへの参照コードは出てきません。
常に、ViewSourceに対しての操作になっている点に注意してください。

スクリーンショットを見ていただければわかりますが、カラムヘッダーに▼や▲マークがありません。
やはり、▼や▲マークを表示させたいですよね。
次回は、その方法をお見せします。

  

Posted by gushwell at 22:30Comments(0)TrackBack(0)

2013年02月24日

WPFサンプル:CollectionViewSourceを使い、ListViewを表示する

   このエントリーをはてなブックマークに追加 Clip to Evernote
CollectionViewSourceを使い、ListViewを表示するサンプルです。
CollectionViewSourceとは、コレクションオブジェクト(ソースコレクション)とListViewなどの
ItemsControlの派生クラスの間を取り持つクラスです。
これを使うと、コレクションオブジェクトに影響を与えることなく、並べ替え処理、フィルター処理、
グループ化を行うことができます。

今回は、並べ替え処理(といっても、固定的な並び替え)を行うサンプルを示します。

まずは、C#でコレクションオブジェクトの定義をします。


これをListViewにバインドするXAMLを示します。


Window.ResourcesにCollectionViewSourceを指定し、このSourceとして、BooksDataオブジェクトを
バインドしています。
そして、ViewであるListViewには、このCollectionViewSourceをバインドしています。
CollectionViewSourceのSortDescriptionsには、


と指定しているので、Date、Priceの昇順にソートされます。

なお、今回は、Window.DataContextではなく、ListView.ItemsSourceにバインディングソースを割り当てています。
深い意味はないです。(そんな指定もできるんだなという例ということで...)

以下、実行結果です。

CollectionViewSource1
  
Posted by gushwell at 22:30Comments(0)TrackBack(0)

2013年02月21日

WPFサンプル:IsSynchronizedWithCurrentItemプロパティ

   このエントリーをはてなブックマークに追加 Clip to Evernote
ListBoxで選択された項目を、TextBlockにバインドするサンプルです。
WPFサンプル:ListBoxでは、UI要素同士をバインドしましたが、今度は、コレクションオブジェクトを
仲介し、選択した項目をTextBlockに表示しています。

以下、実行画面。
IsSynchronizedWithCurrentItem1

IsSynchronizedWithCurrentItem2

このサンプルで注目すべきなのが、IsSynchronizedWithCurrentItemプロパティです。(XAMLは最後に掲載)
IsSynchronizedWithCurrentItem プロパティを true に設定することで、現在選択されている
項目(SelectedItem)が、TextBlockのTextプロパティと同期することになります。
マスター詳細シナリオで利用出来そうです。

この時に、TextプロパティのBinding指定は、以下のように書きます。

   Text="{Binding Path=CompanyList/WebSite}"

プロパティ名をスラッシュで区切って記述することで、階層的なデータ構造にアクセスすることが できます。

IsSynchronizedWithCurrentItem プロパティを false にした場合、ListBoxを選択しても
TextBlockは更新されません。

以下に、XAMLとC#のコードを示します。


  
Posted by gushwell at 22:30Comments(0)TrackBack(0)

2013年02月19日

WPFサンプル:コレクションオブジェクトとのバインディング(2)

   このエントリーをはてなブックマークに追加 Clip to Evernote
WPFサンプル:コレクションオブジェクトとのバインディングでは、本当に基礎の基礎といった感じのサンプルでしたが、
今度は、ObservableCollectionを利用したサンプルです。
ObservableCollectionクラスは、INotifyCollectionChangedを実装しているコレクションクラスですので、
要素が追加、削除された時や、リスト全体が更新されたときなどに、変更通知を行ってくれます。

WPFCollectionBinding1

WPFCollectionBinding2

AddItemボタンを押すと、データをListBoxに直接追加するのではなく、リストオブジェクトにデータを
追加するだけで、ListBoxの表示が更新されます。

まずは、C#でコレクションを保持するクラスの定義を行います。


MyDataオブジェクトを複数保持するクラスで、内部で ObservableCollection を利用しています。
ここでは、単純化するために、MyDataクラスには、INotifyPropertyChangedを実装していません。
MyDataオブジェクトの中身が変更された場合も変更通知を利用したいならば、INotifyPropertyChanged を実装する必要があります。
次に、このSeasonListをバインディングソースとするXAMLを示します。


Add Itemsボタンをクリックしたときの処理を記述します。


DataContextに設定したバインディングソースである SeasonListオブジェクトに要素を追加しています。
要素が追加されると自動的に変更通知が行われ、GUI(バインディングターゲット)が更新されます。

  
Posted by gushwell at 22:02Comments(0)TrackBack(0)