Congratulations - C# Corner Q4, 2022 MVPs Announced
Why Join
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
TECHNOLOGIES
ANSWERS
LEARN
NEWS
BLOGS
VIDEOS
INTERVIEW PREP
BOOKS
EVENTS
Training
Live
JOBS
MORE
CAREER
MEMBERS
Windows 10: New Data Binding Technique
Sourabh Soni
Jul 28, 2016
3.6
k
0
2
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
This blog will explain new a binding style in Windows 10 app.
bin.rar
Here are the steps,
Open a blank app and add a GridView.
<
Grid
Background
=
"{ThemeResource ApplicationPageBackgroundThemeBrush}"
>
<
GridView
Name
=
"gridPlayers"
>
</
GridView
>
</
Grid
>
Create a folder inside assets folder, name it as "Images".
Add some images inside it.
Create Models folder.
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
;
}
}
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>();
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"
});
At MainPage.xaml, define ItemsSource for your GridView, as shown below:
<
GridView
Name
=
"gridPlayers"
ItemsSource
=
"{x:Bind Players}"
Margin
=
"20,20,0,0"
>
Define DataTemplate for your GridView.
xmlns:data
=
"using:UWPBindingApp.Models"
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
>
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"
>
Now, run the Application.
Download
Source Code
.
Windows 10
Data Binding Technique
Next Recommended Reading
Enable Windows Photo Viewer On Windows 10