Image Binding In GridView and ListView In Windows Store App Using C#

Introduction 

In this article I will explain how to bind data and images in a GridView and a ListView; to do so use the following steps.

Step 1

First open Visual Studio 2012 RC and click on the File -> New -> Project. A window appears. In this select Windows Store from the Visual C# left pane and the blank page from the center pane. Then give the name of the project and click ok.

Select-Windows-8-apps.jpg

Step 2

Now In the MainPage.xaml file write the code as:

<Page

    x:Class="SemanticZoom.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:SemanticZoom"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid>

        <Grid.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black"/>

                <GradientStop Color="#FF83B4F0" Offset="1"/>

            </LinearGradientBrush>

        </Grid.Background>

        <TextBlock Name="content" Text="Latest Laptops Information" Height="50" Width="350" FontSize="25"HorizontalAlignment="Center" VerticalAlignment="Top"/>

        <TextBlock Text="Select any option from the list :" FontSize="15" Margin="50,130,0,0"/>

        <ListBox Name="list1" Height="111" Width="304" FontSize="20"SelectionChanged="list1_SelectionChanged" HorizontalAlignment="Left" VerticalAlignment="Top"Margin="50,150,0,0">

            <x:String >Select GridView</x:String>

            <x:String>Select listView</x:String>

        </ListBox>

    </Grid>

</Page>

 

Step 3

Add some images in your project to bind the images.

 

Step 4

Add Two more blank pages by right-clicking on the project then click Add -> New Item as:

Add-Blank-Page-In-Windows-8-Apps.jpg

 

Step 5

A window appears. In this select BlankPage and give the name for the page as you prefer. I didn't change the name and simply left the name as BlankPage1.xaml; see:

Select-BlankPage-In-Windows-8-Apps.jpg

 

Step 6

Now add the code in the MainPage.xaml.cs file as:

public sealed partial class MainPage : Page

{

   public MainPage()

   {

      this.InitializeComponent();

   }      

   private void list1_SelectionChanged(object sender, SelectionChangedEventArgs e)

   {

      if (list1.SelectedIndex == 0)

      {

         this.Frame.Navigate(typeof(BlankPage1));

      }

      else

      {

         this.Frame.Navigate(typeof(BlankPage2));

      }

   }

}

Step 7

Add a class by right-clicking on the project in the Solution Explorer and then click Add -> Class. Give the name of the class that you want to give. Now write the code in this class as:

public string Image_Name { getset; }

public string Image { getset; }

public string Description { getset; }

Step 8

Add the code in the BlankPage1.xaml file as,

<Page

    x:Class="SemanticZoom.BlankPage1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:SemanticZoom"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock Name="content" Text="Latest Laptops Information" Height="50" Width="350" FontSize="25"HorizontalAlignment="Center" VerticalAlignment="Top"/>

        <GridView Name="display" ItemsSource="{Binding}" Foreground="#FFE6D52E" Margin="40,111,56,143" >

            <GridView.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black"/>

                    <GradientStop Color="#FF1A59E2" Offset="1"/>

                </LinearGradientBrush>

            </GridView.Background>

            <GridView.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Vertical">

                        <StackPanel.Background>

                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="Black"/>

                                <GradientStop Color="#FF443585" Offset="1"/>

                            </LinearGradientBrush>

                        </StackPanel.Background>

                        <TextBlock Text="{Binding Image_Name}" FontSize="25" Padding="10"/>

                        <Image Source="{Binding  Path=Image}" Height="100" Width="250"/>

                        <TextBlock Text="{Binding Description}" FontSize="15"/>

                    </StackPanel>

                </DataTemplate>

            </GridView.ItemTemplate>

        </GridView>

        <Button Name="homepage" Height="53" Width="115" Content="BACK" Click="homepage_Click"HorizontalAlignment="Center" Margin="622,685,629,30"/>

    </Grid>

</Page>
 
Step 9

Add the code in BlankPage.xaml.cs file as:

public sealed partial class BlankPage1 : Page

{

        public BlankPage1()

