ListView

[C#] ListViewのカスタマイズ方法

2025-01-18更新日: 2025-01-18

C#のListViewをカスタマイズする方法は多岐にわたります。

まず、Viewプロパティを設定して表示形式を変更できます。

例えば、Detailsビューを使用すると、列を持つ表形式でデータを表示できます。

カラムヘッダーを追加し、ListViewItemを用いて行を追加します。

OwnerDrawプロパティをtrueに設定すると、カスタム描画が可能になり、DrawItem、DrawSubItem、DrawColumnHeaderイベントをハンドルして、独自の描画ロジックを実装できます。

また、ListViewItemのBackColorやForeColorプロパティを設定して、個々のアイテムの色を変更することも可能です。

これにより、視覚的に魅力的なインターフェースを作成できます。

目次から探す

ListViewの表示形式

C#のWindowsフォームアプリケーションにおいて、ListViewはデータをリスト形式で表示するための非常に便利なコントロールです。

ListViewの表示形式をカスタマイズすることで、ユーザーにとって使いやすいインターフェースを提供できます。

Viewプロパティの設定

ListViewの表示形式は、Viewプロパティを使用して設定します。

Viewプロパティには、以下のようなオプションがあります。

表示形式	説明
View.LargeIcon	大きなアイコン形式で表示
View.SmallIcon	小さなアイコン形式で表示
View.List	アイテムをリスト形式で表示
View.Details	詳細情報をカラム形式で表示
View.Tile	タイル形式で表示

以下は、Viewプロパティを設定するサンプルコードです。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.Details;
    }
}

Detailsビューの使用

Detailsビューは、ListViewの最も一般的な表示形式の一つで、複数のカラムを持つことができます。

これにより、各アイテムに対して詳細な情報を表示することが可能です。

カラムを追加するには、Columnsプロパティを使用します。

以下は、カラムを追加するサンプルコードです。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        
        // カラムの追加
        listView1.Columns.Add("名前", 100);
        listView1.Columns.Add("年齢", 50);
        listView1.Columns.Add("職業", 100);
        
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.Details;
    }
}

LargeIconとSmallIconビューの違い

LargeIconビューとSmallIconビューは、アイテムをアイコン形式で表示するためのオプションです。

これらの違いは、アイコンのサイズにあります。

LargeIcon: 大きなアイコンで表示され、視覚的に目を引くデザインです。
SmallIcon: 小さなアイコンで表示され、より多くのアイテムを一度に表示できます。

以下は、LargeIconビューを設定するサンプルコードです。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        
        // ListViewの表示形式をLargeIconに設定
        listView1.View = View.LargeIcon;
    }
}

Listビューの特徴

ListViewは、データを視覚的に整理するための強力なツールです。

以下は、ListViewの主な特徴です。

複数の表示形式: ユーザーのニーズに応じて、さまざまな表示形式を選択できます。
カスタマイズ可能なカラム: 各アイテムに対して詳細な情報を表示するためのカラムを追加できます。
アイテムの選択: ユーザーがアイテムを選択できるため、インタラクティブな操作が可能です。
ドラッグ＆ドロップ: アイテムの移動や並べ替えが簡単に行えます。

これらの特徴を活かすことで、ユーザーにとって使いやすいアプリケーションを構築することができます。

ListViewのカラム設定

ListViewのカラム設定は、データを整理して表示するために非常に重要です。

カラムを適切に設定することで、ユーザーが情報を簡単に理解できるようになります。

カラムヘッダーの追加

ListViewにカラムヘッダーを追加するには、Columnsプロパティを使用します。

カラムヘッダーは、各アイテムの詳細情報を表示するためのラベルとして機能します。

以下は、カラムヘッダーを追加するサンプルコードです。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.Details;
        // カラムヘッダーの追加
        listView1.Columns.Add("名前", 100);  // カラム名と幅を指定
        listView1.Columns.Add("年齢", 50);
        listView1.Columns.Add("職業", 100);
    }
}

カラムの幅と配置

カラムの幅は、ユーザーが情報を見やすくするために調整することができます。

Widthプロパティを使用して、各カラムの幅を設定できます。

また、カラムの配置も重要で、適切な順序で表示することで、ユーザーの利便性が向上します。

