How to create application in windows phone ?

This article helps you to create basic application in windows phone 7/8.

Before creating application we need (pre requirements) development tools like Windows Phone SDK 7/8. I have already shared pre-requirements in previous article. 

Create First Application:

Create first windows phone project using following steps.

1. Launch Visual Studio Express 2010/2012.
2. Create a new project by selecting File menu > New Project or short-cut keys Ctrl+Shift+N.
3. Expand template Visual C# or Visual Basic  from the list of Templates on the New Project window left and select Windows Phone template.
4. Once you select Windows Phone template, it will shows list of available built in project templates on right side of New Project window.You can choose your template depends on your requirement. I am choosing Windows Phone App template for first application.
5. Final step for creating project is specify Project Name and Location at the bottom of New Project window. I have created project with name "MyFirstApp" and location is optional by default project directory created in installed location or you can change project directory location.

   

   MyFirstApp
6. Click OK on New Project window, it will open New Windows Phone Application dialog box. You can specify target windows phone version in New Windows Phone Application dialog box.
1. If you select Windows Phone OS 8, your app will run both windows phone 8 /8.1 device/emulator but does not run on windows phone 7. Because higher version application will not work on lower version.
2.  If you select Windows Phone OS 7.1, your app will run on windows phone 7 and above all versions, Because lower version will run on higher version.
7. Once you click OK on New Windows Phone Application window it will added few build-in files and creates blank project for you. I have already shared default files in previous article .
1. You can find project solution on View | Solution Explorer or open Solution Explorer using shortcut Alt+Ctrl+L.
8. Open MainPage.xaml page from Solution Explorer.



Toolbox Window

1. Create UI using controls from View | Toolbox or open Toolbox using shortcut Crtl+Alt+X.                                                                                                                                           

                                                                  

Demo:

In this demo am going to explaining basic welcome message in Windows Phone.

• Design UI in MainPage.xaml, Mostly we will focus on "ContentPanel". ContentPanel behaves like a page BODY. 
• Change page name and application name in MainPage.xaml. 

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

                       <TextBlock Text="MyFirstApp" Style="{StaticResource PhoneTextNormalStyle}"                                  Margin="12,0"/>

                       <TextBlock Text="Home" Margin="9,-7,0,0" Style="{StaticResource                                                        PhoneTextTitle1Style}"/>                       

                </StackPanel>

• Add Button control to ContentPanel  in MainPage.xaml for displaying welcome message. You can add Button control from Toolbox using drag and drop or by write code. Button control occupies Content Panel entire space.

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

                       <Button Content="Show Message"/>

                  </Grid>

MyFirstApp

•  OR you can add Button control in code-behind MainPage() constructor (MainPage.xaml.cs).  
• First create a new instance of Button, then set the Button text as "Show Message" using Content property and add Button to ContentPanel as a children. This Button control added to page at runtime.

                     public MainPage()

                       {

                                 InitializeComponent();

                                 Button btn = new Button();

                                 btn.Content = "Show Message";

                                 this.ContentPanel.Children.Add(btn);

                       }

• Our goal is display message while clicking on Button. For displaying message we are using MessageBox Class

 What is MessageBox ?

         Displays a message to user using Show overloaded method,  

• Show(messaebody) method displays message box that contains message text.

                       Syntax: 

                                 MessageBox.Show(string messageText);

• Show(messagebody,messageTitle,messageboxButtons) method displays message box that contains message text , message title and response buttons.

                       Syntax: 

                                MessageBox.Show(string messageText,string messageTitle,MessageBoxButton                                   button);                                

   

• Create Button Click event handler either XAML page or code behind 

         In XAML:

                      <Button Content="Show Message" Click="btn_Click"/>

         In Code-behind:

                        public MainPage()

                       {

                                 InitializeComponent();

                                 Button btn = new Button();

                                 btn.Content = "Show Message";

                                 btn.Click+=btn_Click; 

                                 this.ContentPanel.Children.Add(btn);

                       }

         Event Handler:

                       void btn_Click(object sender, RoutedEventArgs e)

                       { }

