How to have a multi-coloured items of a ListBox in winforms?

I am developing a software in winforms, I am stuck in a step where I have

 List<KeyValuePair<string, string>>.

and some sample data:

List <KeyValuePair<"S", "1200">>
List <KeyValuePair<"S", "1300">>
List <KeyValuePair<"L", "1400">>

I want to diplay the value of the key pair inside a ListBox, where based in the key of the pair the Item on the ListBox has a diffrent colour, for example if the Key is S, then the Item should be red and if the Key is L the Item should be blue.

Hope you could help me with this.

this is the code I did but it doesn't do what is expected:

        e.DrawBackground();
        Graphics g = e.Graphics;
        Graphics x = e.Graphics;

        g.FillRectangle(new SolidBrush(Color.Olive), e.Bounds);
        x.FillRectangle(new SolidBrush(Color.Aquamarine), e.Bounds);

        foreach (var workOrders in GetItac.FilterWorkOrders())
        {
            if (workOrders.Key == "S")
            {
                g.DrawString(workOrders.Value, e.Font, new SolidBrush(e.ForeColor), new PointF(e.Bounds.X, e.Bounds.Y));

            }
            else
            {
                x.DrawString(workOrders.Value, e.Font, new SolidBrush(e.ForeColor), new PointF(e.Bounds.X, e.Bounds.Y));

            }

        }

Solution

When you need to show customized results in a ListBox Control, you need to enable the custom painting of the Items in the list, setting the ListBox DrawMode property to OwnerDrawVariable or OwnerDrawFixed (the latter will set all Items to the same height).

Note → Here, I'm setting it to OwnerDrawVariable

The list Items painting needs to be performed in the DrawItem event of the ListBox, using the DrawItemEventArgs's Graphics object. This allow a correct refresh of the Items when the ListBox or Form need repainting.

1 - You don't have to multiply your Graphics object.
2 - The foreach loop is not needed either, because each Item will be painted when you create/modify the ListBox Items collection.

Note → I'm drawing the Items background the way you're showing in your code, but the visual result might be a bit weird (those colors don't blend well).

First, simulate the result of your GetItac.FilterWorkOrders() method, which will return a List<KeyValuePair<string, string>>, add those items Value to the list:

using System.Collections.Generic;

List<KeyValuePair<string, string>> workOrders;

workOrders = new List<KeyValuePair<string, string>>()
{
    new KeyValuePair<string, string>("S", "1200" ),
    new KeyValuePair<string, string>("S", "1300"),
    new KeyValuePair<string, string>("L", "1400")
};
//Select().ToList() extracts the Value string from the KeyValuePair elements
listBox1.DataSource = workOrders.Select(kv => kv.Value).ToList();

You can also code it this way, if that method actually returns a List<KeyValuePair<string, string>>:

workOrders = GetItac.FilterWorkOrders();
listBox1.DataSource = workOrders.Select(kv => kv.Value).ToList();
//Or
workOrders = GetItac.FilterWorkOrders();
listBox1.Items.AddRange(workOrders.Select(kv => kv.Value).ToArray());

When the ListBox Items collection is filled, the DrawItem event will be raised, to allow the painting of the Items content.
You may need to add the MeasureItem event, to be sure to have a correct measure of each Item's height (mandatory, if you plan on modifying the ListBox Font.

For each item that is drawn, the text color is chosen testing the Key of the KeyValuePair<string, string>: if its value is "S", the text color is set to Color.Red, the background color to Color.Olive. Otherwise they're set to Color.Blue and Color.Aquamarine.

TextFormatFlags flags = TextFormatFlags.LeftAndRightPadding |
                        TextFormatFlags.VerticalCenter;

private void listBox1_DrawItem(object sender, DrawItemEventArgs e)
{
    if (Items.Count == 0 || e.Index < 0) return;
    var lbx = sender as ListBox;
    e.DrawBackground();
    Color textColor = (workOrders[e.Index].Key == "S") ? Color.Red : Color.Blue;
    Color backColor = (workOrders[e.Index].Key == "S") ? Color.Olive : Color.Aquamarine;

    using (var backBrush = new SolidBrush(backColor)) {
        e.Graphics.FillRectangle(backBrush, e.Bounds);
        TextRenderer.DrawText(e.Graphics, workOrders[e.Index].Value, lbx.Font, e.Bounds, textColor, flags);
    }
}

private void listBox1_MeasureItem(object sender, MeasureItemEventArgs e)
{
    e.ItemHeight = (sender as ListBox).Font.Height;
}