ListView

[C#] ListViewでアイコンを表示する方法

2025-04-15更新日: 2025-04-15

C#のListViewでアイコンを表示するには、まずImageListを作成し、アイコンを追加します。

次に、ListViewのSmallImageListまたはLargeImageListプロパティにこのImageListを設定します。

各ListViewItemに対して、ImageIndexまたはImageKeyプロパティを使用して、表示したいアイコンを指定します。

これにより、ListViewにアイコンが表示されるようになります。

アイコンのサイズは、ImageListのImageSizeプロパティで調整可能です。

目次から探す

ListViewでアイコンを表示する手順
アイコンのサイズと表示スタイル
実装例
応用例
まとめ

ListViewでアイコンを表示する手順

ImageListの作成

ListViewにアイコンを表示するためには、まずImageListを作成する必要があります。

ImageListは、アイコンや画像を管理するためのコンテナです。

以下の手順でImageListを作成します。

フォームデザイナーで、ツールボックスからImageListをドラッグ＆ドロップします。
ImageListのプロパティで、Imagesプロパティを設定します。

サンプルコードは以下の通りです。

partial class MyForm : Form
{
    private ImageList imageList;
    public MyForm()
    {
        InitializeComponent(); // フォームの初期化
        // ImageListのインスタンスを作成
        imageList = new ImageList();
        // アイコンのサイズを設定
        imageList.ImageSize = new Size(32, 32); // 32x32ピクセル
    }
}

アイコンの追加

ImageListにアイコンを追加するには、Imagesプロパティを使用します。

アイコンファイルを指定して、ImageListに追加します。

以下のように記述します。

// アイコンを追加
imageList.Images.Add("icon1", Image.FromFile("path_to_icon1.ico")); // アイコン1
imageList.Images.Add("icon2", Image.FromFile("path_to_icon2.ico")); // アイコン2

このコードでは、path_to_icon1.icoとpath_to_icon2.icoは実際のアイコンファイルのパスに置き換えてください。

ListViewにImageListを設定

次に、作成したImageListをListViewに設定します。

ListViewのLargeImageListまたはSmallImageListプロパティを使用して、ImageListを割り当てます。

// ListViewのインスタンスを作成
ListView listView = new ListView();
listView.View = View.LargeIcon; // 表示スタイルを設定
// ImageListをListViewに設定
listView.LargeImageList = imageList; // 大きなアイコンを使用

ListViewItemにアイコンを割り当てる

最後に、ListViewItemにアイコンを割り当てます。

ListViewItemのImageIndexプロパティを使用して、表示するアイコンを指定します。

// ListViewItemを作成
ListViewItem item1 = new ListViewItem("アイテム1");
item1.ImageIndex = 0; // アイコン1を指定
ListViewItem item2 = new ListViewItem("アイテム2");
item2.ImageIndex = 1; // アイコン2を指定
// ListViewにアイテムを追加
listView.Items.Add(item1);
listView.Items.Add(item2);

このコードを実行すると、ListViewにアイコンが表示されるようになります。

アイコンの表示が正しく行われているか確認してください。

アイコンのサイズと表示スタイル

SmallIconとLargeIconの違い

ListViewでは、アイコンのサイズに応じて2つの表示スタイルがあります。

これらはSmallIconとLargeIconです。

表示スタイル	説明
SmallIcon	小さなアイコン(通常16×16ピクセル)を表示します。
LargeIcon	大きなアイコン(通常32×32ピクセル)を表示します。

これにより、ユーザーは表示したい情報の量やデザインに応じて、適切なアイコンサイズを選択できます。

アイコンサイズの変更方法

アイコンのサイズは、ImageListのImageSizeプロパティを使用して変更できます。

以下のコードでは、アイコンサイズを変更する方法を示します。

// ImageListのインスタンスを作成
imageList = new ImageList();
// アイコンのサイズを変更
imageList.ImageSize = new Size(48, 48); // 48x48ピクセルに設定

このように、Size構造体を使用して、任意のサイズに設定することができます。

アイコンサイズを変更した場合、ListViewに表示されるアイコンも自動的に更新されます。

Viewプロパティの設定

ListViewの表示スタイルは、Viewプロパティを使用して設定します。

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

表示スタイル	説明
View.LargeIcon	大きなアイコンを表示します。
View.SmallIcon	小さなアイコンを表示します。
View.List	アイコンとテキストをリスト形式で表示します。
View.Details	詳細情報をテーブル形式で表示します。
View.Tile	タイル形式でアイコンとテキストを表示します。

以下のコードは、ListViewの表示スタイルを設定する例です。

// ListViewのインスタンスを作成
ListView listView = new ListView();
// 表示スタイルをLargeIconに設定
listView.View = View.LargeIcon;

この設定により、ListViewは大きなアイコンを表示するようになります。

表示スタイルを変更することで、ユーザーインターフェースの見た目を調整できます。

実装例

基本的な実装例

基本的なListViewの実装では、1つのアイコンを表示するシンプルな例を示します。

以下のコードでは、ImageListを作成し、1つのアイコンをListViewに表示します。

partial class MyForm : Form
{
    private ImageList imageList;
    private ListView listView;
    public MyForm()
    {
        InitializeComponent(); // フォームの初期化
        // ImageListのインスタンスを作成
        imageList = new ImageList();
        imageList.ImageSize = new Size(32, 32); // アイコンサイズを設定
        // アイコンを追加
        imageList.Images.Add("icon1", Image.FromFile("path_to_icon1.ico")); // アイコン1
        // ListViewのインスタンスを作成
        listView = new ListView();
        listView.View = View.LargeIcon; // 表示スタイルを設定
        listView.LargeImageList = imageList; // ImageListを設定
        // ListViewItemを作成
        ListViewItem item1 = new ListViewItem("アイテム1");
        item1.ImageIndex = 0; // アイコン1を指定
        // ListViewにアイテムを追加
        listView.Items.Add(item1);
        // フォームにListViewを追加
        this.Controls.Add(listView);
    }
}

このコードを実行すると、ListViewに「アイテム1」というテキストとアイコンが表示されます。

複数のアイコンを持つListViewの実装

複数のアイコンを持つListViewを実装する場合、ImageListに複数のアイコンを追加し、それぞれのListViewItemにアイコンを割り当てます。

以下のコードでは、2つのアイコンを表示する例を示します。

partial class MyForm : Form
{
    private ImageList imageList;
    private ListView listView;
    public MyForm()
    {
        InitializeComponent(); // フォームの初期化
        // ImageListのインスタンスを作成
        imageList = new ImageList();
        imageList.ImageSize = new Size(32, 32); // アイコンサイズを設定
        // アイコンを追加
        imageList.Images.Add("icon1", Image.FromFile("path_to_icon1.ico")); // アイコン1
        imageList.Images.Add("icon2", Image.FromFile("path_to_icon2.ico")); // アイコン2
        // ListViewのインスタンスを作成
        listView = new ListView();
        listView.View = View.LargeIcon; // 表示スタイルを設定
        listView.LargeImageList = imageList; // ImageListを設定
        // ListViewItemを作成
        ListViewItem item1 = new ListViewItem("アイテム1");
        item1.ImageIndex = 0; // アイコン1を指定
        ListViewItem item2 = new ListViewItem("アイテム2");
        item2.ImageIndex = 1; // アイコン2を指定
        // ListViewにアイテムを追加
        listView.Items.Add(item1);
        listView.Items.Add(item2);
        // フォームにListViewを追加
        this.Controls.Add(listView);
    }
}

このコードを実行すると、ListViewに「アイテム1」と「アイテム2」がそれぞれ異なるアイコンと共に表示されます。

動的にアイコンを変更する方法

ListViewのアイコンを動的に変更するには、ListViewItemのImageIndexプロパティを変更します。

以下のコードでは、ボタンをクリックすることでアイコンを変更する例を示します。

partial class MyForm : Form
{
    private ImageList imageList;
    private ListView listView;
    private Button changeIconButton;
    public MyForm()
    {
        InitializeComponent(); // フォームの初期化
        // ImageListのインスタンスを作成
        imageList = new ImageList();
        imageList.ImageSize = new Size(32, 32); // アイコンサイズを設定
        // アイコンを追加
        imageList.Images.Add("icon1", Image.FromFile("path_to_icon1.ico")); // アイコン1
        imageList.Images.Add("icon2", Image.FromFile("path_to_icon2.ico")); // アイコン2
        // ListViewのインスタンスを作成
        listView = new ListView();
        listView.View = View.LargeIcon; // 表示スタイルを設定
        listView.LargeImageList = imageList; // ImageListを設定
        // ListViewItemを作成
        ListViewItem item1 = new ListViewItem("アイテム1");
        item1.ImageIndex = 0; // アイコン1を指定
        listView.Items.Add(item1);
        // ボタンを作成
        changeIconButton = new Button();
        changeIconButton.Text = "アイコンを変更";
        changeIconButton.Click += ChangeIconButton_Click; // クリックイベントを設定
        // フォームにListViewとボタンを追加
        this.Controls.Add(listView);
        this.Controls.Add(changeIconButton);
    }
    private void ChangeIconButton_Click(object sender, EventArgs e)
    {
        // アイコンを変更
        listView.Items[0].ImageIndex = 1; // アイコン2に変更
    }
}

このコードを実行し、ボタンをクリックすると、ListViewの「アイテム1」のアイコンが動的に変更されます。

これにより、ユーザーの操作に応じてアイコンを変更することが可能になります。

応用例

アイコン付きのチェックボックスを表示する

ListViewでアイコン付きのチェックボックスを表示するには、CheckBoxesプロパティを使用します。

このプロパティをtrueに設定することで、各アイテムにチェックボックスを表示できます。

以下のコードは、アイコン付きのチェックボックスを持つListViewの実装例です。

partial class MyForm : Form
{
    private ImageList imageList;
    private ListView listView;
    public MyForm()
    {
        InitializeComponent(); // フォームの初期化
        // ImageListのインスタンスを作成
        imageList = new ImageList();
        imageList.ImageSize = new Size(32, 32); // アイコンサイズを設定
        // アイコンを追加
        imageList.Images.Add("icon1", Image.FromFile("path_to_icon1.ico")); // アイコン1
        imageList.Images.Add("icon2", Image.FromFile("path_to_icon2.ico")); // アイコン2
        // ListViewのインスタンスを作成
        listView = new ListView();
        listView.View = View.LargeIcon; // 表示スタイルを設定
        listView.LargeImageList = imageList; // ImageListを設定
        listView.CheckBoxes = true; // チェックボックスを表示
        // ListViewItemを作成
        ListViewItem item1 = new ListViewItem("アイテム1");
        item1.ImageIndex = 0; // アイコン1を指定
        ListViewItem item2 = new ListViewItem("アイテム2");
        item2.ImageIndex = 1; // アイコン2を指定
        // ListViewにアイテムを追加
        listView.Items.Add(item1);
        listView.Items.Add(item2);
        // フォームにListViewを追加
        this.Controls.Add(listView);
    }
}

このコードを実行すると、ListViewにアイコン付きのチェックボックスが表示され、ユーザーはアイテムを選択できるようになります。

カスタム描画でアイコンを表示する

ListViewのアイコンをカスタム描画することで、より柔軟な表示が可能になります。

DrawItemイベントを使用して、アイコンやテキストを自由に描画できます。

以下のコードは、カスタム描画を使用してアイコンを表示する例です。

partial class MyForm : Form
{
    private ImageList imageList;
    private ListView listView;
    public MyForm()
    {
        InitializeComponent(); // フォームの初期化
        // ImageListのインスタンスを作成
        imageList = new ImageList();
        imageList.ImageSize = new Size(32, 32); // アイコンサイズを設定
        // アイコンを追加
        imageList.Images.Add("icon1", Image.FromFile("path_to_icon1.ico")); // アイコン1
        imageList.Images.Add("icon2", Image.FromFile("path_to_icon2.ico")); // アイコン2
        // ListViewのインスタンスを作成
        listView = new ListView();
        listView.View = View.Details; // 詳細表示に設定
        listView.Columns.Add("アイテム名", 100); // 列を追加
        listView.OwnerDraw = true; // カスタム描画を有効にする
        // ListViewItemを作成
        ListViewItem item1 = new ListViewItem("アイテム1");
        item1.ImageIndex = 0; // アイコン1を指定
        ListViewItem item2 = new ListViewItem("アイテム2");
        item2.ImageIndex = 1; // アイコン2を指定
        // ListViewにアイテムを追加
        listView.Items.Add(item1);
        listView.Items.Add(item2);
        // DrawItemイベントを設定
        listView.DrawItem += ListView_DrawItem;
        // フォームにListViewを追加
        this.Controls.Add(listView);
    }
    private void ListView_DrawItem(object sender, DrawListViewItemEventArgs e)
    {
        // アイテムの背景を描画
        e.DrawBackground();
        // アイコンを描画
        e.Graphics.DrawImage(imageList.Images[e.Item.ImageIndex], e.Bounds.Left, e.Bounds.Top);
        // テキストを描画
        e.Graphics.DrawString(e.Item.Text, e.Item.Font, Brushes.Black, e.Bounds.Left + 40, e.Bounds.Top);
        // アイテムの境界を描画
        e.DrawFocusRectangle();
    }
}

このコードを実行すると、ListViewにカスタム描画されたアイコンとテキストが表示されます。

アイコンの位置やテキストのスタイルを自由に変更できます。

アイコンとテキストのレイアウトをカスタマイズする

ListViewのアイコンとテキストのレイアウトをカスタマイズするには、DrawItemイベントを使用して、アイコンとテキストの位置を調整します。

以下のコードは、アイコンとテキストのレイアウトをカスタマイズする例です。

partial class MyForm : Form
{
    private ImageList imageList;
    private ListView listView;
    public MyForm()
    {
        InitializeComponent(); // フォームの初期化
        // ImageListのインスタンスを作成
        imageList = new ImageList();
        imageList.ImageSize = new Size(32, 32); // アイコンサイズを設定
        // アイコンを追加
        imageList.Images.Add("icon1", Image.FromFile("path_to_icon1.ico")); // アイコン1
        imageList.Images.Add("icon2", Image.FromFile("path_to_icon2.ico")); // アイコン2
        // ListViewのインスタンスを作成
        listView = new ListView();
        listView.View = View.Details; // 詳細表示に設定
        listView.Columns.Add("アイテム名", 100); // 列を追加
        listView.OwnerDraw = true; // カスタム描画を有効にする
        // ListViewItemを作成
        ListViewItem item1 = new ListViewItem("アイテム1");
        item1.ImageIndex = 0; // アイコン1を指定
        ListViewItem item2 = new ListViewItem("アイテム2");
        item2.ImageIndex = 1; // アイコン2を指定
        // ListViewにアイテムを追加
        listView.Items.Add(item1);
        listView.Items.Add(item2);
        // DrawItemイベントを設定
        listView.DrawItem += ListView_DrawItem;
        // フォームにListViewを追加
        this.Controls.Add(listView);
    }
    private void ListView_DrawItem(object sender, DrawListViewItemEventArgs e)
    {
        // アイテムの背景を描画
        e.DrawBackground();
        // アイコンを描画
        e.Graphics.DrawImage(imageList.Images[e.Item.ImageIndex], e.Bounds.Left + 5, e.Bounds.Top + 5);
        // テキストを描画
        e.Graphics.DrawString(e.Item.Text, e.Item.Font, Brushes.Black, e.Bounds.Left + 40, e.Bounds.Top + 10);
        // アイテムの境界を描画
        e.DrawFocusRectangle();
    }
}