ListBox DataBinding in XAML

Introduction

In easy words, we design a ListBox whose data/value is defined in a class rather than in a properties windows or XAML window.

Note: We will prefer XAML code rather than doing drag-drop to design the UI.

Earlier, we dealt with the simpler ListBox operation where we added a ListBoxItem within a ListBox Tag.

That is a static way to bind the data.

<ListBox>
<listBoxItem>  ITEM 1 </ListBoxItem>
<ListBoxItem> ITEM 2 </ListBoxItem>
.
.
<ListBoxItem> ITEM N </ListBoxItem>
</ListBox>

Now, we will deal with a dynamic way, in other words Data Binding.

Procedure

Step 1 : We will put our code within <Grid>… </Grid> tags.



Step 2 :

<Grid>
    <ListBox Margin="10" Name="designerListBox">
          <ListBox.ItemTemplate>
              <DataTemplate>
                  <StackPanel>                       
                      <Image Source="{Binding imageLocation}" Stretch="UniformToFill"/>
                      <TextBlock Text="{Binding displayName}" FontSize="20" FontWeight="Bold" />                       
                  </StackPanel>
              </DataTemplate>
         </ListBox.ItemTemplate>
    </ListBox>
</Grid>

Here, we have <ListBox> .. </ListBox> tags that is a Lisbox controls code.

And, inside that tag we have defined a Name attribute (in other words designerListBox) so that we can identify it.

Then we have:

<ListBox.ItemTemplate> and <DataTemplate>

Whenever we bind anything to the ListBox we will prefer to use <ListBox.ItemTemplate>.. <DataTemplate> rather than <ListBoxItem>.

Note: Simply, we will have these TAGS when we are binding the data, else use <ListBoxItem> to add the values to list box.

Next we have a Stack panel, to organize the Text Block and Images controls correctly.

By default, a stack panel is vertically oriented (in other words <Stackpanel Orientation="Vertical"> is the same as <StackPanel>).

Next, we have an Image and TextBlock to get the Bound value.

There we have bound the Source Property (for the image) and Text Property (for the TextBlock).

Step 3 : We have completed the Designer part of the project. Now, we will start back-end codeing (C# code, I mean).



From the XAML window, we can bind two properties, in other words Source and Text.

And, both of them are string type.

So we will create two string types, Property in the Binder Class. I have named it binderClass (it depends upon you) in the same MainWindows.xaml.cs (since we can have more than one Class inside a single namespace).

So, we have:



Step 4 : We have designed controls in XAML (Target) and defined the source class (in other words binderClass).

There must be something that will link the Target to the Data Source.

So, we will define the LINK part in the MainWindows Class constructor.

Since we have defined the ListBox in XAML it will be better to store the values of the Source in the List or ArrayList.

Here, we will have a List Data Type.

public MainWindow()
{
      InitializeComponent();        
      //PART-1
      // Declareing a Generic List
      List<binderClass> myList = new List<binderClass>();            
      //PART-2
      myList.Add(new binderClass() { imageLocation = @"c:\users\gr33n synt4x\documents\visual studio 2010\Projects\MyFile\MyFile\Images\addFriend.ico", displayName = "Add Friend" });
      myList.Add(new binderClass() { imageLocation = @"c:\users\gr33n synt4x\documents\visual studio 2010\Projects\MyFile\MyFile\Images\myPage.ico", displayName = "My Page" }); 
      //PART-3
      binderClass binder1 = new binderClass();
      binder1.displayName = "Relationship";
      binder1.imageLocation = @"c:\users\gr33n synt4x\documents\visual studio 2010\Projects\MyFile\MyFile\Images\relationships.ico";
      myList.Add(binder1); 
      //PART-4
      // ASSIGN the object to TAGRET List
      designerListBox.ItemsSource = myList;       
}

The following decribes the four parts (Part-1, Part-2, Part-3 and Part-4) of the preceding code.

From Part-1

We have defined a List for the binderClass Class.

In other words List<binderClass> myList=new List<binderList>();

Whose instance name is "myList".

From Part-2

Here, we have bound the value in the Source class (in other words binderClass):

myList.Add(); // How we add value in LIST

myList.Add(
new binderClass()
{
   imageLocation= "_______________________";
   displayName= "_________________________";
}
);

Here, we ed the object of the binderClass in ListBox.Add() as an argument, which will fill this particular value in the ListBox Control that we have earlier defined in XAML.

From Part-3

As you can guess Part-2 and Part-3 are both the same thing but done in differently.

In Part-3 we have defined an extra Reference named binder1.

From Part-4

In the last code, we have bound the ListBox Control to the List (Back End Code) using the ItemSource Property:

dwsignerListBox.ItemSource= myList;

Step 5 : When we run the project we have the following window:



Solution Explorer of the Project looks like:



Next, we will move to the other controls, like Combo box, Tree and ListView.