• Add message box Show(MessageText) method in button event, This code will execute once user tap on Show Message button.

                       void btn_Click(object sender, RoutedEventArgs e)

                       {

                          MessageBox.Show("Welcome to learnwindowsphonebasics.blogsopt.in");

                        }

• Launch Your First App:

              Run your application either Emulator or Device using play button on menu bar or press F5 function keyboard button. 

Launch Your App

                     

• Output:

MyFirstApp Result

                                                

• Stop your application:

                 You want to stop your running application click RED SQUARE button on Visual Studio menu bar.

Stop your running app

                     

Great friends we are successfully create first windows phone application.

Get the source code for MyFirstApp

   

What is Silverlight ?

• Microsoft Silverlight is a cross-browser, cross-platform implementation of the .NET Framework for building rich interactive application (RIA) for the web and Mobile.

• Silverlight uses the eXtensible Application Markup Language (XAML) for UI Development.

• Supports managed code.

Layout And Grouping Controls:

What is Layout Control ?

• Controls that contain other controls are often referred to as layout controls.
• A layout control serves as the layout root of your app within a page.
• By default Grid control serves as the layout root With in page.
• Most of the controls derive from the Panel class.

Examples for Layout Controls:

• StackPanel

Syntax: 

<StackPanel>

.................

</StackPanel>

• Canvas

Syntax: 

<Canvas>

.................

</Canvas>

• Grid

Syntax: 

<Grid>

.................

</Grid>

Additional layout controls

• Panorama
• Pivot

The Pivot and Panorama controls derives from ItemsControl.

What is Pivot Control ?

• The Pivot control provides a quick way to manage the navigation of views within an application.

• The control can be used as a navigation interface for switching between views.

• Each view or section of the control is called the PivotItem.
• Pivot control is very similar to Tab Control, except navigation, here are two way to navigate to one page to another, you can tap page’s header or swipe (Pan or Flick) control.

PivotControl

Syntax:
 
<phone:Pivot Title="pivot"> <phone:PivotItem Header="item1"> .............. </phone:PivotItem> <phone:PivotItem Header="item2"> .................... </phone:PivotItem> </phone:Pivot>

What is Panorama Control ?

• Creates a panoramic (wide) view of items that can be panned side to side.
• The Panorama control is tab navigation control.
• Its built-in support touch and navigation, no need to implement any functionality for gestures functionality.

Panorama Control

Syntax:
 
<phone:Panoram Title="pivot"> <phone:PanoramaItem Header="item1"> .............. </phone:PanoramaItem> <phone:PanoramaItem Header="item2"> .............. </phone:PanoramaItem> </phone:Pivot>

Text Controls:

• Text control typically display string content
• Different types of text controls
• TextBlock: Use this to display simple read-only of text. Content is set with the Text property.

Syntax: 

<TextBlock Text="textblock"/>

• TextBox: Used for short text input, you can also use it for large, multi-line text input. Content is set with Text property.

Syntax: 

<TextBox Text="textbox"/>

• PasswordBox: Makes the text a user inputs. Content is set with Password property and marked with the PasswordChar property.

Syntax: 

<PasswordBox Password="textblock"/>

Button And Selection Controls:

• Button and selection controls enable the user to easily choose items or navigate through the app.
• Most of the button and selection controls are derived from ContentControl, means we added content to them with the Content property.

Button Controls :

• Button : Control that responds to user input and raises a click event. Content is set with Content property.

Syntax: 

<Button Content="button"/>

• HyperlinkButton: Represents a button control that displays a hyperlink. When clicked HyperlinkButton enables to move other page, content is set with Content property and URL to navigate to is set with NavigateUrl property.

Syntax: 

<HyperlinkButton Content="hyperlinkbutton"/>

               

Selection Controls :

• CheckBox: Represents a control that user can select or clear. A checkbox  optionally an indeterminate state. Content is set with Content property

Syntax: 

<CheckBox Content="checkbox"/>

• RadioButton: Allows a user to select a single option from list of options. When radio buttons are grouped together they are mutually exclusive. Content is set with Content property.

