Data Binding To GridView And ListView Controls In UWP

In this article you will learn how to bind data to GridView and ListView controls in UWP,

  1. Open Visual Studio and click New Project.

    Then go to Templates, Universals, then Bank App(Universal Windows).

    Then New Project Name(Binding)

    Class library

  2. Right click the Binding (Universal App) in Solution Explorer, select Add, and then click Class.

    Add class

  3. Here's class Car.cs and replace the template code with the following code,
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Text;  
    5. using System.Threading.Tasks;  
    6. namespace Binding  
    7. {  
    8.     public class Car  
    9.     {  
    10.         public int CarId  
    11.         {  
    12.             get;  
    13.             set;  
    14.         }  
    15.         public string Category  
    16.         {  
    17.             get;  
    18.             set;  
    19.         }  
    20.         public string Model  
    21.         {  
    22.             get;  
    23.             set;  
    24.         }  
    25.         public string Image  
    26.         {  
    27.             get;  
    28.             set;  
    29.         }  
    30.     }  
    31.     public class CarManager  
    32.     {  
    33.         public static List < Car > GetCars()  
    34.         {  
    35.             var cars = new List < Car > ();  
    36.             cars.Add(new Car  
    37.             {  
    38.                 Category = "Honda", Model = "2014", Image = "Assets/Honda.png"  
    39.             });  
    40.             cars.Add(new Car  
    41.             {  
    42.                 Category = "City", Model = "2008", Image = "Assets/City.png"  
    43.             });  
    44.             cars.Add(new Car  
    45.             {  
    46.                 Category = "Ferrari", Model = "2010", Image = "Assets/Ferrari.png"  
    47.             });  
    48.             cars.Add(new Car  
    49.             {  
    50.                 Category = "Toyota", Model = "2011", Image = "Assets/Toyota.png"  
    51.             });  
    52.             cars.Add(new Car  
    53.             {  
    54.                 Category = "Mehran", Model = "2009", Image = "Assets/Mehran.png"  
    55.             });  
    56.             return cars;  
    57.         }  
    58.     }  
    59. }  
  4. Now to place Images of Cars in the Assets Folder. Drag the Images from Computer Directory and drop in Assets folder.

  5. Double click the MainPage.xaml in Solution Explorer and replace the template code with the following code.
    1. <Page x:Class="Binding.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Binding" xmlns:data="using:Binding" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
    2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
    3.         <Grid.RowDefinitions>  
    4.             <RowDefinition Height="*" />  
    5.             <RowDefinition Height="100" /> </Grid.RowDefinitions>  
    6.         <GridView ItemsSource="{x:Bind cars}" IsItemClickEnabled="True" ItemClick="GridView_ItemClick">  
    7.             <GridView.ItemTemplate>  
    8.                 <DataTemplate x:DataType="data:Car">  
    9.                     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">  
    10.                         <Image Width="150" Source="{x:Bind Image }" HorizontalAlignment="Center"></Image>  
    11.                         <StackPanel Margin="20,20,0,0">  
    12.                             <TextBlock FontSize="18" Text="{x:Bind Category}" HorizontalAlignment="Right"></TextBlock>  
    13.                             <TextBlock FontSize="10" Text="{x:Bind Model }" HorizontalAlignment="Right"></TextBlock>  
    14.                         </StackPanel>  
    15.                     </StackPanel>  
    16.                 </DataTemplate>  
    17.             </GridView.ItemTemplate>  
    18.         </GridView>  
    19.         <TextBlock Grid.Row="1" Name="ResultTextBlock" FontSize="24" Foreground="Red" FontWeight="Bold" /> </Grid>  
    20. </Page>  
  6. Double click the MainPage.xaml.cs in Solution Explorer and replace the template code with the following code.
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.IO;  
    4. using System.Linq;  
    5. using System.Runtime.InteropServices.WindowsRuntime;  
    6. using Windows.Foundation;  
    7. using Windows.Foundation.Collections;  
    8. using Windows.UI.Xaml;  
    9. using Windows.UI.Xaml.Controls;  
    10. using Windows.UI.Xaml.Controls.Primitives;  
    11. using Windows.UI.Xaml.Data;  
    12. using Windows.UI.Xaml.Input;  
    13. using Windows.UI.Xaml.Media;  
    14. using Windows.UI.Xaml.Navigation;  
    15. // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  
    16. namespace Binding  
    17. {  
    18.     /// <summary>  
    19.     /// An empty page that can be used on its own or navigated to within a Frame.  
    20.     /// </summary>  
    21.     public sealed partial class MainPage: Page  
    22.     {  
    23.         private List < Car > cars;  
    24.         public MainPage()  
    25.         {  
    26.             this.InitializeComponent();  
    27.             cars = CarManager.GetCars();  
    28.         }  
    29.         private void GridView_ItemClick(object sender, ItemClickEventArgs e)  
    30.         {  
    31.             var cars = (Car) e.ClickedItem;  
    32.             ResultTextBlock.Text = "You Selected--->>" + cars.Category + "--->>Model_ " + cars.Model;  
    33.         }  
    34.     }  
    35. }  
  7. Press CTRL+F5 to run the project. (If you get a "Cannot create Shadow Copy" error, close the browser and try again.)

    Run

Data Binding

Data binding is the process that establishes a connection between the application UI and business logic. If the binding has the correct settings and the data provides the proper notifications, then when the data changes its value, the elements that are bound to the data reflect changes automatically. Data binding can also mean that if an outer representation of the data in an element changes, then the underlying data can be automatically updated to reflect the change.

For example, if the user edits the value in a TextBox element, the underlying data value is automatically updated to reflect that change.

Please leave feedback on how you liked this tutorial and what I can improve.


Similar Articles