以下は、カラムの幅を設定するサンプルコードです。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.Details;
        // カラムヘッダーの追加
        listView1.Columns.Add("名前", 100);
        listView1.Columns.Add("年齢", 50);
        listView1.Columns.Add("職業", 100);
        // カラムの幅を設定
        listView1.Columns[0].Width = 120;  // 名前カラムの幅を120に設定
        listView1.Columns[1].Width = 60;   // 年齢カラムの幅を60に設定
        listView1.Columns[2].Width = 150;  // 職業カラムの幅を150に設定
    }
}

カラムのソート機能

ListViewでは、カラムをクリックすることでアイテムをソートする機能を実装できます。

これにより、ユーザーは特定の情報を簡単に見つけることができます。

ソート機能を実装するには、ColumnClickイベントを使用します。

以下は、カラムのソート機能を実装するサンプルコードです。

using System.Windows.Forms;
using System;
using System.Collections;

partial class MyForm : Form
{
	private bool sortAscending = true;  // ソート順を管理するフラグ
	public MyForm()
	{
		InitializeComponent();

		// ListViewの表示形式をDetailsに設定
		listView1.View = View.Details;
		// カラムヘッダーの追加
		listView1.Columns.Add("名前", 100);
		listView1.Columns.Add("年齢", 50);
		listView1.Columns.Add("職業", 100);
		// カラムのソート機能を追加
		listView1.ColumnClick += ListView1_ColumnClick;
	}
	private void ListView1_ColumnClick(object sender, ColumnClickEventArgs e)
	{
		// ソートの実装
		listView1.ListViewItemSorter = new ListViewItemComparer(e.Column, sortAscending);
		sortAscending = !sortAscending;  // ソート順を反転
		listView1.Sort();
	}
}
// ListViewItemComparerクラスの実装
public class ListViewItemComparer : IComparer
{
	private int col;
	private bool sortAscending;
	public ListViewItemComparer(int column, bool ascending)
	{
		col = column;
		sortAscending = ascending;
	}
	public int Compare(object x, object y)
	{
		int result = String.Compare(((ListViewItem)x).SubItems[col].Text, ((ListViewItem)y).SubItems[col].Text);
		return sortAscending ? result : -result;  // ソート順に応じて結果を反転
	}
}

このコードでは、カラムをクリックすることで、アイテムが昇順または降順にソートされます。

ListViewItemComparerクラスを使用して、特定のカラムに基づいてアイテムを比較します。

ListViewアイテムのカスタマイズ

ListViewのアイテムをカスタマイズすることで、ユーザーにとってより視覚的にわかりやすいインターフェースを提供できます。

ここでは、ListViewItemの追加と削除、アイテムの色とフォントの変更、アイテムの選択状態の管理について解説します。

ListViewItemの追加と削除

ListViewにアイテムを追加するには、ListViewItemクラスを使用します。

アイテムを削除するには、Items.RemoveメソッドやItems.Clearメソッドを使用します。

以下は、ListViewにアイテムを追加し、削除するサンプルコードです。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.Details;
        // カラムヘッダーの追加
        listView1.Columns.Add("名前", 100);
        listView1.Columns.Add("年齢", 50);
        listView1.Columns.Add("職業", 100);
        // アイテムの追加
        AddListViewItem("山田太郎", "30", "エンジニア");
        AddListViewItem("佐藤花子", "25", "デザイナー");
    }
    private void AddListViewItem(string name, string age, string job)
    {
        ListViewItem item = new ListViewItem(name);
        item.SubItems.Add(age);
        item.SubItems.Add(job);
        listView1.Items.Add(item);
    }
    private void RemoveSelectedItem()
    {
        if (listView1.SelectedItems.Count > 0)
        {
            listView1.Items.Remove(listView1.SelectedItems[0]);  // 選択されたアイテムを削除
        }
    }
}

アイテムの色とフォントの変更

ListViewのアイテムの色やフォントを変更することで、視覚的なアクセントを加えることができます。

アイテムの色は、BackColorやForeColorプロパティを使用して設定できます。

また、フォントはFontプロパティを使用して変更できます。

以下は、アイテムの色とフォントを変更するサンプルコードです。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.Details;
        // カラムヘッダーの追加
        listView1.Columns.Add("名前", 100);
        listView1.Columns.Add("年齢", 50);
        listView1.Columns.Add("職業", 100);
        // アイテムの追加
        AddListViewItem("山田太郎", "30", "エンジニア");
        AddListViewItem("佐藤花子", "25", "デザイナー");
        // アイテムの色とフォントを変更
        listView1.Items[0].BackColor = Color.LightBlue;  // 1つ目のアイテムの背景色を変更
        listView1.Items[0].ForeColor = Color.Red;        // 1つ目のアイテムの文字色を変更
        listView1.Items[0].Font = new Font("Arial", 10, FontStyle.Bold);  // フォントを変更
    }
    private void AddListViewItem(string name, string age, string job)
    {
        ListViewItem item = new ListViewItem(name);
        item.SubItems.Add(age);
        item.SubItems.Add(job);
        listView1.Items.Add(item);
    }
}

