DataTemplate In XAML (WPF, Windows Phone, Windows 8 and Silverlight)

Introduction

XAML is a markup language that is currently very popular. We develop applications on all platforms, Windows, web and mobile or Tablets. Every platform control, action or behavior is nearly the same. Also supported are 2d, 3d and so many features. When designing XAML I consider customizing the controls, in other words a developer can customize a control based on his business or user requirements. It's very flexible and comfortable. Obviously this concept comes from Windows application custom controls and web applications, before WPF or XAML we also customized our controls but not a flexibly as with WPF or XAML because we did not use any markup for customization. Instead customization was based on our code, here you can customize a control of any shape and easily use it. It’s very simple and sweeter.

In this article I‘ll try to explain DataTemplates in XAML (WPF, Windows Phone, Silverlight or Windows 8) with some cool examples.



The preceding is an image of a simple ComboBox with country. It’s very good and simple for understanding from the user point of view but think of doing it with a normal Windows Form, it’s a bit complicated and you‘ll have a horrible experience, at least that is my personal experience.



And the same thoughts result from doing it with XAML. It’s just a few hours task, anybody can easily do it like this.



My target shows how different it is for a normal Windows Forms application and an XAML application. In short, before WPF or after WPF. After XAML our control becomes more powerful, simple and flexible. The Datatemplate displays a collection of data, the preceding was a simple Combobox example of a datatemplate.

What a DataTemplate is

A DataTemplate helps us to display a Collection of data in a customized format or based on business requirements. In simpler terms, a DataTemplate provides you great flexibility to define the presentation of your data on the user interface.

For example, one common use of binding is to display data in a list. For example a combobox or listbox. Whether retrieving data from a database or using some static or list and collection of data, it’s useful to the display. The data is shown one item at a time. As I already explained above, in the combobox country with respective country image, here the binding of two items. You can easily do this using XAML tools with the DataTemplate Concept.

I will do that above example step-by-step.

In the preceding sample, I am binding a list of countries in a Combobox with respective country images. For that I am using an Entity class for store country information with respective Country picture.

