Blend for Visual Studio: Data Binding to GridView Controls
Data Binding
Data Binding is the process of taking some data and associating it to visual elements on user interface(UI).
Overview of Data Binding
we will take any object and with their properties and present each instance of object in collection on screen to user in “Grid “like fashion. We get to create a little template of how each individual instance of object is represented in the user interface .The “ListView” is also same but it works in single column fashion
Create the Project in Visual Studio 2015
In order to perform data binding , you need to create a project in your visual studio 2015 , steps are simple.
- Select “Universal” as shown by arrow.
- Select “Blank App” as shown in circle.
- Name your solution , for instance “BindDataExample“.
https://zainnisar237.files.wordpress.com/2015/11/13.png?w=700
Designer Window
A designer window will be open once you create the project with name”MainPage.xaml“, in this window there is a designer surface and you can also write your XAML code …now for instance we select our object a “Book” and in order to perform data binding simple create a user interface in XAML , code is shown in image in rectangle.
https://zainnisar237.files.wordpress.com/2015/11/21.png?w=700
Create Data Model
- Go to “Solution Explorer”, shown by circle.
- Right click the “BindDataExample”, shown by arrow.
- Add new folder, name it “Models” , shown by circle.
https://zainnisar237.files.wordpress.com/2015/11/33.png?w=700
Create C# class in Models Folder
- Go to Models folder.
- Right click and select add new item.
- Select Class , name it “Book.cs“.
https://zainnisar237.files.wordpress.com/2015/11/41.png?w=700
Book Class with Properties
Once you perform all the above mentioned tasks , there will be a c# class open for us and our object which in this case is a book , we can create its class and define its properties in that very C# class we have .
- Create a class “Book“.
- Define its properties.
- copy the C# code in red rectangular box.
https://zainnisar237.files.wordpress.com/2015/11/112.png?w=700
Creating New Instances & Add in Collection
After you created your Book class and set its properties , now its time to create instances of your class and populate it into a collection, list of book, we will generate another class , name as “BookManager” in same file , for this purpose. And then return the list to caller.Code will help you out.
https://zainnisar237.files.wordpress.com/2015/11/121.png?w=700
Add Grid View, Bind to data from BookManager Class
our next step after we create the instances and store them in collection is to bind the data in Grid view from that very class , for this we will return to our “MainPage.xaml” and create their a template that how each individual item will appear on the screen.The template code is in red box.
https://zainnisar237.files.wordpress.com/2015/11/113.png?w=700
Add XAML namespace
In order to reference the class in XAML , we need to reference its namespace in XAML…here you go, shown by red arrow.
https://zainnisar237.files.wordpress.com/2015/11/72.png?w=700
Create Public Property in MainPage.xaml.cs
after we create the template , our next step will be create a public property in “mainpage.xaml.cs “and populate it with Books.
- Add public property , as shown in circular region.
- Make sure you add a namespace if it is not there, as shown by arrow.
- Initialize it with “Books=***BookManager.GetBooks();.”, ***this will return list of books.
https://zainnisar237.files.wordpress.com/2015/11/91.png?w=700
Run your Application .
After completion of all steps , run you application and the final result will be shown something like this.
https://zainnisar237.files.wordpress.com/2015/11/132.png?w=700
Working on Alignment
you can change the alignment and margin again , here is the simple step to do.
https://zainnisar237.files.wordpress.com/2015/11/14.png?w=700
Overview
In nutshell , the alignment will make display much better .
https://zainnisar237.files.wordpress.com/2015/11/15.png?w=700