アイテムの選択状態の管理

ListViewでは、ユーザーがアイテムを選択できるため、選択状態を管理することが重要です。

選択されたアイテムに対して特定の操作を行うことができます。

選択状態を確認するには、SelectedItemsプロパティを使用します。

以下は、選択されたアイテムの情報を表示するサンプルコードです。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.Details;
        // カラムヘッダーの追加
        listView1.Columns.Add("名前", 100);
        listView1.Columns.Add("年齢", 50);
        listView1.Columns.Add("職業", 100);
        // アイテムの追加
        AddListViewItem("山田太郎", "30", "エンジニア");
        AddListViewItem("佐藤花子", "25", "デザイナー");
        // 選択されたアイテムの情報を表示
        listView1.ItemSelectionChanged += ListView1_ItemSelectionChanged;
    }
    private void ListView1_ItemSelectionChanged(object sender, ListViewItemSelectionChangedEventArgs e)
    {
        if (e.IsSelected)
        {
            MessageBox.Show($"選択されたアイテム: {e.Item.Text}");  // 選択されたアイテムの名前を表示
        }
    }
    private void AddListViewItem(string name, string age, string job)
    {
        ListViewItem item = new ListViewItem(name);
        item.SubItems.Add(age);
        item.SubItems.Add(job);
        listView1.Items.Add(item);
    }
}

このコードでは、アイテムが選択されると、そのアイテムの名前がメッセージボックスで表示されます。

これにより、ユーザーは現在選択されているアイテムを確認できます。

ListViewのカスタム描画

ListViewのカスタム描画を行うことで、デフォルトのスタイルを超えた独自のデザインを実現できます。

これにより、ユーザーインターフェースをより魅力的にし、特定のニーズに応じた表示が可能になります。

ここでは、OwnerDrawプロパティの設定、DrawItemイベント、DrawSubItemイベント、DrawColumnHeaderイベントの活用方法について解説します。

OwnerDrawプロパティの設定

ListViewのカスタム描画を行うためには、まずOwnerDrawプロパティをtrueに設定する必要があります。

これにより、ListViewは自分自身でアイテムやカラムの描画を行うことができます。

以下は、OwnerDrawプロパティを設定するサンプルコードです。

using System.Windows.Forms;

partial class MyForm : Form
{
	public MyForm()
	{
		InitializeComponent();

		// ListViewの表示形式をDetailsに設定
		listView1.View = View.Details;
		// OwnerDrawプロパティをtrueに設定
		listView1.OwnerDraw = true;
		// カラムヘッダーの追加
		listView1.Columns.Add("名前", 100);
		listView1.Columns.Add("年齢", 50);
		listView1.Columns.Add("職業", 100);
		// アイテムの追加
		AddListViewItem("山田太郎", "30", "エンジニア");
		AddListViewItem("佐藤花子", "25", "デザイナー");
		// イベントハンドラの追加
		listView1.DrawItem += ListView1_DrawItem;
		listView1.DrawSubItem += ListView1_DrawSubItem;
		listView1.DrawColumnHeader += ListView1_DrawColumnHeader;
	}
	private void AddListViewItem(string name, string age, string job)
	{
		ListViewItem item = new ListViewItem(name);
		item.SubItems.Add(age);
		item.SubItems.Add(job);
		listView1.Items.Add(item);
	}

	private void ListView1_DrawItem(object sender, DrawListViewItemEventArgs e)
	{
		e.DrawDefault = true;
	}

	private void ListView1_DrawSubItem(object sender, DrawListViewSubItemEventArgs e)
	{
		e.DrawDefault = true;
	}

	private void ListView1_DrawColumnHeader(object sender, DrawListViewColumnHeaderEventArgs e)
	{
		e.DrawDefault = true;
	}
}

DrawItemイベントの活用

DrawItemイベントは、ListViewの各アイテムを描画するために使用されます。

このイベントを利用して、アイテムの背景色やフォントスタイルを変更することができます。

以下は、DrawItemイベントを活用するサンプルコードです。

