続きを読む >>

Source and Project

方法：ICollectionView.GroupDescriptionsを利用せずにグループ化表示
--------------------------------------------------------------------------
ICollectionView.GroupDescriptionsを利用せずグループ化表示は可能です。グループ化表示するにはListBox.Itemsの要素となるオブジェクトを事前にグループ化された状態でソートし各要素がどのグループに属しているのか情報を公開させる必要があります。それをStyleなどを利用し、グループ化されているとユーザが認識できるように表現することで、グループ化表示が実現できます。
--------------------------------------------------------------------------

先日、紹介したとおりItemsControl.Itemsで公開されているItemsCollectionにAddメソッド経由でアイテムを挿入した場合、ItemsControlが提供している機能であるICollectionView.GroupDescriptions を利用したグループ化表示はサポートされていません。ただし、グループ化された状態を画面に表示できないかというと、そんな事はまったくなく、柔軟な表現力をもつWPFの機能を駆使すれば、グループ化は実現できます。今回は、その一例を紹介したいとおもいます。

たとえば都道府県

北海道
青森県
岩手県
宮城県
秋田県
山形県
福島県
茨城県
栃木県
群馬県
埼玉県
千葉県
東京都
神奈川県
新潟県
富山県
石川県
福井県
山梨県
長野県
岐阜県
静岡県
愛知県
三重県
滋賀県
京都府
大阪府
兵庫県
奈良県
和歌山県
鳥取県
島根県
岡山県
広島県
山口県
徳島県
香川県
愛媛県
高知県
福岡県
佐賀県
長崎県
熊本県
大分県
宮崎県
鹿児島県
沖縄県

この中から出身県を選ばせるアプリケーションがあったとします。ユーザーがそのアプリケーションに対して小慣れているのであれば、４７の中から１つを選ぶのはたいした話ではありません。しかし、不慣れな場合は意外に面倒な作業となってしまいます。まず、北からソートが掛かって、東北、関東などのグループでソートが掛かっているというのは大抵のアプリケーションで暗黙の仕様だと思います。たとえば「北海道」を探す場合、おそらく一番上にあるのですぐに見つけられれます。山形などの東北地方の県も同じ理由で見つけられると思います。逆に一番下にある沖縄や、鹿児島などもすぐに見つけられれるでしょう。しかし、中間にあるような県は探しにくいものです（と、私はよく経験します）

下記の画像は「島根県」を探している状況です。

上から順にスクロールさせて今、自分がどの県あたりを見ているのか確認しながら徐々にさげていきます。中間を超えてようやく発見することができます。

県名を並べただけでは、47都道府県の中から１県を探すのは意外に難しい作業だと私は思います。そこで補助情報を画面追加し、ユーザが自然に活用できる状況にしたいと思います。

今回は地方名でグループ化し、そのグループで色分けしたいと思います。

ListBoxのアイテムとなるクラスは下記のようにします。

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows.Media;
using System.Linq;
using Art55.WpfLibs;

