Country Application for Window 7 mobile

Objective 

In this article, I am going to show you a Country Application. User will select country from drop down and details of selected country will be displayed. 

Expected Output 

 

We will achieve this in three steps 

1. Create XML file for country and corresponding details. And create entity class. 
2. Design phone page 
3. Write code behind to handle selection change event and query XML file using LINQ 

Very first create Windows Phone Application.  From Silverlight for Windows Phone tab select Windows Phone Application project type. 

Creating entity class and XML file as Data source 

Right click and add a new item in the project. Select XML file. Then copy paste the below code in that XML file. This XML file contains details of countries.  Give a proper name to XML file. Name I am giving here is CountryDetail.XML.

CountryDetail.xml

<?xml version="1.0" encoding="utf-8" ?>

<Countries>

  <Country>

    <Name>USA</Name>

    <Capital>Washinton DC</Capital>

    <Language>English</Language>

    <Currency>Dollars</Currency>

  </Country>

  <Country>

    <Name>England</Name>

    <Capital>London </Capital>

    <Language>English</Language>

    <Currency>Pounds</Currency>

  </Country>

  <Country>

    <Name>France</Name>

    <Capital>Paris </Capital>

    <Language>French</Language>

    <Currency>Euro</Currency>

  </Country>

  <Country>

    <Name>Germany</Name>

    <Capital>Berlin </Capital>

    <Language>German</Language>

    <Currency>Mark</Currency>

  </Country>

  <Country>

    <Name>Russia</Name>

    <Capital>Moscow </Capital>

    <Language>Russian</Language>

    <Currency>Not Availaible</Currency>

  </Country>

  <Country>

    <Name>Spain</Name>

    <Capital>Madrid </Capital>

    <Language>Spanish</Language>

    <Currency>Not Availaible</Currency>

  </Country>

  <Country>

    <Name>Turkey</Name>

    <Capital>Ankara </Capital>

    <Language>Not Availaible</Language>

    <Currency>Not Availaible</Currency>

  </Country>

  <Country>

    <Name>Norway</Name>

    <Capital>Oslo </Capital>

    <Language>Not Availaible</Language>

    <Currency>Not Availaible</Currency>

  </Country>

  <Country>

    <Name>Canada</Name>

    <Capital>Ottawa </Capital>

    <Language>English</Language>

    <Currency>Dollars</Currency>

  </Country>

  <Country>

    <Name>Mexico</Name>

    <Capital>Mexico </Capital>

    <Language>Spanish</Language>

    <Currency>Peso</Currency>

  </Country>

  <Country>

    <Name>China</Name>

    <Capital>Bejing </Capital>

    <Language>Chinnes</Language>

    <Currency>Not Availaible</Currency>

  </Country>

  <Country>

    <Name>Japan</Name>

    <Capital>Tokyo </Capital>

    <Language>Jaopanese</Language>

    <Currency>Yen</Currency>

  </Country>

  <Country>

    <Name>India</Name>

    <Capital>New Delhi </Capital>

    <Language>Hindi</Language>

    <Currency>Ruppies</Currency>

  </Country>

  <Country>

    <Name>Australia</Name>

    <Capital>Canberra </Capital>

    <Language>English</Language>

    <Currency>Dollars</Currency>

  </Country>

</Countries>

Now we will create an entity class corresponding to data source XML file.  Right click and Add new class in the project. I am giving name of the class as Country. 

Country.cs

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes; 

namespace Countries

{

    public class Country

    {

        public string Name { get; set; }

        public string Capital { get; set; }

        public string Language { get; set; }

        public string Currency { get; set; }

    }

}

Design Phone Page 

1. Divide content grid in four rows 
2. In first row put a combo box. Inside combo box put an Item Template and a Data template. Inside Data template put a text box. And Bind this text box with the Name property of Country entity class. 
   
   
   
3. In second, third and fourth row put a stack panel with orientation horizontal.  Put one text block and one text box. Text box will display corresponding details. 
   
   
   

Full XAML for design is as below, 

MainPage.xaml

