6月 14

仮想ListViewで高速に描画する + CheckBoxを表示

前節の仮想ListViewのサンプルに加えて
各行にCheckBoxを表示させます。

コツがあって
単純にListViewのCheckBoxesプロパティーをtrueとするだけでは見えません。

さらに
ListViewItemのCheckedプロパティーをtrue→falseなどと
あえて無駄に思えるかもしれない操作をしないと見えません。

さらにさらに
ここまででチェックボックスは見えるようになりますが
クリックしても反応しません orz
MouseClickイベントを定義して
自前で再描画してやる必要があります。

仮想ListViewは少し面倒ですが
速度的な恩恵が多いのでその辺は我慢で。

また、チェックボックスをダブルクリックすると
チェックのON/OFFがズレます。なんだろう?バグ?
これの回避策については次節で

listview_virtual_checkbox

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace VirtualListViewSample
{
    public partial class Form1 : Form
    {
        // ListViewItem数
        const int _size = 1000;

        // RetrieveVirtualItemで返すもの
        ListViewItem[] _item = new ListViewItem[_size];

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // Column追加
            listView1.Columns.Insert(0, "ファイル", 180, HorizontalAlignment.Left);
            listView1.Columns.Insert(1, "フォルダ", 180, HorizontalAlignment.Left);
            listView1.Columns.Insert(2, "サイズ",    80, HorizontalAlignment.Right);

            // 適当にItem追加
            for(int index = 0; index < _size; index++)
            {
                _item[index] = new ListViewItem(
                    new string[]
                    {
                        "sample_" + index.ToString() + ".txt",
                        @"c:\sample",
                        index.ToString(),
                    }
                );

                // ※一旦、Checkedプロパティーを設定→解除することで見えるようになります
                _item[index].Checked = true;
                _item[index].Checked = false;

            }

            // 表示を詳細に
            listView1.View = View.Details;

            // 1行全体選択
            listView1.FullRowSelect = true;

            // チェックボックスを有効に
            listView1.CheckBoxes = true;

            //
            // ここから仮想ListView関連
            //
            // 仮想モードON
            listView1.VirtualMode = true;

            // Item数設定
            listView1.VirtualListSize = _size;

            // 必須:描画に必要なListViewItemを返すイベント追加
            listView1.RetrieveVirtualItem += new RetrieveVirtualItemEventHandler(listView1_RetrieveVirtualItem);

            // チェックボックスをクリックされたら再描画するために必要
            listView1.MouseClick += new MouseEventHandler(listView1_MouseClick);

            // ボタンハンドラ
            button1.Click += new EventHandler(button1_Click);
        }

        // チェックボックスがクリックされたらその部分を再描画
        void listView1_MouseClick(object sender, MouseEventArgs e)
        {
            ListView listview = (ListView)sender;
            ListViewItem item = listview.GetItemAt(e.X, e.Y);
            if (item != null)
            {
                if (e.X < (item.Bounds.Left + 16))
                {
                    item.Checked = !item.Checked;
                    listview.Invalidate(item.Bounds);
                }
            }      
        }

        //
        // 引数が示すindexのアイテムを返すと描画される
        //
        void listView1_RetrieveVirtualItem(object sender, RetrieveVirtualItemEventArgs e)
        {
            e.Item = _item[e.ItemIndex];
        }

        // ボタンが押されたら選択中アイテムを表示
        void button1_Click(object sender, EventArgs e)
        {
            if(listView1.SelectedIndices.Count > 0)
            {
                int index = listView1.SelectedIndices[0];

                MessageBox.Show(_item[index].SubItems[0].Text);
            }
        }
    }
}
6月 14

仮想ListViewで高速に描画する

ListViewはよく利用される便利なコントロールですが
Itemが数千件、数万件になると、処理が重くなります。

そのため、仮想ListViewとゆー手法が用意されています。
少しコツが必要ですがサンプルを載せます。

考え方としては
見えている範囲だけ描画すればいいじゃない
とゆーことです。

ListViewItemを保持しておいて
描画が求められたら、そのindexのListViewItemを返す、それだけです。

ただ注意点としては
Items、CheckedItems、SelectedItemsプロパティは使用できません。例外となります。
代わりに、選択中アイテムを判断する場合は
SelectedIndicesプロパティーを利用します。