public class Entity
    {
        public string country { get; set; }
        public string Image { get; set; }
    public static ObservableCollection<Entity> ListOfCountry()
    {
        string ImageUrl = AppDomain.CurrentDomain.BaseDirectory + "Images\\Countries\\";

        ObservableCollection<Entity> country = new ObservableCollection<Entity>()
        {

              new Entity{ country="Afghanistan", Image=ImageUrl+"AF.png"},
              new Entity{ country="Albania" ,Image=ImageUrl+"AL.png" },
              new Entity{ country="Algeria" ,Image=ImageUrl+"DZ.png" },
              new Entity{ country="American Samoa" ,Image=ImageUrl+"AS.png" },
              new Entity{ country="Andorra" ,Image=ImageUrl+"AD.png" },
              new Entity{ country="Angola" ,Image=ImageUrl+"AO.png" },
              new Entity{ country="Anguilla" ,Image=ImageUrl+"AI.png"},
              new Entity{ country="Antarctica" ,Image=ImageUrl+"AQ.png"},
              new Entity{ country="Argentina" ,Image=ImageUrl+"AR.png" },
              new Entity{ country="Belgium" ,Image=ImageUrl+"BE.png" },
              new Entity{ country="Belize" ,Image=ImageUrl+"BZ.png" },
              new Entity{ country="Benin" ,Image=ImageUrl+"BJ.png" },
              new Entity{ country="Bermuda" ,Image=ImageUrl+"BM.png"},
              new Entity{ country="Bhutan" ,Image=ImageUrl+"BT.png" },
              new Entity{ country="Bolivia" ,Image=ImageUrl+"BO.png"},
              new Entity{ country="Botswana" ,Image=ImageUrl+"BW.png" },
              new Entity{ country="Brazil" ,Image=ImageUrl+"BR.png"  },
              new Entity{ country="Hong Kong" ,Image=ImageUrl+"HK.png" },
              new Entity{ country="Hungary" ,Image=ImageUrl+"HU.png" },
              new Entity{ country="Iceland" ,Image=ImageUrl+"IS.png" },
              new Entity{ country="India" ,Image=ImageUrl+"IN.png" },
              new Entity{ country="Indonesia" ,Image=ImageUrl+"ID.png"},
              new Entity{ country="Iran" ,Image=ImageUrl+"IR.png" },
              new Entity{ country="Iraq" ,Image=ImageUrl+"IQ.png" },
              new Entity{ country="Ireland" ,Image=ImageUrl+"IE.png"},
              new Entity{ country="Israel" ,Image=ImageUrl+"IL.png" },
              new Entity{ country="Italy" ,Image=ImageUrl+"IT.png" }
        };
        return country;
    }

In the page load event I am loading country data because it’s a small sample. That’s why I did not create a separate view model but in the code behind I define one collection, the ListOfCountry list. This will store all country information with respective images. Here is also the assigning of the datacontext for the view, like this:
 

public partial class MainWindow : Window
   {
       public MainWindow()
       {
           InitializeComponent();
           _CountryEntity = Entity.ListOfCountry();
           this.DataContext = this;
       }
       public ObservableCollection<Entity> _CountryEntity;
       public ObservableCollection<Entity> ListofCountry
       {
           get
           {
               return _CountryEntity;
           }
           set
           {
               _CountryEntity = value;

           }
       }
   }

 

In the view I define one simple XAML control.

 

<ComboBox Name="CountryCombo"
    ItemsSource="{Binding ListofCountry}"  Margin="42,13.895,55,29" Grid.Row="1" >
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Width="20" Height="20" Margin="5" Source="{Binding Image}"/>
                        <TextBlock Margin="5" Text="{Binding country}"/>
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

In the preceding I am binding a combobox. For that define an ItemSource, this ‘ll indicate the source of the data or this will indicate the data link for the respective control.

Then by defining the items template the visual structure of the Combobox data is defined. Since our target shows the image with country name, for that I use one stack panel
 and I set the orientation to horizontal. In an inside stack panel I use an image first then textblock for display the Country name horizontally .

DataTemplate Sample In XAML(Windows 8, Silverlight, WPF and Windows Phone) 

After the preceding small sample I will show some more demos here. My idea is to cover the datatemplate concept end to end in XAML. For that the following shows 

a demo on Windows 8, Silverlight, Windows Phone and WPF. My input wil be the same for every demo.

In the screen above I show a data template as C# Corner Top Member. For this I am using the MVVM model for storing member data and view-model for fetching the data from the model but I did not create an extra model and view Model class. For this, because here I want to focus only on the data template.

I place both logic, the Model and View - Model classes here only in the code behind and load event load my model data.

public class Authors
    {
        public string Name { get; set; }

        public string Point { get; set; }

        public string Country { get; set; }

        public string Image { get; set; }

        public string Ranks { get; set; }
        public static ObservableCollection<Authors> GetAuthorsRecord()
        {
            ObservableCollection<Authors> AuthorsRecords = new ObservableCollection<Authors>
           {
               new Authors{Point="40960",Name="Mahesh Chand",Country="Philadelphia, United States",Image="Image/mahesh.png",Ranks="1"},
               new Authors{Point="18063",Name="Vulpes",Country="United Kingdom",Image="Image/b942f9.gif",Ranks="2"},
               new Authors{Point="12215",Name="Dinesh Beniwal",Country="India",Image="Image/dbeniwal321.jpg",Ranks="3"},
               new Authors{Point="11372",Name="Rohatash Kumar",Country="India",Image="Image/rohatash.jpg",Ranks="4"},
               new Authors{Point="11088",Name="Dhananjay Kumar",Country="India",Image="Image/dhananjaycoder.png",Ranks="5"},
               new Authors{Point="10964",Name="Satyapriya Nayak",Country="Bhubaneswar, India",Image="Image/satyapriyanayak.jpg",Ranks="6"},
               new Authors{Point="10850",Name="Vijai Anand",Country="New Jersey, United States",Image="Image/anavijai.png",Ranks="7"},
               new Authors{Point="10391",Name="Abhimanyu K Vatsa",Country="Bokaro Steel City, India",Image="Image/abhikumarvatsa.jpg",Ranks="8"},
               new Authors{Point="8761",Name="Sam Hobbs",Country="Granada Hills, United States",Image="Image/SamTomato.jpg",Ranks="9"},
               new Authors{Point="8512",Name="Suthish Nair",Country="India",Image="Image/suthish_nair.jpg",Ranks="10"},

           };
            return AuthorsRecords;
        }
    }

In this list I am storing above data and binding this data on view as ItemSource.
public ObservableCollection<Authors> _Authorsr;
        public ObservableCollection<Authors> ListofAuthors
        {
            get
            {
                return _Authors;
            }
            set
            {
                _Authors = value;

            }
        }

View

<ListBox.ItemTemplate>
              <DataTemplate>
                  <StackPanel Orientation="Horizontal">
                      <Grid Margin="0,5,0,0">
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="auto"></ColumnDefinition>
                              <ColumnDefinition></ColumnDefinition>
                          </Grid.ColumnDefinitions>
                          <Image Source="{Binding Image}" Height="80" Width="80" Grid.Column="0"></Image>
                          <StackPanel Grid.Column="1" Orientation="Vertical" Width="150" Height="100" >
                              <TextBlock Text="{Binding Name}" Margin="5,1,0,1"></TextBlock>
                              <TextBlock Text="{Binding Country}" Margin="5,1,0,1"></TextBlock>
                              <StackPanel Orientation="Horizontal">
                                  <TextBlock Text="Ranks #" Margin="5,1,0,1"></TextBlock>
                                  <TextBlock Text="{Binding Ranks}" Margin="3,1,0,1"></TextBlock>
                              </StackPanel>
                              <StackPanel Orientation="Horizontal">
                                  <TextBlock Text="Point" Margin="5,1,0,1"></TextBlock>
                                  <TextBlock Text="{Binding Point}" Margin="3,1,0,1"></TextBlock>
                              </StackPanel>
                          </StackPanel>

                      </Grid>

                  </StackPanel>


              </DataTemplate>
          </ListBox.ItemTemplate>
      </ListBox  >

This common code I am using for every demo on all platforms. I am using the same code everywhere in all four platforms, Windows 8, Silverlight, WPF and Windows Phone. Just a small change I do based on platform and display. Later I will demonstrate the Portable Class Library (PCL) With MVVM in the next article and I‘ll explore more of the Silverlight Demo Application . I made a small change for the Silverlight demo. Here I used the Silverlight toolkit for WrapPanel on the View because WrapPanel is not available by default.

WPF DataTemplate Demo  

Here also I changed one property, I set the Listbox scroll to Horizontal Property disabled.

Windows Phone DataTemplate  

Nothing I changed for the Windows Phone Sample, the same as for Windows 8 Code I copied and pasted here. 

In the following image I show my source code structure . Here five executable projects and two class libraryies. Everything follows the MVVM Concept.

The minimum requirement for this project is Visual Studio 2012 and Windows Phone 8 SDK.