KatsuYuzuのブログ

.NET の開発をメインとした日記です。

Silverlight5で標準のSDKに含まれたPivotViewerを使おう!

Silverlight5で標準のSDKに含まれたPivotViewerを使おう!

と、いうことを学習しながら連載していきます。指摘やアドバイスお願い致します><

PivotViewerって何?

実に特徴的なコントロールなので見ていただくのが一番早いです。

  • (Silverlight4が必要です。無い場合はインストールの案内が表示されます。)

大量のデータをDeepZoomを通してシームレスに拡大、縮小しながら探すことができます。また、各種フィルタリングやソートも搭載されている、至れり尽くせりなコントロールです。
Silverlight4では別途インストールが必要でしたが、Silverlight5で標準のSDKに含まれるようになりました。

アセンブリ名前空間はSystem.Windows.Controls.Pivotです。

使ってみよう!

まず、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;

完成

じゃん。

コントロールでソート、フィルタリング、デザイン、DeepZoomと至れり尽くせりにやってくれるので、こんなに簡単に出来てしまいます。

まとめ

  • Silverlight4では別途インストールだったがSilverlight5で標準SDKになった。
  • 「PivotViewer.PivotProperties」でデータのプロパティを定義。
  • 「PivotViewerItemTemplate」でデータの見た目を定義。