MENU
  1. ホーム
  2. C#
  3. フォーム
  4. コモンコントロール
  5. listview
  6. [C#] ListViewでアイコンを表示する方法

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

listview

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

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

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

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

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

この記事でわかること
  • ListViewでアイコンを表示する手法
  • ImageListの作成と設定方法
  • アイコンサイズや表示スタイルの調整
  • カスタム描画による柔軟な表示
  • チェックボックス付きアイコンの実装方法

目次から探す

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();
    }
}

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

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

よくある質問

ImageListに追加できる画像形式は？

ImageListには、一般的な画像形式を追加することができます。

以下の形式がサポートされています。

  • BMP(ビットマップ画像)
  • ICO(アイコンファイル)
  • PNG(可逆圧縮画像)
  • JPEG(非可逆圧縮画像)
  • GIF(アニメーションを含むことも可能)

これらの形式は、Image.FromFileメソッドを使用してImageListに追加できます。

アイコンが表示されない場合の対処法は？

アイコンが表示されない場合、以下の点を確認してください。

  1. ファイルパスの確認: アイコンファイルのパスが正しいか確認します。

相対パスや絶対パスを使用している場合、正確な位置を指定してください。

  1. アイコンの形式: 使用しているアイコンファイルがサポートされている形式であることを確認します。

ICO形式が一般的です。

  1. ImageListの設定: ListViewのLargeImageListまたはSmallImageListプロパティに正しくImageListが設定されているか確認します。
  2. アイコンのインデックス: ListViewItemのImageIndexプロパティが正しいインデックスを指しているか確認します。

インデックスは0から始まります。

ListViewのパフォーマンスを向上させる方法は？

ListViewのパフォーマンスを向上させるためには、以下の方法を検討してください。

  • VirtualModeの使用: 大量のデータを表示する場合、VirtualModeを有効にすることで、必要なデータのみを表示し、メモリ使用量を削減できます。
  • 非表示のアイテムの削除: 表示されていないアイテムをListViewから削除することで、描画の負荷を軽減できます。
  • ImageListの最適化: ImageListに追加する画像のサイズを最適化し、必要なサイズに合わせることで、描画速度を向上させることができます。
  • 描画の最適化: DrawItemイベントを使用する場合、描画処理を効率的に行うことでパフォーマンスを向上させることができます。

特に、不要な描画処理を避けることが重要です。

これらの方法を適用することで、ListViewのパフォーマンスを向上させることができます。

まとめ

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

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

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

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

目次に戻る

当サイトはリンクフリーです。出典元を明記していただければ、ご自由に引用していただいて構いません。

C言語
C++
Python
HTML
Java
HTTP

関連カテゴリーから探す

listview
  • URLをコピーしました！

関連記事

目次から探す