How to multicolor row text in listbox C#?

Question

i wanna do a log lister app in C#. I have a listbox called LogBox and i wanna color multiple times a row. like: "[04:30:20] - Admin: Hello" but each variable should be different color at row in Listbox.

How should i do this with button action?

I tried LogBox.Items.Add(LogBox.ForeColor = color.red + "[" etc etc etc. but its doesn't work.

Answer 1

I guess you might be looking for something like this.

It can be easily achieved if you have a model class which is bound to your ListBox. Follow the below steps

Step 1 - Create a model class, say suppose "ListBoxItemModel.cs"

public class ListBoxItemModel
{
    public string Text { get; set; }

    public Brush ForegroundBrush { get; set; }  
}

Note:- I am not following any MVVM approach here for demo. If you are familiar then you can implement with this code.

Step 2 - Create a window with ListBox and define a DataTemplate for your Model class as below in your MainWindow.

Assign the DataTemplate to your ListBox ItemTemplate property.

<Window x:Class="SO61263305.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SO61263305"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Window.Resources>
    <DataTemplate x:Key="LocalTemplate" DataType="local:ListBoxItemModel">
        <TextBlock Text="{Binding Text}" Foreground="{Binding ForegroundBrush}" />
    </DataTemplate>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <ListBox x:Name="ItemsListBox" Grid.Row="0" Height="200" Width="200" 
             ItemTemplate="{StaticResource LocalTemplate}"/>
</Grid>

Step 3 - Create an List of "ListBoxItemModel" and bound to ListBox from code-behind of your window or user control. In my case it is MainWindow.xaml.cs

private void LoadDataObjects()
{
        var items = new List<ListBoxItemModel>();
        var item = new ListBoxItemModel()
        {
            Text = "John ABCD 1",
            ForegroundBrush = new SolidColorBrush(Color.FromRgb(0, 0, 0))
        };

        items.Add(item);

        item = new ListBoxItemModel()
        {
            Text = "John ABCD 2",
            ForegroundBrush = new SolidColorBrush(Color.FromRgb(200, 79, 24))
        };

        items.Add(item);
        ItemsListBox.ItemsSource = items;
    }

In the above method you need to add each item with the Text which you wanted to display and Foreground Brush.

Step 4 - Call above method from your constructor of code-behind or else you can call from any other events like Button click to load the data to a listbox.

See below of my complete MainWindow.xaml.cs (code behind of the MainWindow)

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        LoadDataObjects();
    }

    private void LoadDataObjects()
    {
        var items = new List<ListBoxItemModel>();
        var item = new ListBoxItemModel()
        {
            Text = "John ABCD 1",
            ForegroundBrush = new SolidColorBrush(Color.FromRgb(0, 0, 0))
        };

        items.Add(item);

        item = new ListBoxItemModel()
        {
            Text = "John ABCD 2",
            ForegroundBrush = new SolidColorBrush(Color.FromRgb(200, 79, 24))
        };

        items.Add(item);
        ItemsListBox.ItemsSource = items;
    }
}

Hope this should give you some idea and you can improve your requirements on top of it.

Give a try and let us know in case if you face any difficulties.