In this post find out how easily you can use databinding to create a listbox which gives visual data representation. First up, create a class [Student.cs] like as follows… Notice the Students class below is an ObservableCollection. 

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace DataBinding
{
    public class Student
    {
        public string name { get; set; }
        public int marks { get; set; }

        public Student(string name, int marks)
        {
            this.marks = marks;
            this.name = name;
        }
    }

    public class Students : ObservableCollection<Student>
    {
        public Students()
        {
            Add(new Student("Michael", 34));
            Add(new Student("Scott", 44));
            Add(new Student("Paul", 56));
            Add(new Student("Peter", 87));
            Add(new Student("Adam", 92));
            Add(new Student("Dinesh", 76));
            Add(new Student("James", 15));
            Add(new Student("Ali", 19));
            Add(new Student("Suresh", 13));
        }
    }
}

Create another class called [MarksConverter.cs]. This is the class that will help us in converting the range of numbers to an
appropriate color code.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;

namespace DataBinding
{
    public class MarksConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, 
System.Globalization.CultureInfo culture)
        {
            int marks = int.Parse(value.ToString());
            string color = string.Empty;
            if (marks < 30) return color = "Red";
            if (marks < 50) return color = "Orange";
            if (marks < 80) return color = "Yellow";
            if (marks < 100) return color = "Lime";

            return color;
        }

        public object ConvertBack(object value, Type targetType, object parameter, 
System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Create a page, and add the following namespace

xmlns:data="clr-namespace:DataBinding"

Add the following resources inside the Grid in mainpage.xaml (or any other page)

        <Grid.Resources>
            <data:Students x:Key="studentdata" />
            <data:MarksConverter x:Key="color" />
        </Grid.Resources>

Add the following Listbox and you should be done…

        <ListBox Height="272" Margin="12,12,0,0" Name="listBox1" 
                 VerticalAlignment="Top" ItemsSource="{StaticResource studentdata}" 
                                         HorizontalAlignment="Left" Width="204">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding name}" MinWidth="60"></TextBlock>
                        <TextBlock Text="{Binding marks}"></TextBlock>
                        <Rectangle Margin="10,0,0,0" Fill="{Binding marks, 
                                   Converter={StaticResource color}}" Width="{Binding marks}"  />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

If you have followed along, you can see the output in the design pane as…

Hope this helps,
Rahul