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

2020年8月9日C#,開発

おはようございます。

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

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

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

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

1. 画面
2. プログラム
3. 起動してみる
4. まとめ

画面

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

        }
    }
}

usingSystem.Drawing;

usingSystem.Windows.Forms;

namespaceSampleImageCombobox

{

publicpartial classForm1:Form

{

publicForm1()

{

InitializeComponent();

// ドロップダウンのスタイル

// これを設定しないと、選択時に画像が表示されないよ

cb_image.DropDownStyle=ComboBoxStyle.DropDownList;

// オーナードローを指定

cb_image.DrawMode=DrawMode.OwnerDrawFixed;

// 画像の高さを指定

cb_image.ItemHeight=200;

// イメージリストを元にコンボボックスアイテムを追加していく

foreach(Image img inimg_source_list.Images)

{

cb_image.Items.Add(img);

}

// 別に文字列を設定してもよさそう

//cb_image.Items.Add("あ");

//cb_image.Items.Add("い");

//cb_image.Items.Add("う");

}

privatevoidCb_image_DrawItem(objectsender,DrawItemEventArgse)

{

e.DrawBackground();

// コンボボックスとして処理できるようにキャスト

ComboBox cb=sender asComboBox;

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

}

起動してみる

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

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

まとめ

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

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

何かのお役に立てれば。

ではでは。

2020年8月9日C#,開発C#,CSharp,サンプルプログラム

Posted by doradora