Metro ListBox in WPF

With the latest design strategy of Microsoft, Metro Style is dominating the entire internet. It is not difficult to find many websites adapted some elements of metro style. For Windows 8, you can fully feel the power of Metro Style.

Today, I am going to show you how to turn your ListBox (WPF / Silverlight) into Metro Style.

The result ListBox will be as below.

Listbox

I’ve remembered one day, I am doing my Imagine Cup coding part in Silverlight.

Suddenly, List of check box, List of Radio Button , List of Pic with Description come across in my mind.

Then, I think of a good way to do so. After a moment, I have these ideas.

 

Let me briefly explain. I will use a stackpanel to store the items for each item in list. Then add the stackpanel into the list.

Let say we have a list of checkbox and a list of redio button.

It is easy for us to create the list like this.

ListBox lb = new ListBox();
for (int i = 0; i <= 7; i++)
{
    CheckBox cb = new CheckBox(); 
    cb.Content = "Choice" + i.ToString();
    lb.Items.Add(cb);
    // Of course you can add some Event here for
} 

 

Case of Radio button  is the similar, so I dont explain so much here.

But for the case of Pic with Desc…

I will do like this.

ListBox lb = new ListBox();
for (int i = 0; i <= 7; i++)
{
    Image Img = new Image();
    BitmapImage bi = new BitmapImage(); 
    string k = "pic" + i.ToString();
    TextBlock tb = new TextBlock();
    tb.Text = k;
    k += ".jpg";
    bi.UriSource = new Uri(k, UriKind.Relative);
    Img.Source = bi;
    StackPanel sp = new StackPanel();
    sp.Add(Img);
    sp.Add(tb);
    lb.Items.Add(sp);
}  

Hope this can help more people to know more about Silverlight.

Live with Light!

Steve Wong (Hong Kong)