コンボボックスのリストにイメージを表示する方法

サンプル コードのダウンロード (vbmigtips_ImageComboBox.msi, 492 KB)

標準でサポートされているコンボボックスのリストには、イメージを表示することができません。しかし、リストにイメージを表示させた場合もあると思います。そこで今回は、図1 のようにコンボボックスのリストにイメージを表示することができるユーザーコントロールの作成方法を紹介します。

　
　図1

まず、[ファイル] メニューの [新規作成] の [プロジェクト] を選択し、[新しいプロジェクト] ダイアログを表示します。表示されたダイアログの [テンプレート] 項目から「Windows コントロールライブラリ」を選択し、「プロジェクト名」と場所を指定して [OK] ボタンをクリックします。これでユーザーコントロールを作成するプロジェクトが作成されます。

作成されたプロジェクトの UserControl1.vb ファイルの「Labelnherits System.Windows.Forms.UserControl」を「Inherits System.Windows.Forms.ComboBox」に変更し、コンストラクタ (Public Sub New() ... End Sub) に DrawMode を設定します。実装コードは以下のとおりです (太字が追加する部分です)。

Public Sub New() MyBase.New() InitializeComponent() DrawMode = DrawMode.OwnerDrawFixed End Sub

リスト1

リスト1 の「DrawMode = DrawMode.OwnerDrawFixed」の追加で、コンボボックスの項目を独自で描画することができるようになります。描画する処理は OnDrawItem イベントハンドラで行います。

次に、コンボボックスに表示するイメージを設定する ImageList プロパティを作成します。実装コードは以下のとおりです。

Private ListaImg1 As New ImageList Public Property ImageList() As ImageList Get Return ListaImg1 End Get Set(ByVal ListaImagem As ImageList) ListaImg1 = ListaImagem End Set End Property

リスト2

続いて、OnDrawItem イベントハンドラに、コンボボックスの項目を描画する処理を実装します。実装コードは以下のとおりです。

Protected Overrides Sub OnDrawItem(ByVal e As System.Windows.Forms.DrawItemEventArgs) e.DrawBackground() e.DrawFocusRectangle() Dim bounds As New Rectangle bounds = e.Bounds Dim s As String = Me.Items(e.Index) Try If (ListaImg1.Images.Count <> 0) Then ListaImg1.Draw(e.Graphics, bounds.Left, bounds.Top, e.Index) e.Graphics.DrawString(s, e.Font, New SolidBrush(e.ForeColor), bounds.Left + ListaImg1.Images(e.Index).Width, bounds.Top) Else e.Graphics.DrawString(s, e.Font, New SolidBrush(e.ForeColor), bounds.Left, bounds.Top) End If Catch ex As Exception e.Graphics.DrawString(s, e.Font, New SolidBrush(e.ForeColor), bounds.Left, bounds.Top) End Try MyBase.OnDrawItem(e) End Sub

リスト3

上記 (リスト3) の「e.DrawBackground()」では、コンストラクタで指定されている境界線に適切な色で背景を描画し、「e.DrawFocusRectangle()」でフォーカスを示す四角形を描画します。表示するイメージがある場合は、「ListaImg1.Draw(e.Graphics, bounds.Left, bounds.Top, .Index)」でイメージを表示し、「e.Graphics.DrawString(s, e.Font, New SolidBrush(e.ForeColor), bounds.Left + ListaImg1.Images(e.Index).Width, bounds.Top)」で表示したイメージの隣にテキストを表示します。上記を実装し、ビルドするとコンボボックスのリストにイメージを表示するユーザーコントロールが作成されます。

上記で作成したユーザーコントロールは、Windows アプリケーションの Form に IDE から貼り付けて使用します。 IDE から作成したユーザーコントロールを Form に貼り付け、以下のコードを実装します (リストに表示するイメージは、ImageList コントロールを使用して事前に設定してあります)。

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load ComboImage1.ImageList = ImageList1 ComboImage1.Items.AddRange(New Object() {"青い山脈", "夕日", "花", "雪景色"}) End Sub

リスト4

上記 (リスト4) の「ComboImage1.ImageList = ImageList1」で 表示するイメージを、「ComboImage1.Items.AddRange(New Object() {"青い山脈", "夕日", "花", "雪景色"})」で表示するテキストをそれぞれ設定します。上記を実装すると、図1 のようにコンボボックスのリストにイメージが表示されます。