private void ListView1_DrawItem(object sender, DrawListViewItemEventArgs e)
{
    // アイテムの背景色を設定
    e.DrawBackground();
    // アイテムのテキストを描画
    e.Graphics.DrawString(e.Item.Text, e.Item.Font, Brushes.Black, e.Bounds);
    
    // アイテムの選択状態に応じて描画
    if (e.Item.Selected)
    {
        e.DrawFocusRectangle();  // 選択されたアイテムのフォーカスを描画
    }
}

DrawSubItemイベントの活用

DrawSubItemイベントは、ListViewの各サブアイテムを描画するために使用されます。

このイベントを利用して、サブアイテムの色やフォントを変更することができます。

以下は、DrawSubItemイベントを活用するサンプルコードです。

private void ListView1_DrawSubItem(object sender, DrawListViewSubItemEventArgs e)
{
    // サブアイテムの背景色を設定
    e.DrawBackground();
    // サブアイテムのテキストを描画
    e.Graphics.DrawString(e.SubItem.Text, e.SubItem.Font, Brushes.Gray, e.Bounds);
    
    // サブアイテムの選択状態に応じて描画
    if (e.Item.Selected)
    {
        e.DrawFocusRectangle();  // 選択されたサブアイテムのフォーカスを描画
    }
}

DrawColumnHeaderイベントの活用

DrawColumnHeaderイベントは、ListViewのカラムヘッダーを描画するために使用されます。

このイベントを利用して、カラムヘッダーのスタイルをカスタマイズすることができます。

以下は、DrawColumnHeaderイベントを活用するサンプルコードです。

private void ListView1_DrawColumnHeader(object sender, DrawListViewColumnHeaderEventArgs e)
{
    // カラムヘッダーの背景色を設定
    e.Graphics.FillRectangle(Brushes.LightGray, e.Bounds);
    
    // カラムヘッダーのテキストを描画
    e.Graphics.DrawString(e.Header.Text, e.Font, Brushes.Black, e.Bounds);
}

これらのイベントを活用することで、ListViewの見た目を大幅にカスタマイズすることができます。

ユーザーのニーズに応じた独自のデザインを実現し、より魅力的なインターフェースを提供しましょう。

ListViewのデータバインディング

Windowsフォームのコントロールには、データをバインディングできるものがありますが、ListViewにデータをバインディングする機能はありません。

ListViewにデータを表示するためには、ListViewItemを手動で作成し、それをListViewに追加する必要があります。

ListViewの応用例

ListViewは、さまざまな機能を持つ強力なコントロールです。

ここでは、チェックボックス付きListViewの作成、アイコン付きListViewの実装、コンテキストメニューの追加、ドラッグ＆ドロップ機能の実装について解説します。

チェックボックス付きListViewの作成

ListViewにチェックボックスを追加することで、ユーザーが複数のアイテムを選択できるようになります。

チェックボックスを表示するには、CheckBoxesプロパティをtrueに設定します。

以下は、チェックボックス付きListViewを作成するサンプルコードです。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.Details;
        listView1.CheckBoxes = true;  // チェックボックスを有効にする
        // カラムヘッダーの追加
        listView1.Columns.Add("名前", 100);
        listView1.Columns.Add("年齢", 50);
        listView1.Columns.Add("職業", 100);
        // アイテムの追加
        AddListViewItem("山田太郎", "30", "エンジニア");
        AddListViewItem("佐藤花子", "25", "デザイナー");
    }
    private void AddListViewItem(string name, string age, string job)
    {
        ListViewItem item = new ListViewItem(name);
        item.SubItems.Add(age);
        item.SubItems.Add(job);
        listView1.Items.Add(item);
    }
}

アイコン付きListViewの実装

アイコン付きListViewを実装することで、視覚的に情報を伝えることができます。

アイコンを表示するには、ImageListを使用します。

以下は、アイコン付きListViewを実装するサンプルコードです。

partial class MyForm : Form
{
    private ImageList imageList;
    public MyForm()
    {
        InitializeComponent();
        
        // ImageListの作成
        imageList = new ImageList();
        imageList.Images.Add("engineer", Image.FromFile("engineer.png"));  // エンジニアのアイコン
        imageList.Images.Add("designer", Image.FromFile("designer.png"));  // デザイナーのアイコン
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.LargeIcon;  // 大きなアイコン形式に設定
        listView1.LargeImageList = imageList;  // ImageListを設定
        // カラムヘッダーの追加
        listView1.Columns.Add("名前", 100);
        listView1.Columns.Add("年齢", 50);
        listView1.Columns.Add("職業", 100);
        // アイテムの追加
        AddListViewItem("山田太郎", "30", "エンジニア", "engineer");
        AddListViewItem("佐藤花子", "25", "デザイナー", "designer");
    }
    private void AddListViewItem(string name, string age, string job, string imageKey)
    {
        ListViewItem item = new ListViewItem(name, imageKey);  // アイコンを指定
        item.SubItems.Add(age);
        item.SubItems.Add(job);
        listView1.Items.Add(item);
    }
}

