Item template & Data binding with listbox–WP7

ADDING PICTURES AND FORMATTING THE DATA IN LISTBOX

The listbox is an element that is used to display a list of data. The default manner in which the data is presented in the listbox sucks. So we are going to format this by using a technique called data binding. I am going to show how to add pictures and do some formatting with the data.

Advantages:

• Enables you to present multiple data in a single element. For example a single element can display the name, address phone number and a picture
• The design seems really better with data binding when compared to a list of words

As we can see the default listbox(left pic) is really not that good. We are going to transform that to the style shown in the second picture(right pic)

Lets try to format the listbox now.

 

Prerequisites:

• You should have a basic understanding of wp7 app development
• You should have the Windows phone 7 SDK installed

The first step is to encapsulate your data or the properties that you want into a single element - class. For the sake of demonstration I am going to add a picture a name and phone number  (i.e., those things that you want to display in a single item of listbox). This class I am going to write it in the Csharp page that is the .cs file associated with every XAML page.

public class list
        {
            public string name {get; set;}
            public string phone {get; set;}
        }

Now go to the designer page ie., the XAML page and drag and drop a listbox into the UI. This will automatically generate the XAML code for listbox. Now we need to change the template of every item of the listbox. So we are going to do some modifications to the XAML code of the listbox.

<ListBox Height="373" HorizontalAlignment="Left" Name="listBox1" VerticalAlignment="Top" Width="439" Margin="0,41,0,0">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="-200,0,0,0" Name="masterpanel">
                            <StackPanel Width="100" Height="100" Margin="0,0,0,0" Name="imagepanel">
                            <Image Source="pic.png" Stretch="Fill" />
                            </StackPanel>
                            <Grid Margin="300,-100,0,0" Name="textgrid">
                            <TextBlock Text="{Binding name}" FontSize="25" Foreground="Gold"/>
                                <TextBlock Text="{Binding phone}" Margin="0,50,0,0" FontSize="25" Foreground="Gold"/>
                            </Grid>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

How it works?

The first xaml tag that is inserted is the <ListBox.ItemTemplate> which is used to define the item template of that listbox. The second tag <DataTemplate>is where we define how the data is structured in the item template . Then we create a stackpanel called master panel that holds all the items we need in the item. Here our listbox needs a picture, 2 textblocks one for name and the other for phone number. Now we create another stackpanel called image panel for holding the image and give the image source and other details like the source in the tag.Next we create a grid to hold the 2 textblocks

Now notice that the property text of both the textblocks are set as

Text="{Binding name}"  & Text="{Binding phone}"

This is Data binding meaning dynamically get the data and use it here. Notice that the property of binding is set as Binding name and Binding phone where name and phone are the exact property names of the class we declared earlier. If they are not exact the data wont bind properly.

Here for the image I have not used data binding . But if you want different images for different elements you can use the same technique of data binding to the source property of the image.

Key thing:

The key thing thing is that I have altered the margins of every element so that every element gets arranged the way I want it. So you need to this based on trial and error basis which is slightly annoying but never the less worth the pain. This process is going to drive you crazy but do have patience.

Another key thing is that you need to make sure that all properties in the class are public and the class is public. Else even if you add data to your listbox it will appear blank.

This process can also be done using Expression blend which has a easy to use graphical interface and a lot more.

Continuing …. :

Now I add a button and handle the click event so that it adds items to the listbox. I created a new object of the class called obj1. Now I set the properties name and phone no with some sample data (here I use listbox’s count + 1 just for the sake of demonstration). And then add that object to the listbox item list.

private void button1_Click(object sender, RoutedEventArgs e)
        {
            list obj1 = new list();
            obj1.name = "Name " + (listBox1.Items.Count + 1);
            obj1.phone = "Phone - 100" + (listBox1.Items.Count + 1);
            listBox1.Items.Add(obj1);

        }

 

And that’s all its over. Launch the application!!

You can download the source code from here. .

If you have any queries please leave a comment.

Posted in: Windows Phone 7(WP7)