listview_virtual

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace VirtualListViewSample
{
    public partial class Form1 : Form
    {
        // ListViewItem数
        const int _size = 1000;

        // RetrieveVirtualItemで返すもの
        ListViewItem[] _item = new ListViewItem[_size];

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // Column追加
            listView1.Columns.Insert(0, "ファイル", 180, HorizontalAlignment.Left);
            listView1.Columns.Insert(1, "フォルダ", 180, HorizontalAlignment.Left);
            listView1.Columns.Insert(2, "サイズ",    80, HorizontalAlignment.Right);

            // 適当にItem追加
            for(int index = 0; index < _size; index++)
            {
                _item[index] = new ListViewItem(
                    new string[]
                    {
                        "sample_" + index.ToString() + ".txt",
                        @"c:\sample",
                        index.ToString(),
                    }
                );
            }

            // 表示を詳細に
            listView1.View = View.Details;

            // 1行全体選択
            listView1.FullRowSelect = true;

            //
            // ここから仮想ListView関連
            //
            // 仮想モードON
            listView1.VirtualMode = true;

            // Item数設定
            listView1.VirtualListSize = _size;

            // 必須:描画に必要なListViewItemを返すイベント追加
            listView1.RetrieveVirtualItem += new RetrieveVirtualItemEventHandler(listView1_RetrieveVirtualItem);

            // ボタンハンドラ
            button1.Click += new EventHandler(button1_Click);
        }

        //
        // 引数が示すindexのアイテムを返すと描画される
        //
        void listView1_RetrieveVirtualItem(object sender, RetrieveVirtualItemEventArgs e)
        {
            e.Item = _item[e.ItemIndex];
        }

        // ボタンが押されたら選択中アイテムを表示
        void button1_Click(object sender, EventArgs e)
        {
            if(listView1.SelectedIndices.Count > 0)
            {
                int index = listView1.SelectedIndices[0];

                MessageBox.Show(_item[index].SubItems[0].Text);
            }
        }
    }
}
6月 14

最初に表示される行(Item)を取得、設定する

ListView上で最初に表示される行(Item)を取得、設定するには
TopItemプロパティーの値を取得、設定します。

狙った場所を表示したい場合は
前回表示位置を記憶、復元したい場合などに利用します。

仮想ListViewの場合は設定後にRefresh()しないといけないかも。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace ListViewSample
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // すべての項目を削除
            listView1.Items.Clear();

            // 1行複数列で表示するスタイルに変更
            listView1.View = View.Details;

            // 列を追加
            listView1.Columns.Add("名前", 100);
            listView1.Columns.Add("種類", 80);
            listView1.Columns.Add("値段", 60);

            for(int i = 1; i <= 20; i++)
            {
                // 追加する行を準備
                ListViewItem item = new ListViewItem("りんご" + i.ToString());
                item.SubItems.Add("果物");
                item.SubItems.Add((i*100).ToString() + "円");
                
                // 行を追加
                listView1.Items.Add(item);
            }        
        }

        private void button1_Click(object sender, EventArgs e)
        {
            // 最初に表示される行(Item)のインデックスを表示
            MessageBox.Show("先頭に表示されている行(Item)は" + listView1.TopItem.Index.ToString());
        }
    }
}
6月 14

セル(SubItem)の背景色を変更する

ListViewを詳細表示モードにして
各行の先頭サブアイテムの背景色を変更しているサンプルです。

サブアイテムのスタイルはアイテムのスタイルを継承するのがデフォルトなので
それを継承しないように
各アイテムのUseItemStyleForSubItemsプロパティーをfalseにする必要があります。

あとはSubItemのBackColorプロパティーを変更します。

listview_subitembackcolor

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // 詳細表示に変更
            listView1.View = View.Details;

            // Column追加
            listView1.Columns.Add("header1", 100);
            listView1.Columns.Add("header2", 100);
            listView1.Columns.Add("header3", 100);

            // 行追加
            for(int row = 0; row < 10; row++)
            {
                ListViewItem item = 
                    new ListViewItem(new string[] {"sample", "sample", "sample"});

                // サブアイテムのスタイルはアイテムのそれを引き継がないことを指定
                item.UseItemStyleForSubItems = false;

                // 先頭サブアイテムの背景色を指定
                item.SubItems[0].BackColor = Color.Pink;

                listView1.Items.Add(item);
            }
        }
    }
}
6月 14