コンテキストメニューの追加

ListViewにコンテキストメニューを追加することで、右クリック時に特定の操作を提供できます。

ContextMenuStripを使用して、メニュー項目を作成します。

以下は、コンテキストメニューを追加するサンプルコードです。

partial class MyForm : Form
{
    private ContextMenuStrip contextMenu;
    public MyForm()
    {
        InitializeComponent();
        
        // ContextMenuStripの作成
        contextMenu = new ContextMenuStrip();
        contextMenu.Items.Add("削除", null, DeleteItem_Click);  // 削除メニュー項目を追加
        // ListViewにContextMenuStripを設定
        listView1.ContextMenuStrip = contextMenu;
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.Details;
        // カラムヘッダーの追加
        listView1.Columns.Add("名前", 100);
        listView1.Columns.Add("年齢", 50);
        listView1.Columns.Add("職業", 100);
        // アイテムの追加
        AddListViewItem("山田太郎", "30", "エンジニア");
        AddListViewItem("佐藤花子", "25", "デザイナー");
    }
    private void DeleteItem_Click(object sender, EventArgs e)
    {
        if (listView1.SelectedItems.Count > 0)
        {
            listView1.Items.Remove(listView1.SelectedItems[0]);  // 選択されたアイテムを削除
        }
    }
    private void AddListViewItem(string name, string age, string job)
    {
        ListViewItem item = new ListViewItem(name);
        item.SubItems.Add(age);
        item.SubItems.Add(job);
        listView1.Items.Add(item);
    }
}

ドラッグ＆ドロップ機能の実装

ListViewにドラッグ＆ドロップ機能を実装することで、ユーザーがアイテムを簡単に移動できるようになります。

ItemDragイベントとDragEnterイベントを使用して、ドラッグ＆ドロップを実現します。

以下は、ドラッグ＆ドロップ機能を実装するサンプルコードです。

partial class MyForm : Form
{
    public MyForm()
    {
        InitializeComponent();
        
        // ListViewの表示形式をDetailsに設定
        listView1.View = View.Details;
        // カラムヘッダーの追加
        listView1.Columns.Add("名前", 100);
        listView1.Columns.Add("年齢", 50);
        listView1.Columns.Add("職業", 100);
        // アイテムの追加
        AddListViewItem("山田太郎", "30", "エンジニア");
        AddListViewItem("佐藤花子", "25", "デザイナー");
        // ドラッグ＆ドロップイベントの設定
        listView1.ItemDrag += ListView1_ItemDrag;
        listView1.DragEnter += ListView1_DragEnter;
        listView1.DragDrop += ListView1_DragDrop;
    }
    private void ListView1_ItemDrag(object sender, ItemDragEventArgs e)
    {
        DoDragDrop(e.Item, DragDropEffects.Move);  // アイテムをドラッグ
    }
    private void ListView1_DragEnter(object sender, DragEventArgs e)
    {
        if (e.Data.GetDataPresent(typeof(ListViewItem)))
        {
            e.Effect = DragDropEffects.Move;  // ドラッグエフェクトを設定
        }
    }
    private void ListView1_DragDrop(object sender, DragEventArgs e)
    {
        if (e.Data.GetDataPresent(typeof(ListViewItem)))
        {
            ListViewItem item = (ListViewItem)e.Data.GetData(typeof(ListViewItem));
            Point pt = listView1.PointToClient(new Point(e.X, e.Y));
            ListViewItem targetItem = listView1.GetItemAt(pt.X, pt.Y);
            if (targetItem != null)
            {
                int targetIndex = targetItem.Index;
                listView1.Items.Remove(item);  // 元のアイテムを削除
                listView1.Items.Insert(targetIndex, item);  // 新しい位置にアイテムを挿入
            }
        }
    }
    private void AddListViewItem(string name, string age, string job)
    {
        ListViewItem item = new ListViewItem(name);
        item.SubItems.Add(age);
        item.SubItems.Add(job);
        listView1.Items.Add(item);
    }
}