Syntax: 

<RadioButton Content="radiobutton"/>

• Slider: Represents a control that lets the user select from range of values along a track. The Value property sets determines the position on the track.

Syntax: 

<Slider .../>

Windows Phone Controls

Common Controls:

• ViewBox:
• The ViewBox controls is content decorate that takes one child element and stretches it or scales it to fit the size of viewbox.

Syntax:

<ViewBox Stretch=”UnifromToFill”>

<TextBlock Text=”this is viewbox control”/>

<ViewBox>

• Image Control:
• Represents a control that displays an image in the JPEG or PNG file formats.

Syntax:

<Image .../>

• RichTextBox:
• Represents a rich text control that supports formatted text, hyperlink, inline images and other rich content.

Syntax : 

<RichTextBox>

<Paragraph/>

</RichTextBox>

• WebBrowser Control:
• The WebBrowser control provides a surface for displaying HTML content. This control is now based on Internet Explorer 10.
• Navigation:
• We can navigate in webbrowser control, by using following events.
• Navigating: This event is fired when browser starts to navigate Url.This event has NavigatingEventArgs as parameters and by setting Cancel property to true we can prevent user’s navigation to certain Urls.
• Navigated : This event fired after web site has found and device successfully loads web content.
• LoadCompleted: This event is fired after all content for the site has been loaded.
• InkPresenter Control:
• This control implements a rectangular surface that displays ink strokes.
• InkPresenter is derived from Canvas and can display one or more UIElement objects and a StrokeCollection.
• If we want to contain the ink within the InkPresenter control, use the Clip property.

syntax:  

InkPrensenter x:Name=”MyIP” />

Application Life Cycle

• Application is launched until it is deactivated.

• Only one application run at a time in windows phone, This model execution is designed for provide a faster, responsive any time.

• This way to prevent the device from being slow or unresponsive due to running background application.

Terminologies for Application State:

Tombstoning :

• Operating System deactivates the application process or use exits application.

• Operating System preserves any information about application’s state.

• When the application is re-launched, operating system restarts the process and sends the last known state from the application

Page State:

• Page State completely related to application page.

• It’s includes scroll positions or text fields content.

• We can modify page state is done by overriding OnNavigatedTo or OnNavigatedFrom methods.

Application State:

• It’s maintained state of application.

• we can modified Application State using PhoneApplicationService class

Persistent (Preserved) Data:

• Persistent Data is stored and retrieved from Isolated Storage.

Transient (Temporary) State:

• Transient Data is stored in State Dictionary provided by PhoneApplicationService.

• When application reactivated, Tombstoned state will be return to Transient State.

Which Events are fired in Application Lifecycle ?

Four events are fired in application lifecycle process.

• Launching

• Deactivated

• Activated

• Closing

• Launching:
• When:
• when new instance created of application, at the time Launching event is raised.
• Process:
• Run application from installed application list or from Tiles in start screen.
• Advice
• In Launching event, should not retrieve any data from Isolated Storage, because application will be slow down.
• Only create instance for application
• Deactivated:
• When:
  • When running application is closed by another application, it will be deactivated.
  • When pressing the START button.
  • Due to timeout when main screen locked.
  • Application can also be deactivated by invocation of a Launcher or Chooser or taking picture or sending emails.
• Do:
  • Application should stored information regarding the current state using State property on PhoneApplicationService
  • No guarantee that application Tombstoned condition will be reactivated, so application data should stored into Isolated.
• Advice:
• The whole action has to be finished within 10 sec, Otherwise operating system will not terminate the application, then application failed Certification.
• Activated:
  • When:
  • Application will be activated from Tombstoned condition.
  • Do:
  • Application should load data from PhoneApplicationService.
  • Advice
  • Similar to Launching event, application should not access resources from network or isolated storage to avoid the process down.
• Closing:
  • When:
  • When user press back button from application’s initial page
  • Do:
  • Application has to store persistent data into Isolated Storage.
  • Advice
  • No need to store transient data.