行(Item)の背景色を変更する

ListViewを詳細表示モードにして
1行ごとに背景色を変更しているサンプルです。
ItemのBackColorプロパティーを指定すればOKです。

listview_itembackcolor

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // 詳細表示に変更
            listView1.View = View.Details;

            // Column追加
            listView1.Columns.Add("header1", 100);
            listView1.Columns.Add("header2", 100);
            listView1.Columns.Add("header3", 100);

            // 行追加
            for(int row = 0; row < 10; row++)
            {
                ListViewItem item = 
                    new ListViewItem(new string[] {"sample", "sample", "sample"});

                item.BackColor = row % 2 == 0 ? Color.White : Color.Aqua;

                listView1.Items.Add(item);
            }
        }
    }
}
6月 14

カラムの幅を自動調整する

ListViewのカラムの幅を自動調整するには
AutoResizeColumnsプロパティを利用します。

listview_headerresize

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace LVsample
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // 一覧表示スタイルに変更
            listView1.View = View.Details;

            // カラム追加
            listView1.Columns.Add("aaa");
            listView1.Columns.Add("bbbbb");
            listView1.Columns.Add("ccccccc");

            // item追加
            for (int i = 0; i < 10; i++)
            {
                string[] columns = new string[listView1.Columns.Count];

                columns[0] = "aaa";
                columns[1] = "bbbbb";
                columns[2] = "ccccccc";

                ListViewItem item = new ListViewItem(columns);

                listView1.Items.Add(item);
            }

            // カラムの幅を自動調整する
            // カラムのヘッダの幅、内容の幅、どちらも潰れないように
            listView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.ColumnContent | ColumnHeaderAutoResizeStyle.HeaderSize);
        }
    }
}
6月 14

グリッド線を表示する

ListViewにグリッド線を表示するには GridLines プロパティーを変更します。

listview_gridlines

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace LVsample
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // 一覧表示スタイルに変更
            listView1.View = View.Details;

            // カラム追加
            listView1.Columns.Add("aaa");
            listView1.Columns.Add("bbb");
            listView1.Columns.Add("ccc");

            // item追加
            for(int i = 0; i < 10; i++)
                listView1.Items.Add("value");

            // 線を表示
            listView1.GridLines = true;
        }
    }
}
6月 14

アイテム全体を選択したり、複数選択・単一選択を切り替える

ListViewのアイテム全体を選択したり、複数選択・単一選択を切り替えるサンプルです。

アイテムの行全体を選択状態にするには FullRowSelect プロパティーをtrueに
複数選択・単一選択を切り替えるには MultiSelect プロパティーを変更します。

listview_itemselect

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace LVsample
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // 一覧表示スタイルに変更
            listView1.View = View.Details;

            // カラム追加
            listView1.Columns.Add("aaa");
            listView1.Columns.Add("bbb");
            listView1.Columns.Add("ccc");

            // item追加
            for(int i = 0; i < 10; i++)
                listView1.Items.Add("value");

            // 行全体を選択状態に
            listView1.FullRowSelect = true;

            // 単一選択、複数選択の切り替え
            listView1.MultiSelect = false;
        }
    }
}
6月 14

カラムを追加、編集、削除する

ListViewのカラムを追加、編集、削除するサンプルです。

追加はAddやAddRangeメソッド
編集はColumnsコレクションのTextプロパティーを変更
削除はRemoveAtメソッドなどを使います。
他にもありますが代表的なものだけ。

listview_columnadd

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace LVsample
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // 一覧表示スタイルに変更
            listView1.View = View.Details;

            // 追加
            listView1.Columns.Add("aaa");
            listView1.Columns.Add("bbb");
            listView1.Columns.Add("ccc");

            // 編集
            listView1.Columns[0].Text = "AAA";

            // 削除
            listView1.Columns.RemoveAt(1);
        }
    }
}
6月 14

カラムヘッダーを非表示にする

ListViewのカラムヘッダー部を非表示にするには
HeaderStyleプロパティーの値を変更します。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace LVsample
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // 非表示に
            listView1.HeaderStyle = ColumnHeaderStyle.None;
        }
    }
}