1st Win Mobile Application

I can share with my experience on the  windows  mobile application through this post . First we can discusses what  are the tool  need to develop the simple windows mobile application . Lsited below tools are needed , click on below tool names and download it .

1. Visual Studio 2010 
2. Visual Studio 2010 Service pack 1
3. Windows Phone SDK 7.1

Download above tools and install it.

System Requirement 

1.  OS must be windows , 
2.   2 GB (32 Bit) or 4 GB (64 Bit) RAM  is better for use.

After finished your installation . First open the visual studio after that open your windows  phone emulator .
it be shown as below image .

Visual Studio

Windows mobile emulator 

Now go to the visual studio and create the new project (File>New>Project)

It will pop up the window .you will select the mobile phone application .(Visual C# > Silver light for Windows Phone > Windows Phone Application)

Then type the project name and select the location for where need to save the project.

Select the windows phone OS version its select the emulator version 

Then it will open the below window 

On this window  it will divide four column windows in left hand side first will open the tool box window , second column has xaml design view window, third column window xaml code view last one is properties window. It is shown clearly in below image 

You can use the tool box and properties for design the user interface . it mean you need to drag the tool what do you want for your interface and drop to the middle window or above the phone window. For an example you need a Text box just click on the text box in tool box window drag it to phone window it will automatically generate the code. Below example i use the text box , text block and button see below the image 

After you drop to phone window you will use the properties for make any adjustment for the particular tool.If you use the button you need to add the content for this button just select the button and go to the property window then you can type content  like "Click ME".

You can use the xaml code for design the interface . for an example you can use the below code it will generate the above image interface .

<phone:PhoneApplicationPage 

    x:Class="MY1stApp.MainPage"

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

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

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

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    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="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True"

   >

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="FIrst App" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel>

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Grid.RowDefinitions>

                <RowDefinition Height="50"/>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="100"/>

                <RowDefinition Height="100"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="200"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

<TextBlock Name="NameText" Text="Enter Your Name :" Grid.Row="0" Grid.ColumnSpan="2" Style="{StaticResource PhoneTextNormalStyle}"/>

 <TextBox Name="InputName" Grid.Row="1" Grid.ColumnSpan="2"  />

<Button Name="submit" Content="Click Me" Grid.Row="2" Grid.Column="1" Click="submit_Click" />

                   

           </Grid>

    </Grid>

   

</phone:PhoneApplicationPage>

Use the grid  for divide the window and it will easily handle the tools alignments and use below tools 

TextBlock - for display the label 

TextBox -for get user input value

Button -for doing the action 

In this simple I am doing the simple action mean need to click the button it will display the message so you can do two ways 

1. You select the button and go to the event window it is behind the property window and double click on the Click action 
2. You can add  "Click="submit_Click" " in your xaml code 

Since I talk about the xaml file now move to how to make the coding for in cs file . Every xaml file has a cs file this is the C# code file it is handled the whole actions or functions of the application .xaml file only for interface design.

Above example application have a action or function when user click the button it will prompt the welcome message it coded in cs file . code be shown below 

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;

namespace MY1stApp

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

        private void submit_Click(object sender, RoutedEventArgs e)

        {

            String name = InputName.Text;

            MessageBox.Show("Hi "+name +"..!!");

            InputName.Text = "";

            InputName.Focus();

        }

       

    }

}

When we create the interface in design view all codes automatically generate we need to code following parts 

            String name = InputName.Text;

//get the input from text box and assign to variable 

            MessageBox.Show("Hi "+name +"..!!");

//display the message using message box

            InputName.Text = "";

//after shown the message user click on the OK button on message box it will clear the text in text box

            InputName.Focus();

//And also it the cursor should blink the text box. 

After finish all designing and coding click on the start debugging button or  click on F5 for build and deploy the application.After deploying finished successfully windows phone emulator be shown like below image 

Now  you can input the text in text box and click on the click Me button it be prompt the message box , for example  i input the text " kayu,th " it be shown below image 

Now click on the OK button . it be shown normal window like below image 

The production of too many useful things results in too many useless people.
-Karl Marx