Binding Data Items to a Data Control in Windows Store App

Introduction

In this article we have to show display data in Metro Application controls. In Metro, applications are full screen applications and for them we have to bind data, the data may be small or a collection of values. We have to bind data with a ListBox, ListView and TextBox in my previous articles. But in this article I will explain how to bind multiple controls to bind a collection of items into a data control.

Here, we have to show an example to bind the data in data controls.

Binding a Collection of Items in Dropdown list

In this section we will see how to bind a collection of items into a control. We will bind data in a dropdown list.

Step 1 : First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.

• Open Visual Studio 2011

• File->New Project

• Select Metro Style Application in C# language

• Click OK

Step 2 : In the Solution Explorer we have to make changes in the Mainpage.XAML and MainPage.XAML.cs file and open this file.

Step 3: We have to make some changes in this file given below.

Code : MainPage.XAMl

<UserControl x:Class="Application15.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="YellowGreen">
        <ComboBox x:Name="cboBikes" Background="SaddleBrown" ItemsSource="{Binding}"
                  Foreground="DarkOrchid" FontSize="25" Height="Auto" Margin="283,225,527,495" />       
    </Grid>
  </UserControl>

Step 4 : MainPage.XAMl.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;

namespace Application15
{
    partial class MainPage
    {
        public List<Bike> Bikes = new List<Bike>();
        public MainPage()
        {
            InitializeComponent();
                       //set the data context.items to the colection.
            Bikes.Add(new Bike("TVS Motor", "Apache 180 RTR Menace", "800000"));
            Bikes.Add(new Bike("Honda", "CBR 250R", "700000"));
            Bikes.Add(new Bike("Suzuki", "Hayabusa 1300", "600000"));
            Bikes.Add(new Bike("Yamaha Motor", "FZ 16", "900000"));
            // set the data context for the combo box.
            cboBikes.DataContext = Bikes;
        }

         //a business object of a car
        public class Bike
        {
            public Bike() { }
            public Bike(string BrandName, string ModelName, string MarketPrice)
            {
                Brand = BrandName;
                Model = ModelName;
                Price = MarketPrice;
            }
            public string Brand { get; set; }
            public string Model { get; set; }
            public string Price { get; set; }
            //Overriding the ToString method
            public override string ToString()
            {
                return ""+ Brand +"-" + Model + ",at price:"+ Price;
            }
        }
    }
}

Step 5 : After running this application we will find the given output.

 

We will then see the data items; select one.

After selecting an item the item shown will look like:

Binding Data in Data Template

In this section bind the data with a dropdown ListBox using a data template. A dropdown list box is an ItemControl.

MainPage.XAML : In this we have to take an ItemTemplate and ItemControl.

Code : The code is as given below.

<UserControl x:Class="Application15.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">
    <Grid x:Name="LayoutRoot" Background="PowderBlue">
        <ComboBox x:Name="cboBikes" Background="Brown" ItemsSource="{Binding}"
                  Foreground="Black" FontSize="25" Height="Auto" Margin="283,225,527,495" >
        <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Margin="2">
                        <TextBlock Text="{Binding Brand}" Margin="2" />
                        <TextBlock Text="-" Margin="2" />
                        <TextBlock Text="{Binding Model}" Margin="10,2,0,2" />
                        <TextBlock Text=", at Price:" Margin="2" />
                        <TextBlock Text="{Binding Price}" Margin="10,2,0,2" />
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>   
</UserControl>

MainPage.XAMl.cs : The page also has some changes which are as given below.

Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;

namespace Application15
{
    partial class MainPage
    {
        public List<Bike> Bikes = new List<Bike>();
        public MainPage()
        {
            InitializeComponent();
            //set the data context.items to the colection.
            Bikes.Add(new Bike("TVS Motor", "Apache 180 RTR Menace", "800000"));
            Bikes.Add(new Bike("Honda", "CBR 250R", "700000"));
            Bikes.Add(new Bike("Suzuki", "Hayabusa 1300", "600000"));
            Bikes.Add(new Bike("Yamaha Motor", "FZ 16", "900000"));
            // set the data context for the combo box.
            cboBikes.DataContext = Bikes;
        }
        //a business object of a Bike
        public class Bike
        {
            public Bike() { }
            public Bike(string BrandName, string ModelName, string MarketPrice)
            {
                Brand = BrandName;
                Model = ModelName;
                Price = MarketPrice;
            }
            public string Brand { get; set; }
            public string Model { get; set; }
            public string Price { get; set; }          
            }
        }
    }

Output :

After selecting a data item we see: