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

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.