Professional, Software

Using ListBox

We have shipped source codes for some sample controls as part of the SDK. There was a question on forum about how to use the listbox in the samples so here is the sample.

Few steps to get started…

  1. Create new project of type “Silverlight Project”
  2. Add a reference to Silverlight.Samples.Controls.dll from the SDK which has ListBox control
  3. ListBox.Items property is a collection that takes the item of type FrameworkElement. To make things easy, I just added a new item to my project of type “User Control” and I named it ImageListItem.xaml.
  4. I also created an XML file that contains the data. This XML data can come from anywhere but for making things easy. I added xml file called “ImageListData.xml” to my project and marked it as “Embedded Resources”. This way xml file gets embedded in the assembly itself and I read it using resources APIs in Silverlight.
  5. This xml file contains the data about the title of the image and source (uri) to the image file. Image files are also located under project to make things easy but they can reside anywhere as well.

So my ImageListData.xml looks like this…

<?xml version="1.0" encoding="utf-8" ?>
  <Image Title="RSS" Source="Images/image1.jpg"/>
  <Image Title="Internet Explorer" Source="Images/image2.jpg"/>
  <Image Title="Outlook" Source="Images/image3.jpg"/>
  <Image Title="Visual Studio" Source="Images/image5.jpg"/>
  <Image Title="Notepad" Source="Images/image6.jpg"/>
  <Image Title="Live Writer" Source="Images/image7.jpg"/>
  <Image Title="Expression Blend" Source="Images/image8.jpg"/>


ImageListItem is the control that knows how to show an image and a title. Xaml for that looks pretty straight forward too…It has an image element to show the image and TextBlock element to show the title.

<Canvas xmlns="" 
    <Image x:Name="image"/>
    <TextBlock Canvas.Left="72" Canvas.Top="8" TextWrapping="Wrap" x:Name="title"/>

ImageListItem.xaml.cs contains the definition for logic which also simple. It only has two properties called Source (of type URI) and Title (of type string).


using System;
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; namespace ImageListBox { public class ImageListItem :
Control { Canvas _rootCanvas; Image _image; TextBlock _title; public ImageListItem() { System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("ImageListBox.ImageListItem.xaml"); _rootCanvas = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd()) as Canvas; _image = _rootCanvas.FindName("image") as Image; _title = _rootCanvas.FindName("title") as TextBlock; this.Loaded += new EventHandler(ImageListItem_Loaded); } void ImageListItem_Loaded(object sender, EventArgs e) { UpdateLayout(); } public new double Height { get { return ((FrameworkElement)this).Height; } set { ((FrameworkElement)this).Height = value; UpdateLayout(); } } public new double Width { get { return ((FrameworkElement)this).Width; } set { ((FrameworkElement)this).Width = value; UpdateLayout(); } } private void UpdateLayout() { _rootCanvas.Height = Height; _rootCanvas.Width = Width; _image.Height = Height; _image.Width = Height; _title.Height = Height; _title.Width = Width - Height; } public Uri Source { get { return _image.Source;} set { _image.Source = value; } } public string Title { get { return _title.Text; } set { _title.Text = value; } } } }

Now that I have control that can show an image and a title there are three more things i need to do to make this work…

  1. Use ListBox control
  2. Read XML using XmlReader in System.xml namespace.
  3. Use that data to instantiate ListBoxItems and add them to listbox.

First part is pretty straight forward…

<Canvas x:Name="parentCanvas"
  <Controls:ListBox Height="350" Width="200"  Name="listbox"/>












in the Page.xml.cs code…


using System;
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 Silverlight.Samples.Controls;
using System.Xml;
using System.IO;
using System.Windows.Browser.Net;
using System.Net;

namespace ImageListBox
    public partial class Page : Canvas
        public void Page_Loaded(object o, EventArgs e)
            // Required to initialize variables
            System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("ImageListBox.ImageListData.xml");
            ListBox listbox = this.FindName("listbox") as ListBox;
            XmlReader xr = XmlReader.Create(s);
            while (xr.Read())

                if (xr.IsStartElement("Image"))
                    string title = xr.GetAttribute("Title");
                    string source = xr.GetAttribute("Source");
                    ImageListItem il = new ImageListItem();
                    Uri u = new Uri(source, UriKind.Relative);
                    il.Source = u;
                    il.Title = title;
                    il.Height = 50;
                    il.Width = 200;































The reason why you need to call  listbox.UpdateItems is because framework still does not have support for ObservableCollections and so ListBox does not get notified when items are added to its “Items” collection. UpdateItems forces it to add all the items in collection to its visual tree.  


4 thoughts on “Using ListBox

  1. Pingback: ListBox Clipping Issue « Desperately Seeking Love of Sophie

  2. Pingback: Silverlight相关链接 - Reflector插件,Silverlight控件等 -

  3. It is acceptable time for it to form some methods for the longer term and additionally it’s time to be at liberty. I even have investigate this publish and after I might My partner and that i want to advocate a private some fascinating points or maybe suggestions. maybe you may compose next content discussing this short article. we wish to look at even a lot of aspects of the idea!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s