Data Binding to XML Data - Page 5
       by kirupa  |  22 January 2008

In the previous page, from the Create Data Template window, you changed the control that will be hosting the image path. Once you made the change, you could see in the Preview area that, what was once strings, now displays as images. There is something peculiar about what you see though...

Why are Two Images Displayed?
As you see, there are two images currently displayed. What we want to do is figure out why two images are being displayed and how to fix that. Our XML data is pretty complicated, so I am not going to put you through looking through lines of XML code. Instead, let me show you why you are seeing two images.

In the Create Data Template window you were in earlier, the following is what the image node looked like:

[ notice the actual node names and their details displayed in parenthesis ]

Notice the parent image node has an Array modifier - image (Array). What that means is that you are not dealing with a singular piece of data. Also, notice that your control hosting your values is an ItemsControl, a control designed to host many pieces of information. What all this means, is that there are multiple image values in our main image node, and those images are populated inside an ItemsControl.

This explains why you are seeing two images after making the modifications from the previous page. There is nothing wrong with what you did. You are dealing with an array of images, and our data happens to have two images that need to be displayed - one larger and one smaller. There is no way to fix that via the Create Data Templates window that you closed earlier. We are going to have to modify our listbox's item template (a type of data template) that hosts this data instead.

Accessing the ItemTemplate
You look at your listbox and see all of the data displayed. Up until this point, we were modifying what was displayed inside our listbox via the Create Data Template window. The Create Data Template functionality is a one-time deal. If you want to make modifications to your existing data template, you cannot do that using the steps we took earlier. In other words, you can use the Create Data Template window to create a new template and make any modifications that you want, but you have no way of modifying a template you created earlier.

Fortunately, you have another (probably more flexible) way of editing the items inside your listbox. That approach involves your listbox's ItemTemplate. Right click on your listbox, and from the menu that appears, go to Edit Other Templates | Edit Generated Items (ItemsTemplate) | Edit Template:

[ edit your listbox's ItemTemplate ]

The template you are editing is the data template you had created earlier. If you look in your Objects and Timeline panel and expand all of the nodes that you see, your object tree will look like the following:

[ what your ItemTemplate looks like ]

This may not look familiar to you in this particular form, but it is the actual object representation of what you saw in the Create Data Template window:

[ your Create Data Template window shows the data template in a simplified form ]

A few paragraphs earlier, I mentioned that your array of images is displayed in an ItemsControl. If you look in your Objects and Timeline panel, you'll see an entry for ItemsControl also:

[ your ItemsControl is used to store your images ]

This is a good spot to take a quick break! Much of this page focused on comparing what you saw in your Create Data Template window and what you are seeing now when editing your listbox's ItemTemplate. In a nutshell, they both deal with the same underlying data. They just happen to provide a different UI with different functionality for manipulating that data. 

We have pinpointed the exact control that is responsible for displaying our images. In the next page, let's figure out where to go from here.

Onwards to the next page.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8