Binding a Collection of Items to a Control in a Metro Style App

Introduction

In this article we are going to explore how to work with collections of items to bind them into a control in a Metro Style App. Further in this we will discuss all the details of how it is possible to bind them. In this article first of all we will take a generic list in which we will add items information. Further we will create some properties about these items such as Name, Model Name and Price; whatever you want to give you can easily do using properties. Further In this section we will see how to bind a collection of business objects to a data control. We will bind data with a Dropdown list. First, we will create an object called Cars of List<> collection type, which is a strongly typed list. Then we will add class objects to this list collection and finally we will bind the object Cars to a Dropdown list with the help of DataContext. If you want to implement this type of functionality in a Metro Style App then you should follow the steps which is given below. Now let's start to work with these controls; see the steps.

Step 1: In this step you will see how to start working with a Metro Style App; let's see the steps, given below:

• Go to Visual Studio 2011
• New->Project->Metro Style App
• Select an application and give it a name as you want to give
• Click OK.

Step 2: In this step we will see a class in which we have defined some properties which is given below.

Code:
      
public class MyCar
{
   public MyCar() { }
   public MyCar(string Br_Name, string M_Name, string Mkt_Price)
   {
      C_Brand = Br_Name;
      C_Model = M_Name;
      C_Price = Mkt_Price;
   }
   public string C_Brand { get; set; }
   public string C_Model { get; set; }
   public string C_Price { get; set; }
   // Overriding the ToString method
   public override string ToString()
   {
      return "The Brand New " + C_Brand + " - " + C_Model + ", at price: " + C_Price;
   }
}

Step 3: In this step we will see the code for the MainPage.xaml file which is shown below.

Code:

<UserControl x:Class="Myapp.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">

        <Grid.Background>

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

                <GradientStop Color="Black"/>

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

            </LinearGradientBrush>

        </Grid.Background>

        <ComboBox x:Name="cboCars" ItemsSource="{Binding}"

        Foreground="#FFD3001D" FontSize="30" Height="50" Width="780">

            <ComboBox.Background>

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

                    <GradientStop Color="Black"/>

                    <GradientStop Color="#FF227DBB" Offset="0.182"/>

                </LinearGradientBrush>

            </ComboBox.Background>

        </ComboBox>

    </Grid> 

</UserControl>

Step 4: In this step we will see the code for the MainPage.xaml.cs file which is shown 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 Myapp

{

    partial class MainPage

    {

        public List<MyCar> Cars = new List<MyCar>();

        public MainPage()

        {

            InitializeComponent();

            // Add items to the collection.

            Cars.Add(new MyCar("Ferrari", "F1", "$222000"));

            Cars.Add(new MyCar("Tata", "Safari", "630000"));

            Cars.Add(new MyCar("Hyundai", "Santro", "422000"));

            Cars.Add(new MyCar("Tata", "Nano", "122000"));

            Cars.Add(new MyCar("Toyota", "Fortuner", "2322000"));

            Cars.Add(new MyCar("Honda", "SX4", "622000"));

            // Set the data context for the combo box.

            cboCars.DataContext = Cars;

        }

        // A Business object of a Car

        public class MyCar

        {

            public MyCar() { }

            public MyCar(string Br_Name, string M_Name, string Mkt_Price)

            {

                C_Brand = Br_Name;

                C_Model = M_Name;

                C_Price = Mkt_Price;

            }

            public string C_Brand { get; set; }

            public string C_Model { get; set; }

            public string C_Price { get; set; }

            // Overriding the ToString method

            public override string ToString()

            {

                return "The Brand New " + C_Brand + " - " + C_Model + ", at price: " + C_Price;

            }

        }

    }

}

 

Step 5: In this step we are going to run the application by pressing F5 and the output regarding it is given below.

Output 1:

Output 2:

Output 3:

Output 4: 

Here are some other resources which may help you

Windows 8: Adding Shortcuts to Metro UI
Introduction to Windows 8 Metro Style Application
Windows 8 Metro Application Development
Binding and Defining Layout Through XAML in Metro Style Application