Simple Application DataTemplate

    Good afternoon.
    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 the framework of one project, as a result of which I gained some knowledge that I want to share with you. What is written below is not a revelation, and for those who are familiar with WPF, it may seem commonplace. All this is described online, in one form or another, easier or more complicated, but all of 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. This example will be especially interesting for those who are just looking towards WPF.

    Here is such a short file.

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

           Source="http://informer.gismeteo.ua/rss/99882.xml"
       XPath="/rss/channel"/>
      
       
       
       
       
                    Stretch="None" 
                HorizontalAlignment="Left"    
                Source="{Binding XPath=enclosure/@url}" />
       

        

       
     


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

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



    * This source code was highlighted with Source Code Highlighter.

    I don’t know about you, but it seems to me that for so much “text” he does a lot. If you save this code and open it in XAMLPad (you can simply use IE), you will see the weather in my city with gismeteo.ru. As you can see, not a single line of compiled or script code is written. I’ll try to explain what and how.
    Well, at first everything is clear, we created a grid (though it is not quite at the beginning), in which we will place our visual elements. Put a listbox in it, but then the magic begins. Something needs to be put on the box sheet. This is something, we must take it somewhere. Of course we can take weather with rss tape gismeteo. To do this, create the XmlDataProvider grid resources:

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

    * This source code was highlighted with Source Code Highlighter.


    set it on the desired tape, and indicate the path to the element that we want to represent in the form of data. In this case, this is the rss weather feed in my city. After that, look at the source of the rss feed and see that there weather data is presented as a set of elements. So let's try to insert this data into the listbox:

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

    * This source code was highlighted with Source Code Highlighter.


    pointing to our XmlDataProvider as the source of the elements and setting the item tag for the selection. We look at what happened - Oh! .. We have already received in our listbox, the contents of the 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:


       
       
       
                    Stretch="None" 
                HorizontalAlignment="Left"    
                Source="{Binding XPath=enclosure/@url}" />
       

        


    * This source code was highlighted with Source Code Highlighter.


    Here we created visual elements that will display the contents of the element and with the help of binders and XPath queries we matched them with the corresponding element tags . To do this, we created the StackPanel container, and three things were sequentially put into it - a text block displaying the title of the weather element, a text block with a detailed description of the weather, and a picture corresponding to our forecast. That's it, we enjoy the weather forecast in my (your) city :)

    If you describe it in Russian, we declaratively described three things
    1. Data source
    2. An object to display this data.
    3. The way this data will look.
    The most important point of these three, as it seems to me, is the third. All its importance lies in the fact that we did not write any algorithms, ifas, handicaps, switches, etc., in order to transform the appearance of our data into a digestible for the user. We just talked about how we want to see them.

    UPD The comments suggest that it doesn’t work in IE :( I did this file for a long time, and then everything opened normally in IE, apparently it’s the security settings, I didn’t find it right away :( 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 .

    Also popular now: