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.0encoding=utf-8 ?> <Countries>

 
 <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>

<Country>

 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

    1 using System;

    2 using System.Net;

    3 using System.Windows;

    4 using System.Windows.Controls;

    5 using System.Windows.Documents;

    6 using System.Windows.Ink;

    7 using System.Windows.Input;

    8 using System.Windows.Media;

    9 using System.Windows.Media.Animation;

   10 using System.Windows.Shapes;

   11 

   12 namespace Countries

   13 {

   14     public class Country

   15     {

   16 

   17         public string Name { get; set; }

   18         public string Capital { get; set; }

   19         public string Language { get; set; }

   20         public string Currency { get; set; }

   21 

   22     }

   23 }

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

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Net;

    5 using System.Windows;

    6 using System.Windows.Controls;

    7 using System.Windows.Documents;

    8 using System.Windows.Input;

    9 using System.Windows.Media;

   10 using System.Windows.Media.Animation;

   11 using System.Windows.Shapes;

   12 using Microsoft.Phone.Controls;

   13 using System.Xml.Linq;

   14 

   15 namespace Countries

   16 {

   17     public partial class MainPage : PhoneApplicationPage

   18     {

   19         //IEnumerable<Country> countrydt = null;

   20         public MainPage()

   21         {

   22             InitializeComponent();

   23 

   24             SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

   25             cmbName.SelectionChanged += new SelectionChangedEventHandler(cmbName_SelectionChanged);

   26 

   27             cmbName.ItemsSource = GetCountryDetails();

   28             cmbName.SelectedIndex = 0;

   29         }

   30 

   31 

   32 

   33        List<Country>  GetCountryDetails()

   34         {

   35             XDocument xmlDocument = XDocument.Load(“CountriesDetail.xml”);

   36 

   37           var   countrydt = from r in xmlDocument.Descendants(“Country”)

   38                             select new Country

   39                             {

   40                                 Capital = r.Element(“Capital”).Value,

   41                                 Currency = r.Element(“Currency”).Value,

   42                                 Language = r.Element(“Language”).Value,

   43                                 Name = r.Element(“Name”).Value,

   44 

   45                             };

   46           return countrydt.ToList();

   47 

   48         }     

   49 

   50        private void cmbName_SelectionChanged(object sender, SelectionChangedEventArgs e)

   51        {

   52 

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

   54            List<Country> country = GetCountryDetails();

   55            foreach (Country c in country)

   56            {

   57 

   58                if (c.Name == cntName)

   59                {

   60                    txtCountryName.Text = c.Name;

   61                    txtCapital.Text = c.Capital;

   62                    txtCurrency.Text = c.Currency;

   63                    txtLanguage.Text = c.Language;

   64                }

   65            }

   66 

   67        }

   68 

   69 

   70     }

   71 }

   72 

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.

About these ads

3 thoughts on “Country Application for Window 7 mobile

  1. Pingback: Monthly Report March 2010: Total Posts 6 « debug mode……

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s