Want to become a Vibe Coder? Join Vibe Coding Training here
x
C# Corner
Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Windows 10: New Data Binding Technique
WhatsApp
Sourabh Soni
8y
4.4
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
People also reading
Membership not found