[ VB.NET / C# ] ListView 1行おきに背景色を変更して縞々のリストにする

Tweet

Pocket

リストビューで 1行おきに背景色を変更して縞々にみえる UI のサンプルコードを掲載しています。併せて、選択状態となった時の背景色も変更しています。

事前のプロパティ設定とイベント追加

サンプルスクリプトでは事前にプロパティの設定とイベントの追加を行っています。

• ListView.OwnerDraw プロパティ  true
• ListView.View プロパティ Detail
• ListView.FullRowSelect プロパティ true
• ListView.DrawColumnHeader イベントの追加
• ListView.DrawSubItem イベントの追加

サンプルコード

VB.NET

Private Sub ListView1_DrawColumnHeader(ByVal sender As System.Object, _
                                       ByVal e As System.Windows.Forms.DrawListViewColumnHeaderEventArgs) _
                                       Handles ListView1.DrawColumnHeader
    ' デフォルトの描画（カラムは変更しない）
    e.DrawDefault = True
End Sub

Private Sub ListView1_DrawSubItem(ByVal sender As System.Object, _
                                  ByVal e As System.Windows.Forms.DrawListViewSubItemEventArgs) _
                                  Handles ListView1.DrawSubItem

    ' 選択されている場合は、選択行の背景色をピンクにする
    If e.Item.Selected Then
        e.Graphics.FillRectangle(Brushes.Pink, e.Bounds)
    Else
        ' 奇数行の場合は背景色を変更し、縞々に見えるようにする
        If e.ItemIndex Mod 2 > 0 Then
            e.Graphics.FillRectangle(Brushes.LightBlue, e.Bounds)
        End If
    End If
    ' テキストを忘れずに描画する
    e.DrawText()
End Sub

C#

private void listView1_DrawColumnHeader(object sender, 
                                        DrawListViewColumnHeaderEventArgs e)
{
    // デフォルトの描画（カラムは変更しない）
    e.DrawDefault = true;
}

private void listView1_DrawSubItem(object sender, 
                                   DrawListViewSubItemEventArgs e)
{
    // 選択されている場合は、選択行の背景色をピンクにする
    if(e.Item.Selected) {
        e.Graphics.FillRectangle(Brushes.Pink, e.Bounds);
    } else {

        // 奇数行の場合は背景色を変更し、縞々に見えるようにする
        if (e.ItemIndex % 2 > 0) {
            e.Graphics.FillRectangle(Brushes.LightBlue, e.Bounds);
        }
    }
    // テキストを忘れずに描画する
    e.DrawText();
}

Tweet

Pocket