のにっき

【VS】リストボックスの背景色をノードごとに変更する

Windowsフォームアプリのリストボックスです。
リストボックスの背景色を変更するのは意外とめんどくさかったので
手法をまとめようと思います。

フォームを作ってみた

f:id:apuridasuo:20200729131910p:plain
図:背景色を変更させたListBox

上図が、実際に作成したフォームの画像になります。
ノード背景を1つずつ変更させることで、見やすい背景色になってます。
背景色を変更させるためには、
プロパティ設定イベント組み込みを行う必要があります。

プロパティ設定

DrawMode切り替え
f:id:apuridasuo:20200729132246p:plain
図:切り替え後のプロパティ画面(プロパティ)

上図のように、背景色を変更したいListBoxのプロパティ設定の項目
「 DrawMode = OwnerDrawFixed 」
に変更します。
この設定を変更することで、後に記述します「 DrawItem
イベントを有効にすることが出来ます。

DrawItemイベント設定
f:id:apuridasuo:20200729132912p:plain
図:切り替え後のプロパティ画面(イベント)

上図のように、イベントを設定します。
※関数名は任意で構いません
※関数の内容は後に記述します

イベント関数組み込み

フォーム起動時にリストボックスにノードを入れる処理
/***********************************************************************
    【Ev】フォーム起動時イベント
***********************************************************************/
private void Form1_Load(object sender, EventArgs e)
{
    //リストにノード追加
    listBox1.Items.Clear();
    string[] setNd = new string[] 
        {"ノードA","ノードB","ノードC","ノードD","ノードE",
            "ノードF","ノードG","ノードH","ノードI","ノードJ" };
    listBox1.Items.AddRange(setNd);
}
リストボックス描画イベント内容
/***********************************************************************
    【Ev】リストボックスノード描写処理
***********************************************************************/
private void ListBox_Cmn_DrawItem(object sender, DrawItemEventArgs e)
{
    // 背景描画
    e.DrawBackground();
    // 描画許可判定
    if (e.Index < 0)
    {
        return;
    }
    // 描画用変数設定
    Brush NdClrWd = new SolidBrush(e.ForeColor);
    string NdWord = ((ListBox)sender).Items[e.Index].ToString();
    // 奇数行の場合は背景色を変更し、縞々に見えるようにする
    Color backcolor;
    if (e.Index % 2 == 0)
    {
        backcolor = Color.FromArgb(220, 220, 220);
    }
    else
    {
        backcolor = Color.FromArgb(255, 255, 255);
    }
    // ノード作成
    e = new DrawItemEventArgs(e.Graphics, e.Font, e.Bounds, e.Index, e.State, e.ForeColor, backcolor);
    e.DrawBackground();
    e.Graphics.DrawString(NdWord, e.Font, NdClrWd, e.Bounds, StringFormat.GenericDefault);
    NdClrWd.Dispose();
    e.DrawFocusRectangle();
}

このようにイベント内容を組み込むと、
画像のように背景色が縞々になります。
// 奇数行の場合は背景色を変更し、縞々に見えるようにする
この部分を自由に変更することで、自分好みの形式を設定することが出来ます。
DrawItem」イベントはListBoxのノードが変更されるたびに呼ばれるイベントなので、
常に最新のノードに対する描画が行われます。
描画処理を忘れることが無いのでぜひ、ご活用ください。