<phoneNavigation:PhoneApplicationPage

    x:Class="Countries.MainPage"

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

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

    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"

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

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

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}">

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Grid x:Name="TitleGrid" Grid.Row="0">

            <TextBlock Text="Windows 7 phone" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>

            <TextBlock Text="Country App" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>

        </Grid>

        <Grid x:Name="ContentGrid" Grid.Row="1" Background="{StaticResource PhoneBackgroundBrush}" Margin="30,0,0,0">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>    

            <Grid x:Name="ContentGrid2">  

            <ComboBox x:Name="cmbName" Height="75" SelectionChanged="cmbName_SelectionChanged" Margin="21,0,10,0" Foreground="Black">

                <ComboBox.ItemTemplate>

                    <DataTemplate>

                        <TextBlock Text="{Binding Name}" />

                    </DataTemplate>

                </ComboBox.ItemTemplate>

             </ComboBox>

        </Grid>

        <Grid x:Name="ContentGrid1" Grid.Row="1">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto" />

                <RowDefinition Height="60" />

                <RowDefinition Height="60" />

                <RowDefinition Height="60" />

            </Grid.RowDefinitions>

            <TextBlock x:Name="txtCountryName" VerticalAlignment="Top" Grid.Row="0" Height="100" FontSize="72" Text="INDIA" Margin="21,30,25,0"  HorizontalAlignment="Stretch" />

            <StackPanel Orientation="Horizontal" Grid.Row="1">

                <TextBlock Text="Capital" Height="50" Width="139" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="26"  />

                <TextBox x:Name="txtCapital" Height="50" Width="336" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="26"  />               

            </StackPanel>

            <StackPanel Orientation="Horizontal" Grid.Row="2">

                <TextBlock Text="Language" Height="50" Width="139" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="26"  />

                <TextBox x:Name="txtLanguage" Height="50" Width="336" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="26"  />

            </StackPanel>

            <StackPanel Orientation="Horizontal" Grid.Row="3">

                <TextBlock Text="Currency" Height="50" Width="139" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="26"  />

                <TextBox x:Name="txtCurrency" Height="50" Width="336" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="26"  />

            </StackPanel>

        </Grid> 

    </Grid>

    </Grid>

</phoneNavigation:PhoneApplicationPage>

Code Behind 

Very first we will create a function. This function will query the XML file using LINQ to XML and return IEnumerable list of entity class Country. 

This function is using LINQ to XML to query against XML file. Using XDocument class, I am loading the XML file. Then querying xml file using LINQ to XML and saving result in VAR.Then on the selection changed event of combo box calling the above function and checking for the selected country in combo box and binding.  Do not forget to add reference of  using System.Xml.Linq; 

So, full code is as below 

MainPage.Xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using System.Xml.Linq;

namespace Countries

{

    public partial class MainPage : PhoneApplicationPage

    {

        //IEnumerable<Country> countrydt = null;

        public MainPage()

        {

            InitializeComponent();

            SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

            cmbName.SelectionChanged += new SelectionChangedEventHandler(cmbName_SelectionChanged);

            cmbName.ItemsSource = GetCountryDetails();

            cmbName.SelectedIndex = 0;

        }

       List<Country>  GetCountryDetails()

        {

            XDocument xmlDocument = XDocument.Load("CountriesDetail.xml");

            var   countrydt = from r in xmlDocument.Descendants("Country")

                            select new Country

                            {

                                Capital = r.Element("Capital").Value,

                                Currency = r.Element("Currency").Value,

                                Language = r.Element("Language").Value,

                                Name = r.Element("Name").Value,

                            };

          return countrydt.ToList();

        }     

       private void cmbName_SelectionChanged(object sender, SelectionChangedEventArgs e)\

       {

           string cntName = ((Country)cmbName.SelectedItem).Name.ToString();

           List<Country> country = GetCountryDetails();

           foreach (Country c in country)

           {

               if (c.Name == cntName)

               {

                   txtCountryName.Text = c.Name;

                   txtCapital.Text = c.Capital;

                   txtCurrency.Text = c.Currency;

                   txtLanguage.Text = c.Language;

               }

           }

       }

    }

}

Press F5 to run the application, change the country name and get the details.

I hope this article was useful. Thanks for reading. Happy coding.