ListView

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

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

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

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

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

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

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

目次から探す
  1. ListViewでアイコンを表示する手順
  2. アイコンのサイズと表示スタイル
  3. 実装例
  4. 応用例
  5. まとめ

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

ImageListの作成

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

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

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

  1. フォームデザイナーで、ツールボックスからImageListをドラッグ＆ドロップします。
  2. 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();
    }
}

このコードを実行すると、アイコンとテキストの位置が調整され、より見やすいレイアウトになります。

アイコンの位置やテキストのスタイルを自由に変更することで、ユーザーインターフェースをカスタマイズできます。

まとめ

この記事では、C#のListViewを使用してアイコンを表示する方法について詳しく解説しました。

具体的には、ImageListの作成からアイコンの追加、ListViewへの設定、さらにはアイコン付きのチェックボックスやカスタム描画の実装例まで幅広く取り上げました。

これにより、ListViewを活用したユーザーインターフェースの構築に役立つ情報を提供しました。

ぜひ、実際のプロジェクトにおいてこれらの技術を試してみて、より魅力的なアプリケーションを作成してみてください。

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

関連記事

[C#] ListViewイベントの使い方と活用法

[C#] ListViewイベントの使い方と活用法

2025-01-18
[C#] ListViewコントロールの使い方

[C#] ListViewコントロールの使い方

2025-01-18
[C#] ListViewのグループ化機能を活用する方法

[C#] ListViewのグループ化機能を活用する方法

2025-01-18
[C#] ListViewでのダブルクリックイベントの活用法

[C#] ListViewでのダブルクリックイベントの活用法

2025-01-18
[C#] ListViewにアイテムを追加する方法

[C#] ListViewにアイテムを追加する方法

2025-01-18
[C#] ListViewでのチェックボックスの実装方法

[C#] ListViewでのチェックボックスの実装方法

2025-01-18
[C#] ListViewのソート方法と実装例

[C#] ListViewのソート方法と実装例

2025-01-18
[C#] ListViewのスクロール機能を活用する方法

[C#] ListViewのスクロール機能を活用する方法

2025-01-18
[C#] ListViewのカスタマイズ方法

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

2025-01-18
[C#] ListViewにカラムを追加する方法

[C#] ListViewにカラムを追加する方法

2025-01-18
Back to top button
目次へ