namespace ListBoxGroupingDemo20110917_001
{
    public class Prefecture
    {
        static Prefecture()
        {
            Prefectures = new ReadOnlyCollection<Prefecture>(new List<Prefecture>
                                  {
                                      new Prefecture("北海道", "北海道"),
                                      new Prefecture("青森県", "東北"),
                                      new Prefecture("岩手県", "東北"),
                                      new Prefecture("宮城県", "東北"),
                                      new Prefecture("秋田県", "東北"),
                                      new Prefecture("山形県", "東北"),
                                      new Prefecture("福島県", "東北"),
                                      new Prefecture("茨城県", "関東"),
                                      new Prefecture("栃木県", "関東"),
                                      new Prefecture("群馬県", "関東"),
                                      new Prefecture("埼玉県", "関東"),
                                      new Prefecture("千葉県", "関東"),
                                      new Prefecture("東京都", "関東"),
                                      new Prefecture("神奈川県", "関東"),
                                      new Prefecture("新潟県", "中部"),
                                      new Prefecture("富山県", "中部"),
                                      new Prefecture("石川県", "中部"),
                                      new Prefecture("福井県", "中部"),
                                      new Prefecture("山梨県", "中部"),
                                      new Prefecture("長野県", "中部"),
                                      new Prefecture("岐阜県", "中部"),
                                      new Prefecture("静岡県", "中部"),
                                      new Prefecture("愛知県", "中部"),
                                      new Prefecture("三重県", "近畿 "),
                                      new Prefecture("滋賀県", "近畿 "),
                                      new Prefecture("京都府", "近畿 "),
                                      new Prefecture("大阪府", "近畿 "),
                                      new Prefecture("兵庫県", "近畿 "),
                                      new Prefecture("奈良県", "近畿 "),
                                      new Prefecture("和歌山県", "近畿 "),
                                      new Prefecture("鳥取県", "中国 "),
                                      new Prefecture("島根県", "中国 "),
                                      new Prefecture("岡山県", "中国 "),
                                      new Prefecture("広島県", "中国 "),
                                      new Prefecture("山口県", "中国 "),
                                      new Prefecture("徳島県", "四国"),
                                      new Prefecture("香川県", "四国"),
                                      new Prefecture("愛媛県", "四国"),
                                      new Prefecture("高知県", "四国"),
                                      new Prefecture("福岡県", "九州"),
                                      new Prefecture("佐賀県", "九州"),
                                      new Prefecture("長崎県", "九州"),
                                      new Prefecture("熊本県", "九州"),
                                      new Prefecture("大分県", "九州"),
                                      new Prefecture("宮崎県", "九州"),
                                      new Prefecture("鹿児島県", "九州"),
                                      new Prefecture("沖縄県", "沖縄")
                                  });

            List<string> groupNameList = Prefectures.GroupBy(p => p.GroupName).Select(g => g.Key).ToList();
            List<Brush> brushList = ColorUtils.GetGradationColorList(Colors.LightSkyBlue, Colors.LightCoral, groupNameList.Count())
                        .Select(c => new SolidColorBrush(c))
                        .Cast<Brush>().ToList();
            BackgroundSetting = new Dictionary<string, Brush>();
            for (int index = 0; index < groupNameList.Count; index++)
            {
                BackgroundSetting[groupNameList[index]] = brushList[index];
            }
        }

        private static readonly ReadOnlyCollection<Prefecture> Prefectures;

        public static ReadOnlyCollection<Prefecture> GetAllPrefectures()
        {
            return Prefectures;
        }

        private Prefecture(string name, string groupname)
        {
            Name = name;
            GroupName = groupname;
        }

        public string Name { get; private set; }
        public string GroupName { get; private set; }
        public Brush Background
        {
            get
            {
                return BackgroundSetting[GroupName];
            }
        }

        private static readonly Dictionary<string, Brush> BackgroundSetting;
    }
}

Prefectureクラスは県を表現するクラスです。Nameが県名、GroupNameが地方名、Backgroundが地方名で一意に決まる色を公開します。色は青から赤までの色相を９分割させた色のどれかが設定されています。

PrefectureオブジェクトをListBoxの要素とする事を前提としたXAMLを記述します。ListBoxの表示にはName（県名）、ListBoxItemの背景色が地方名でグループ化された色になるようにStyleで設定します。

<Window x:Class="ListBoxGroupingDemo20110917_001.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListBox x:Name="listBox" DisplayMemberPath="Name">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Background" Value="{Binding Background}" />
                </Style>
            </ListBox.ItemContainerStyle>
        </ListBox>
    </Grid>
</Window>

今回はListBox.Items.Add経由でわざと要素を追加します。（そもそも県をコレクションしているのでItemsSourceから入れることも可能です）

namespace ListBoxGroupingDemo20110917_001
{
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();

            foreach (Prefecture prefecture in Prefecture.GetAllPrefectures())
            {
                listBox.Items.Add(prefecture);
            }
        }
    }
}

これを実行してみると



ユーザは上から順に県を見ていくはずです。たとえば東京を東京を発見します。東京は関東なので同一の色が設定されている県をすべて目視でチェックする必要がなくなり読みとばす事ができます。他の地方でもどうような事が言えます。そして、たとえば「広島県」を見つけたとします。広島県は島根県と同じ中国地方ですから、同一背景色内のどこかに「島根県」があることが（多分）直感的にわかると思います。

今回は「GroupDescriptionsプロパティ」を利用せずに最終的にListBoxがグループ化されたような表示をすることを目指してコードを記述してみましたが、実現できているでしょうか？今回考慮した２点です。

