わんくま東京勉強会 #64 アフターフォロー (8) : LongListSelector

ComboBox とは少し用途が違いますが、リスト表示用のコントロールとして LongListSelector もあります。
このコントロールはリストをグループ化して表示します。

なお、今回紹介するコントロールも Toolkit に含まれるコントロールのため、使用する際は Toolkit が必要になります。

見た目のカスタマイズ

LongListSelector も、他のコントロールと同様に Template を指定する事で見た目を変更する事が可能です。

ItemTeplate プロパティ

各項目の見た目を指定します。

GroupHeaderTemplate プロパティ

グループヘッダの見た目を指定します。

GroupItemsPanel プロパティ

グループヘッダのショートカット表示時のパネルテンプレートを指定します。
ここに WrapPanel を設定するとショートカットが WrapPanel で表示されます。

GroupItemTemplate プロパティ

グループヘッダのショートカット表示時の見た目を指定します。

LongListSelector にセットするデータの型

特にグルーピングして表示するデータを ItemSource にセットする場合、そのデータの型は IEnumerable 型の Items プロパティを持っている必要があります。
その為、 LINQ の GroupBy や ToLookup 等の結果をそのままセットしてもうまく表示されません。
以下の様なラッパークラスを使って渡すと良いと思います。

• LongListSelectorItem.cs

public class LongListSelectorItem<T> : IEnumerable<T>, IEquatable<Group<T>>
{
  public string Title { get; set; }

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

  public LongListSelectorItem(string name, IEnumerable<T> items)
  {
    Title = name;
    Items = items;
  }

  #region IEquatable<LongListSelectorItem<T>> Members
  public bool Equals(LongListSelectorItem<T> other)
  {
    return (other != null && Title != null && Title.Equals(other.Title));
  }
  #endregion

  #region IEnumerable<T> Members
  public IEnumerator<T> GetEnumerator()
  {
    return Items.GetEnumerator();
  }
  #endregion

  #region IEnumerable Members
  IEnumerator IEnumerable.GetEnumerator()
  {
    return Items.GetEnumerator();
  }
  #endregion
}

• 使い方

// IEnumerable<Foo> list;
var items = list.GroupBy(v => v.Hoge).Select(v => new LongListSelectorItem<Foo>(v.Key, v));

• アフターフォロー記事インデックス