Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Windows 10: New Data Binding Technique
WhatsApp
Sourabh Soni
8y
4.3
k
0
2
25
Blog
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
.
Data Binding Technique
Windows 10
Up Next
Enable Windows Photo Viewer On Windows 10
Ebook Download
View all
Printing in C# Made Easy
Read by 22.3k people
Download Now!
Learn
View all
Membership not found