コレクションをグループ化する。
コレクションをグループ化させる場合、グループ化させた状態でコレクションをソートし、コレクションの要素一つ一つにどのグループに属しているのか情報を公開すればいいだけです。
グループされた情報を表現する。
グループ化したコレクションをビジュアル的にどう見せるかは、問題解決に最良な方法を選択すればいいだけです（パフォーマンスなどの別の問題が発生することは多々ありますが・・・）

ICollectionView.GroupDescriptionsプロパティを利用すれば、上記「コレクションをグループ化する」という機能をある程度汎用的なルールで指定出来ることができます。またItemsCollection.GroupStyleプロパティを指定することで、グループ化表示した場合のみに有効な表現方法を指定することもできます。とはいえ、それを利用せずともグループ化表示はできますよって事を今回は紹介したかったのですが、どうでしょうか？

Source and Project

-------
追記）ソートは安定ソートがおすすめです。

Source and Project

方法：ItemsControlにアイテムを個別に設定するには？

ItemsControl.Itemsプロパティで公開されているコレクションに対して、表示要素となるアイテムを一つずつAddメソッドで追加する。この方法では、ICollectionView.GroupDescriptions プロパティを利用したグループ化表示はサポートされておらず、ICollectionView.CanGroup プロパティ は常にfalseを返します。

サンプルコード

<Window x:Class="ListBoxItems20110916_001.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Margin="10">
        <ListBox x:Name="listBox"></ListBox>
    </Grid>
</Window>

using System;
using System.Windows.Controls;
using System.Windows.Media.Imaging;

namespace ListBoxItems20110916_001
{
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();

            listBox.Items.Add("和名: 黄鉄鉱");
            listBox.Items.Add("英名: Pyrite");
            listBox.Items.Add(new Image {Source = new BitmapImage(new Uri(@"Image¥pyrite.jpg", UriKind.Relative))});
        }
    }
}

ItemsControl.Itemsプロパティで公開されているItemsCollectionオブジェクトに対してAddメソッド経由で表示用項目を直接、追加することが可能です。ＩｔｅｍｓＣｏｌｌｅｃｔｉｏｎはICollectionViewを継承しており、ICollectionView.GroupDescriptions プロパティからグループ化を設定することは可能です。ただし、CanGroup プロパティが常にfalseであるため、グループ化表示されません（設定は可能だが実行はされないという点が注意する必要があります）。また、ItemsSourceプロパティを利用している場合は、ItemsControl.Itemsが読み取り専用になっているため、追加、削除は出来ません。ItemsSourceをいったんnullにすることで、読み取り専用は解除されます。

上記のサンプルコードのとおり、追加するオブジェクト同士が「コレクションの要素である」という関係でなくても、追加することができます。逆にＩｔｅｍｓＳｏｕｒｃｅプロパティを利用する場合は、コレクションを丸ごと代入するためコレクション(IColletionではなくIEnumerable)である必要があります。

ItemsControl.Items.Add()を利用した場合、グループ化表示はサポートされていません。

実際にコードを書いて試してみると

        private void OnShowSupporttingGroupby(object sender, System.Windows.RoutedEventArgs e)
        {
            MessageBox.Show(listBox.Items.CanGroup ? "グループ化表示がサポートされています。" : "グループ化表示がサポートされていません。");
        }



私がMSDNを読んだ限りでは、そのような内容が書かれている内容が見つからず（内容がおかしい箇所は見つけたのですが）、実は、この投稿を書く上で、CanGroupプロパティが常にfalseを返すと言い切っていいのかどうか迷いました。しかし、ItemsSourceプロパティからコレクションを代入した際に実施されるグループ化の処理を考慮すれば、おそらくグループ化がサポート
されていないのは必然と判断したので、そう書くことにしました。これを書くのに一週間以上悩みました（笑）ItemsSourceプロパティの利用に関しては後日別途投稿します。

また、注意していただきたいのがGroupDescriptions プロパティによるグループ化表示が出来ない訳であって、それ以外の方法でグループ化されているように表示することは可能であるという点です。アイデアはいくつかありますので、余裕があれば、その当たりも紹介させていただきます。

Source and Project

-----------------------------------------
本投稿は下記のシリーズの一部です。
【WPF】ListBoxやDataGridをグループ化表示する。
http://pro.art55.jp/?eid=1303859