眠るシーラカンスと水底のプログラマー

　前回に引き続きLongListSelectorを扱います。

 

　前回の分だとLongListSelectorはただのヘッダー、フッダーのついたListBoxでしかありません。それをFlat(フラット)とすると今回紹介するのはGroup(グループ)のLongListSelectorです。

 

　Groupは文字通りアイテムの一覧を特定のグループにまとめて表示することができます。

　Windows Phoneのアプリの数が多くなるとグループ化されるあの動きがアプリでも実現できるのです。

 

 

 

　XAML構成

　GroupはFlatより構成が複雑になります。

　XAMLの構成は以下のように、

 

            <toolkit:LongListSelector x:Name="citiesListGropus" Background="Transparent"  
                ItemTemplate        = "{StaticResource itemTemplate}"
                ListHeaderTemplate  = "{StaticResource header}" 
                ListFooterTemplate  = "{StaticResource footer}"
                GroupHeaderTemplate = "{StaticResource groupHeader}"
                GroupItemTemplate   = "{StaticResource groupItem}" >

 

　GroupHeaderTemplateとGroupItemTemplateが追加されます。

 

　・GroupHeaderTemplate

　一覧の場面で表示されるグループキーの表示テンプレート

 

　・GroupItemTemplate

　グループヘッダーをクリックした際などに表示されるグループキーの一覧画面でのテンプレート

 

　上記テンプレートのコードは以下のようになります。

 

            <DataTemplate x:Key="groupHeader">
                <Border Background="Aquamarine"  Margin="6">
                    <TextBlock Text="{Binding Title}" FontSize="40" Foreground="Black"/>
                </Border>
            </DataTemplate>
            <DataTemplate x:Key="groupItem" >
                <Border Background="Aquamarine"  Width="120" Height="80" Margin="6">
                    <TextBlock Text="{Binding Title}" FontSize="40" Foreground="BlueViolet"/>
                </Border>
            </DataTemplate>

 

以下の画像のようにGroupItemTemplateを横に並べたい場合は、

　

 

                <toolkit:LongListSelector.GroupItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel/>
                    </ItemsPanelTemplate>
                </toolkit:LongListSelector.GroupItemsPanel>
            </toolkit:LongListSelector>

 

　GroupIemsPanelをいじってあげます。

 

C#構成

 

　C#のコードビハインド側もFlat版より複雑になります。

 

　主な登場クラスは2つ

 

    public class Book
    {
        public string name { get; set; }
        public int price { get; set; }
        public string author { get; set; }
        public string type { set; get; }
    }

 

　Bookクラスは表示するアイテムを表すクラスで、前回のBookｓクラスと同じ役目です。

　そしてもうひとつ、

 

    public class Group<T> : IEnumerable<T>
    {
        public Group(string name, IEnumerable<T> items)
        {
            this.Title = name;
            this.Items = new List<T>(items);
        }

        public override bool Equals(object obj)
        {
            Group<T> that = obj as Group<T>;

            return (that != null) && (this.Title.Equals(that.Title));
        }

        public string Title { get; set; }

        public IList<T> Items { get; set; }

        public IEnumerator<T> GetEnumerator()
        {
            return this.Items.GetEnumerator();
        }

        System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
        {
            return this.Items.GetEnumerator();
        }
    }

 

　グループを表すクラスです。プロパティとしてTitleとItemsを持つ列挙可能(IEnumerable)なクラスです。

　Titleがグループのキー名、Itemsにそのグループに属するアイテムのリストが入ります。

 

　今回の場合はBookクラスがItemsに入るわけですが、その辺のコードは以下、

 

            var books = new List<Book>()
            {
                new Book() { name = "Silverlightで開発するデータ駆動アプリケーション", author="鈴木章太郎", type="Silverlight", price=3400},
                new Book() { name = "プログラミングC# ", author="Jess Liberty", type="C#", price=4800},
                new Book() { name = "C#クックブック", author="Jay Hilyard", type="C#", price=4600},
                new Book() { name = "C#エッセンシャルズ", author="Brad Merill", type="C#", price=2600},
                new Book() { name = "エッセンシャルSilverlight3", author="Ashraf Michail", type="Silverlight", price=3200},
                new Book() { name = "Windows Azure入門", author="", type="Azure", price=2600},
                new Book() { name = "究極のC#プログラミング", author="川俣 晶", type="C#", price=2980}
            };

            var groupBy = from book in books
                          group book by book.type into c
                          orderby c.Key
                          select new Group<Book>(c.Key, c);

            this.citiesListGropus.ItemsSource = groupBy;

 

　　Bookを格納したリストをLinqでグリグリ回してItemsSourceに渡しております。

 

Linq解説

 

from book in books

　booksをbookという変数に格納します。

 

group book by book.type into c

　bookをtype毎にグループ化してそれを変数cとしてそれ以降のクエリ分に渡します。

　into句はあまり使わないので出ると戸惑う私はLinqレベル１・・・。

 

orderby c.Key
select new Group<Book>(c.Key, c);

 

 c(bookをｔｙpeでグループした集合)を並び替えて、Groupクラスに渡します。

引数のc.keyはたとえばc#という文字列が入り、cにtypeがC#のbookのコレクションが渡されます。

 

これでLongListSelectorの解説は終了です。

使えると便利なコントロールなので、サンプルを動かして理解を深めながら使いこなしましょう。

サンプルをダウンロードする(SDK7.1)

 

これまでのSilverlight Toolkitのコントロール紹介はこちら