【C#】コンボボックスで画像を選択できるようにしてみる（その１）

2020年8月9日C#,開発

おはようございます。

今日はふと、コンボボックスのリスト項目を画像にしてみました。

普通にそういったコンポーネントは容易されていないので、

コンボボックスの設定で、自力で描画するよってモード（オーナードロー）を指定してやる必要があります。

適当に動物の画像を落としてきて試してみました。

スポンサーリンク

画面

Windows Forms でプロジェクトを作成し、画面にラベル、コンボボックス、イメージリストを配置。

イメージリストに、コンボボックスで表示する画像のコレクションを設定する。

更に、イメージリストのプロパティで Size を画像と合わせておく必要がありますよ。

プログラム

Form1.cs

using System.Drawing;
using System.Windows.Forms;

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

            // ドロップダウンのスタイル
            // これを設定しないと、選択時に画像が表示されないよ
            cb_image.DropDownStyle = ComboBoxStyle.DropDownList;

            // オーナードローを指定
            cb_image.DrawMode = DrawMode.OwnerDrawFixed;

            // 画像の高さを指定
            cb_image.ItemHeight = 200;

            // イメージリストを元にコンボボックスアイテムを追加していく
            foreach (Image img in img_source_list.Images)
            {
                cb_image.Items.Add(img);
            }

            // 別に文字列を設定してもよさそう
            //cb_image.Items.Add("あ");
            //cb_image.Items.Add("い");
            //cb_image.Items.Add("う");

        }

        private void Cb_image_DrawItem(object sender, DrawItemEventArgs e)
        {

            e.DrawBackground();

            // コンボボックスとして処理できるようにキャスト
            ComboBox cb = sender as ComboBox;

            Image img;
            if (e.Index > -1)
            {
                // コンボボックスから取得してもOK
                //img = cb.Items[e.Index] as Image;

                // イメージリストの該当インデックス画像を設定
                img = img_source_list.Images[e.Index];
            }
            else
            {
                // 初期表示時にデフォルト表示する場合は インデックス -1 で画像を指定すればOK
                img = img_source_list.Images[0];

                // 初期表示時に何も表示しない場合はインデックス -1 を処理しなければOK
                //return;
            }

            // 画像と座標を指定して描画する
            e.Graphics.DrawImage(img, e.Bounds.X, e.Bounds.Y);

            // フォーカス時の囲い線を表示する
            e.DrawFocusRectangle();

        }
    }
}

起動してみる

初期表示時に先頭のイメージを表示。

コンボボックスを展開したイメージ。

まとめ

ひとまず、簡単にコンボボックスに画像を表示するサンプルでした。

次回もう少しなんかやってみようと思います。

何かのお役に立てれば。

ではでは。