Silverlight5で標準のSDKに含まれたPivotViewerを使おう!
Silverlight5で標準のSDKに含まれたPivotViewerを使おう!
と、いうことを学習しながら連載していきます。指摘やアドバイスお願い致します><
PivotViewerって何?
実に特徴的なコントロールなので見ていただくのが一番早いです。
大量のデータをDeepZoomを通してシームレスに拡大、縮小しながら探すことができます。また、各種フィルタリングやソートも搭載されている、至れり尽くせりなコントロールです。
Silverlight4では別途インストールが必要でしたが、Silverlight5で標準のSDKに含まれるようになりました。
使ってみよう!
まず、Silverlight5のプロジェクトを作ります。
次にPivotのアセンブリー(System.Windows.Controls.Pivot)を参照します。
(ちなみにこの参照の追加画面は「Productivity Power Tools」という拡張機能をインストールした画面です。アセンブリーを探しやすく、また、追加したアセンブリーも表示されているので、とても便利ですよ。)
XAMLを定義
まずは、名前空間を参照します。「pv」としました。
xmlns:pv="clr-namespace:System.Windows.Controls.Pivot;assembly=System.Windows.Controls.Pivot"
いよいよ、PivotViewerを配置します。さくっと全貌を。
<pv:PivotViewer ItemsSource="{Binding People}"> <pv:PivotViewer.PivotProperties> <pv:PivotViewerStringProperty Id="Name" DisplayName="名前" Binding="{Binding Name}" Options="CanSearchText"/> <pv:PivotViewerNumericProperty Id="Age" DisplayName="年齢" Binding="{Binding Age}" Options="CanFilter"/> <pv:PivotViewerDateTimeProperty Id="BirthDay" DisplayName="誕生日" Binding="{Binding BirthDay}" Format="yyyy/MM/dd" Options="CanFilter"/> </pv:PivotViewer.PivotProperties> <pv:PivotViewer.ItemTemplates> <pv:PivotViewerItemTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock Grid.Column="0" Grid.Row="0" Text="名前: "/> <TextBlock Grid.Column="0" Grid.Row="1" Text="年齢: "/> <TextBlock Grid.Column="0" Grid.Row="2" Text="誕生日: "/> <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}"/> <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Age}"/> <TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding BirthDay, StringFormat=yyyy/MM/dd}"/> </Grid> </pv:PivotViewerItemTemplate> </pv:PivotViewer.ItemTemplates> </pv:PivotViewer>
大事なのは「PivotViewer.PivotProperties」です。ここにデータのプロパティとの対応やフィルターの種類を定義します。ここに定義したプロパティでフィルタリング、ソートが可能になります。
今回の場合は、名前は「Options="CanSearchText"」で検索欄に、年齢と誕生日を「Options="CanFilter"」でフィルター可能にしました。
<pv:PivotViewer.PivotProperties> <pv:PivotViewerStringProperty Id="Name" DisplayName="名前" Binding="{Binding Name}" Options="CanSearchText"/> <pv:PivotViewerNumericProperty Id="Age" DisplayName="年齢" Binding="{Binding Age}" Options="CanFilter"/> <pv:PivotViewerDateTimeProperty Id="BirthDay" DisplayName="誕生日" Binding="{Binding BirthDay}" Format="yyyy/MM/dd" Options="CanFilter"/> </pv:PivotViewer.PivotProperties>
次に各アイテムの見た目となる「PivotViewerItemTemplate」を定義します。
今回は単純にテキストを「名前: ○○」等となるようにしていますが、ここに画像を使うとインパクト大です。
<pv:PivotViewer.ItemTemplates> <pv:PivotViewerItemTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock Grid.Column="0" Grid.Row="0" Text="名前: "/> <TextBlock Grid.Column="0" Grid.Row="1" Text="年齢: "/> <TextBlock Grid.Column="0" Grid.Row="2" Text="誕生日: "/> <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}"/> <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Age}"/> <TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding BirthDay, StringFormat=yyyy/MM/dd}"/> </Grid> </pv:PivotViewerItemTemplate> </pv:PivotViewer.ItemTemplates>
データをさくっと準備
データの方は主旨から外れるのでさらっと。
こんなプロパティを持ったクラスを、
public string Name { get; private set; } public DateTime BirthDay { get; private set; } public int Age { get; private set; }
ごりっとインスタンス生成して、
Enumerable.Range(1, 100) .Select(x => new Person(x.ToString(), DateTime.Now.AddYears(-x)))
ドーン。
.ToList() .ForEach(x => People.Add(x));
ちなみに、全員が違う年齢だとフィルタリングしたときに1件ずつになって面白くないので少しサバを読みます。
// 全員違う年齢だと面白くないので、ちょっと(?)サバを読む this.Age /= 2;
まとめ
- Silverlight4では別途インストールだったがSilverlight5で標準SDKになった。
- 「PivotViewer.PivotProperties」でデータのプロパティを定義。
- 「PivotViewerItemTemplate」でデータの見た目を定義。