Simple Application DataTemplate

Good day.

For me, my life as a programmer is divided into two stages. Before I met WPF, and after. I had to work very closely with this technology in a single project, as a result I gained some knowledge that I want to share with you. What is written below is not a revelation, and for those familiar with WPF it may seem commonplace. All this is described in the network, in one form or another, simpler or more complicated, but all these descriptions have one feature — English. Therefore, I will give below a very short, but it seems to me a capacious example of what can be done using Data Templates. Especially this example will be of interest to those who are only looking towards WPF.



Here is such a short file.

< Grid xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"



xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

>

< Grid.Resources >





< XmlDataProvider x:Key ="rss"

Source ="http://informer.gismeteo.ua/rss/99882.xml"

XPath ="/rss/channel" />



< DataTemplate DataType ="item" >

< StackPanel >

< TextBlock Text ="{Binding XPath=title}" />

< TextBlock TextWrapping ="Wrap" Width ="360" Text ="{Binding XPath=description}" />

< Image Margin ="15,15,0,0"

Stretch ="None"

HorizontalAlignment ="Left"

Source ="{Binding XPath=enclosure/@url}" />

</ StackPanel >

</ DataTemplate >



</ Grid.Resources >



< Border BorderBrush ="Black"

BorderThickness ="1" Width ="360" Height ="200" CornerRadius ="6" >



< ListBox ScrollViewer . HorizontalScrollBarVisibility ="Hidden"

ItemsSource ="{Binding Source={StaticResource rss}, XPath=item}" />

</ Border >

</ Grid >



* This source code was highlighted with Source Code Highlighter .

I don’t know about you, but it seems to me that for such an amount of “text” it does a lot. If you save this code and open it in XAMLPad (you can and simply using IE), you will see the weather in my city with gismeteo.ru. As you can see, not a single line of compiled or scripted code is written. I will try to explain what and how.

Well, at first everything is clear, we created a grid (although it’s not quite at the beginning) into which we will place our visual elements. They placed a listbox into it, but then magic begins. In the list box, as it were necessary to put something. This is something that must be taken somewhere. Weather naturally we can take gismeteo with rss feeds. To do this, create an XmlDataProvider in the grid resources:

< XmlDataProvider x:Key ="rss"

Source ="http://informer.gismeteo.ua/rss/99882.xml"

XPath ="/rss/channel" />



* This source code was highlighted with Source Code Highlighter .

we will set it on the necessary tape, and we will specify a path to an element which we want to present in the form of data. In this case, this is the rss weather tape in my city. After that, take a look at the source of the rss feed and see that there the weather data is presented as a set of <item> elements. So let's try to insert this data into the listbox:

')

< ListBox ScrollViewer . HorizontalScrollBarVisibility ="Hidden"

ItemsSource ="{Binding Source={StaticResource rss}, XPath=item}" />



* This source code was highlighted with Source Code Highlighter .

specifying as a source of elements a binding on our XmlDataProvider and setting the item tag for selection. We look at what happened - Oh! .. We have already received in our listbox, the contents of the <item> elements. Now, I would like to see them in a readable form. There is nothing easier. We just need to create a DataTemplate for the item data type:

< DataTemplate DataType ="item" >

< StackPanel >

< TextBlock Text ="{Binding XPath=title}" />

< TextBlock TextWrapping ="Wrap" Width ="360" Text ="{Binding XPath=description}" />

< Image Margin ="15,15,0,0"

Stretch ="None"

HorizontalAlignment ="Left"

Source ="{Binding XPath=enclosure/@url}" />

</ StackPanel >

</ DataTemplate >



* This source code was highlighted with Source Code Highlighter .

Here we have created visual elements that will display the contents of the <item> element and, with the help of buyding and XPath queries, have associated them with the corresponding tags of the <item> element. To do this, we created a StackPanel container, and three things were successively put into it - a text block displaying the title of a weather element, a text block with a detailed description of the weather, and a picture corresponding to our forecast. Everyone, enjoy the weather forecast in my (your) city :)



If to describe it in Russian - we declaratively described three things.

1. Data source

2. The object to display this data.

3. The way this data will look.

The most important point of these three, I think - the third. Its whole importance lies in the fact that we did not write any algorithms, ifs, odds, switches, etc., in order to convert the appearance of our data into a digestible for the user. We just told how we want to see them.



UPD. The comments suggest that in IE does not work: (I did this file for a long time, and then everything was opened normally in IE, apparently it’s a matter of the security settings, I didn’t find it with a swoop :( If you are just interested in the result - a screenshot is given in the comments, if you want to play with the code, it is best to use www.kaxaml.com .