        {

            this.InitializeComponent();

            List<Semantic> list = new List<Semantic>()

            {

                new Semantic{Image_Name="DellInspiran15",Image= "DellInspiran15.jpg", Description="439 - 450 - Dell Inspiron 13 laptop"},

                new Semantic{Image_Name="DellInspiran25", Image="DellInspiran25.jpg", Description="295 -295 - dell laptop inspiron 1410"},

                new Semantic{Image_Name="DellLaptop24" ,Image="DellLaptop24.jpg", Description="475-361 - NEW DELL 3RD"},

                new Semantic{Image_Name="DellStudioNotebook" ,Image="DellStudioNotebook.jpg", Description="544-405 - Laptop Models"},

                new Semantic{Image_Name="DellVostro3500" ,Image="DellVostro3500.jpg", Description="500-386 - Dell Vostro 3500"},

                new Semantic{Image_Name="DellXPS17Price" ,Image="DellXPS17Price.jpg", Description="400-299 -Dell laptop "},

                new Semantic{Image_Name="DellLatestLaptop2011" ,Image="DellLatestLaptop2011.jpg", Description="520-348 - types of laptops models"},

                new Semantic{Image_Name="DellStudio17TouchScreen" ,Image="DellStudio17TouchScreen.jpg", Description="500-415 - Dell Studio 17 Touchscreen "},

                new Semantic{Image_Name="DigitalClutchLaptop" ,Image="DigitalClutchLaptop.jpg", Description="800-680 - various laptop "},

            };

            display.DataContext = list;

        }

        private void homepage_Click(object sender, RoutedEventArgs e)

        {

            this.Frame.Navigate(typeof(MainPage));

        }

}

Step 10

Add the code in the BlankPage2.xaml as:

<Page

    x:Class="SemanticZoom.BlankPage2"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:SemanticZoom"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock Name="content" Text="Latest Laptops Information" Height="50" Width="350" FontSize="25"HorizontalAlignment="Center" VerticalAlignment="Top"/>

        <ListView Name="display" ItemsSource="{Binding}" Foreground="#FFE6D52E" Margin="40,111,50,140" >

            <ListView.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black"/>

                    <GradientStop Color="#FF1A59E2" Offset="1"/>

                </LinearGradientBrush>

            </ListView.Background>

            <ListView.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Vertical">

                        <StackPanel.Background>

                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="Black"/>

                                <GradientStop Color="#FF443585" Offset="1"/>

                            </LinearGradientBrush>

                        </StackPanel.Background>

                        <TextBlock Text="{Binding Image_Name}" FontSize="25" Padding="10"/>

                        <Image Source="{Binding  Path=Image}" Height="100" Width="250"/>

                        <TextBlock Text="{Binding Description}" FontSize="15"/>

                    </StackPanel>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

        <Button Name="homepage" Height="53" Width="115" Content="BACK" Click="homepage_Click"HorizontalAlignment="Center" Margin="622,685,629,30"/>

    </Grid>

</Page>

Step 11

Add the code in the BlankPage2.xaml.cs file as:

public sealed partial class BlankPage2 : Page

    {

        public BlankPage2()

        {

            this.InitializeComponent();

            List<Semantic> list = new List<Semantic>()

            {

                new Semantic{Image_Name="DellInspiran15",Image= "DellInspiran15.jpg", Description="439-450 - Dell Inspiron 13 laptop"},

                new Semantic{Image_Name="DellInspiran25", Image="DellInspiran25.jpg", Description="295-295 - dell laptop inspiron 1410"},

                new Semantic{Image_Name="DellLaptop24" ,Image="DellLaptop24.jpg", Description="475-361 - NEW DELL 3RD"},

                new Semantic{Image_Name="DellStudioNotebook" ,Image="DellStudioNotebook.jpg", Description="544-405 - Laptop Models"},

                new Semantic{Image_Name="DellVostro3500" ,Image="DellVostro3500.jpg", Description="500-386 - Dell Vostro 3500"},

                new Semantic{Image_Name="DellXPS17Price" ,Image="DellXPS17Price.jpg", Description="400-299 -Dell laptop "},

                new Semantic{Image_Name="DellLatestLaptop2011" ,Image="DellLatestLaptop2011.jpg", Description="520-348 - types of laptops models"},

                new Semantic{Image_Name="DellStudio17TouchScreen" ,Image="DellStudio17TouchScreen.jpg", Description="500- 415 - Dell Studio 17 Touchscreen "},

                new Semantic{Image_Name="DigitalClutchLaptop" ,Image="DigitalClutchLaptop.jpg", Description="800-680 - various laptop "},

            };

            display.DataContext = list;

        }

        private void homepage_Click(object sender, RoutedEventArgs e)

        {

            this.Frame.Navigate(typeof(MainPage));

        }

   }

Step 12

Now run the application by pressing F5. The first screen that you see in your output looks like:

Output-In-Windows-8-Apps.jpg

When we select the first option (that is select GridView) the output looks like:

Binding-Images-In-GridView-In-Windows-8-Apps.jpg

Then when go back and select the second option (that is select ListView) the output and image binding in the ListView looks like:

Image-Binding-In-ListView-Uisng-Windows-8-Apps.jpg 

Summary

In this article I will explain how to Bind the Images in the ListView and the GridView.


Similar Articles