This tutorial shows how easy it is to use XML-databinding in Blend without writing a single line of code and mostly using the drag-and-drop magic of Blend. We will create a very simple rss-reader that shows the content of a single rss-feed. This post was inspired by the great talk by Isabel Gomez Miragaya and Katrien De Graeve they gave at TechDays 2011 Belgium titled “Designing and Building a Windows Phone 7 Application end-to-end” (video of the talk).
Adding the XML-source
In the upper right corner, click the Data tab and then click the Icon in the upper right of this tab (Create Data Source) and choose “Create XML Data Source…”
Point to the XML you wish to use.
In this example we’ll use the RSS-feed of this blog (If you choose an external XML-file, a small delay might occur after clicking ok.)
If all went well, we can immediately see what fields this xml consists of:
Voila, we are through with the ‘difficult’ part. We can now just do good-old drag-and drop to create our Gui. Simple drag elements from the Datasource to the Objects and Timeline tree and Blend will (try to) deduct what you want to do. The icon in front of each element is an indication of what type of control Blend will add once you drop the element on the grid.
Blending the data with the controls
First we’ll add a stackpanel to our grid:
<Grid x:Name=”LayoutRoot>
<StackPanel>
</StackPanel>
</Grid>
For example. If we drag the title element (located all the way at the bottom) from our data source and drop it on top of the StackPanel in the Objects window, Blend will do the boring Binding work for you.
<Grid x:Name=”LayoutRoot” DataContext=”{Binding Source={StaticResource XMLBlogFeed}}”>
<StackPanel>
<TextBlock Text=”{Binding XPath=/rss/channel/title}”/>
</StackPanel>
</Grid>
Blend has automatically set the DataContext of our Grid to the full feed (i.E. XMLBlogFeed) because it supposes you will be using this source a bit more on this control. Secondly it added a TextBlock whose Text-property is bound to the correct XPath of our feed. Is this easy or what. In fact, if we are online, we will immediately see the Title coming up in the Design-view of the Window.
Blending the data with itemtemplates
We now will create a listbox that shows each posts of the blog, with a title and short description.
Let’s add a ListBox to the stackpanel and bind it to the items-collection of the feed. We’ll also give the listbox an horizontal scrollviewer
<ScrollViewer HorizontalScrollBarVisibility=”Visible”>
<ListBox />
</ScrollViewer>
Now drag the ‘item’-element from the datasource to the listbox:
Blend is doesn’t really know what to do with this element so a window will popup asking you what you to what property of the listbox you wish to bind this element. Choose ItemSource.
If all went well you should immediately see a load of html-content from the feed in the design window:
Of course, we will need to define an ItemTemplate, otherwise we’ll have the worst rss-viewer ever.
Rich click the Listbox in the objects and timeline window and choose “Edit Additional Templates” => “Edit Generated Items”=> “Create Empty…”
Give the template a name and click ok:
If all went well, you should now be in the ItemTemplate, shown in the Objects and Timeline pane.
First we replace the <Grid/> control to a stackpanek:
<DataTemplate x:Key=”ItemsFeedTemplate”>
<StackPanel>
</StackPanel>
</DataTemplate>
By dropping elements from the Data Source pane to this template we can simply generate a databound itemtemplate. For example, if we drag both the title and pubDate to the stackpanel we immediately see the effect:
<DataTemplate x:Key=”ItemsFeedTemplate”>
<StackPanel>
<TextBlock Text=”{Binding XPath=title}”
/>
<TextBlock Text=”{Binding XPath=pubDate}”
/>
</StackPanel>
</DataTemplate>
As you can see, using Blend for this kind of stuff is incredibly straightforward and intuitive. For example we could use an Expander control that hides the short description of each post:
<StackPanel>
<TextBlock Text=”{Binding XPath=title}”
/>
<TextBlock Text=”{Binding XPath=pubDate}”
/>
<Expander>
<TextBlock></TextBlock>
</Expander>
</StackPanel>
Than drag and drop the description element to the TextBlock in the Expander. Blend will again automatically do the menial, boring stuff:
<TextBlock
Text=”{Binding XPath=description}”></TextBlock>
That’s all folks!
I was mildly surprised how easy it was to do this kind of thing in Blend. Until now I always perceived doing databinding in Blend as an exercise for the weak J However, because it is so easy to do, one can rapidly create a vast databound UI, without the usual hassle one has when doing this stuff in Visual Studio.
I leave it up to you to make the design fancy and sexy.
Tim Dams 