リスト表示時のみコードと名称を表示するカスタムComboBox

スポンサーリンク

はじめに

Windows Formsのコンボボックス（ComboBox）で、次のイメージのように、通常時はコードのみ表示し、リストを開いた時だけコードと名称を表示する方法を紹介します。

サンプルコード

さっそくサンプルコードを見てみましょう。
comboBox1という名前でコンボボックスをフォームデザイナ等で配置しておいてください。

フォームロードイベント

まず、フォームロードイベントを実装します。

private void Form_Load(object sender, EventArgs e)
{
    // ▼で表示されるリストの幅を、コード＋名称が表示できるだけ広げておく
    comboBox1.DropDownWidth = 300;
    // オーナー描画モードに設定
    comboBox1.DrawMode = DrawMode.OwnerDrawFixed;

    // リストに表示するデータソースの設定
    comboBox1.DisplayMember = "Text";
    comboBox1.ValueMember = "Key";
    comboBox1.DataSource = new List<DrapDwonItem>()
    {
        new DrapDwonItem { Key = "1", Text = "グループ1" },
        new DrapDwonItem { Key = "2", Text = "グループ2" },
        new DrapDwonItem { Key = "3", Text = "グループ3" }
    };
}

データソースに使用するデータモデルのクラスは、次のように宣言します。

public class DrapDwonItem
{
    public string Key { get; set; }
    public string Text { get; set; }
}

DrawItemイベントの実装

オーナー描画モードに設定すると、コンボボックスのDrawItemイベントが発生するようになります。
このイベントで、編集エリアとリストエリアの内容を独自に描画します。

private void comboBox1_DrawItem(object sender, DrawItemEventArgs e)
{

    // 背景の描画
    e.DrawBackground();

    // 描画するモデルを取得
    DrapDwonItem drawItem = e.Index > -1 ? comboBox1.Items[e.Index] as DrapDwonItem : null;

    string text = null;

    if ((e.State & DrawItemState.ComboBoxEdit) != DrawItemState.ComboBoxEdit)
    {
        //リストエリアの描画
        text = $"{drawItem?.Key}：{drawItem?.Text}";
    } 
    else
    {
        //編集エリアの描画
        text = drawItem?.Key;
    }

    // テキスト描画 
    TextRenderer.DrawText(e.Graphics,
    text,
    e.Font,
    e.Bounds,
    e.ForeColor,
    (TextFormatFlags.VerticalCenter | TextFormatFlags.Default));

    //フォーカスの描画
    e.DrawFocusRectangle();
}

ここまでの内容で完成です。

スポンサーリンク

さいごに

普通のアプリではあまり需要がありませんが、業務系のシステムでは割と今回の実装方法は需要があります。

今回のサンプルコードは、DrawItemイベントで編集エリアとリストエリアで描画する文字列を切り替えただけですが、一部の項目だけ背景色変えたりなど、結構いろいろカスタマイズできるので是非試してみてください。