Windows 10: New Data Binding Technique

This blog will explain new a binding style in Windows 10 app.

Here are the steps,

1. Open a blank app and add a GridView.
   

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <GridView Name="gridPlayers"> </GridView>
   </Grid>

2. Create a folder inside assets folder, name it as "Images". 
   
3. Add some images inside it.
   
4. Create Models folder.
   
5. Create Model class as "Player" in Models folder.
   

   public class Player
   {
       public string Name {
           get;
           set;
       }
       public int Age {
           get;
           set;
       }
       public string ImageUrl {
           get;
           set;
       }
   }

6. Create ObservableCollection of Player class in the code, at the backend of MainPage.xaml.cs
   

   using UWPBindingApp.Models;
   private ObservableCollection<Player> Players = new ObservableCollection<Player>();

7. At Page_Loaded event, write the code to fill the data in your observable collection.
   

   Players.Add(new Models.Player() { Name = "Ajinkya Rahane", Age = 32, ImageUrl = "/Assets/Images/ajinkya-rahane.png" });
   Players.Add(new Models.Player() { Name = "Virat Kohli", Age = 31, ImageUrl = "/Assets/Images/virat-kohli.png" });
   Players.Add(new Models.Player() { Name = "Rohit Sharma", Age = 30, ImageUrl = "/Assets/Images/rohit-sharma.png" });
   Players.Add(new Models.Player() { Name = "Suresh Raina", Age = 29, ImageUrl = "/Assets/Images/suresh-raina.png" });
   Players.Add(new Models.Player() { Name = "Yuvraj Singh", Age = 34, ImageUrl = "/Assets/Images/yuvraj-singh.png" });
   Players.Add(new Models.Player() { Name = "MS Dhoni", Age = 34, ImageUrl = "/Assets/Images/ms-dhoni.png" });
   Players.Add(new Models.Player() { Name = "Ravindra Jadeja", Age = 29, ImageUrl = "/Assets/Images/ravindra-jadeja.png" });
   Players.Add(new Models.Player() { Name = "Ashish Nehra", Age = 32, ImageUrl = "/Assets/Images/ashish-nehra.png" });
   Players.Add(new Models.Player() { Name = "B Kumar", Age = 32, ImageUrl = "/Assets/Images/bhuvneshwar-kumar.png" });
   Players.Add(new Models.Player() { Name = "Amit Mishra", Age = 30, ImageUrl = "/Assets/Images/amit-mishra.png" });
   Players.Add(new Models.Player() { Name = "R Ashwin", Age = 28, ImageUrl = "/Assets/Images/ravichandran-ashwin.png" });

8. At MainPage.xaml, define ItemsSource for your GridView, as shown below:
   

   <GridView Name="gridPlayers" ItemsSource="{x:Bind Players}" Margin="20,20,0,0" >

9. Define DataTemplate for your GridView.
   

   xmlns:data="using:UWPBindingApp.Models"

10. Inside DataTemplate, we need to define x:DataType to tell the compiler about which type of dataModel we are going to use to bind our DataTemplate.
    

    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid Width="350" Margin="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>
                <Image Height="100" Width="100" Source="{x:Bind ImageUrl}" />
                <StackPanel Grid.Column="1">
                    <TextBlock Text="{x:Bind Name}" FontSize="16" />
                    <TextBlock FontSize="12">
                        <Run Text="Age: " />
                        <Run Text="{x:Bind Age}" /> </TextBlock>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>

11. We have to bind Text and Image source property to the respective property of Model class, using x:Bind as below.
    

    <DataTemplate x:DataType="data:Player">

12. Now, run the Application.
    
    
    

Download Source Code.