Windows Phone Application in Expression Blend 4

Step 1

Open Expression Blend 4 -> select Windows Phone Application, change the Name and Location accordingly and hit OK. A window appears as show below:

Note: Have a look at the Object and Timeline Window. The Windows Phone Application Page is divided into 2 Parts ie; TitlePanel and ContentPanel as shown below:

Step 2

The Title Panel is divided into 2 parts, they are Application-Title and Page-Title. Change the name of the application title and the page title according to your choice. Manage width & height, Margin, Background-Color, Foreground-Color, FontFamily and FontSize using the Property-Panel as shown below:

Note: Have a look at the Object and Timeline Window for the Title-Panel Layer as shown below:

Note: Here, we can manage the Name in the Title-Panel Layer in the Object and Timeline Window according to the image title, so that we can easily identify the Image by Name as shown below:

Step 3

Now, we are going to design the Content-Panel Part. Copy & paste the images according to your choice. Manage the width & height, Background-Color, foreground-Color and Margin as shown below:

Note: Here, we can manage the Name in the Content-Panel Layer in the Object and Timeline Window according to the image title. So that we can easily identify the Image by Name as shown below:

Step 4

Description of Title Panel Layer:

Application-Title: Here we can give any Name according to your choice like Nokia 2700 classic as shown below:

Page-Title: Here we have to provide the Page Title according to your choice like Nokia as shown below:

Note: Here, while providing the Application-Title Name and Page-Title Name remember that the Names should be Interrelated.

Step 5

Description of Content Panel Layer:

Home Icon: We use the Home Icon. So that the user can easily switch back to it's Home-Page while using the Windows Phone Application.
Save Icon: We use the Save Icon. So that the user can Save it's data while using the Windows Phone Application.
Icons: We use the Icon-Keypad. so that it provide's us the various Icon's like Edit, Update, Cancel, Delete, Refresh, Search, Ask a Question, Showcase etc.
Download-On or Off Icon: These icons provides us the ability to download the file or images.

Step 6

Hit F5 to build the application and see the result as shown below:

Note: Here, have a look to the right-side of the application window; the vertical-list is available with options like Close, Minimize, Search, Landscape Layout, Portrait Layout etc and to the Bottom Back, Start and Search Buttons are also available as shown below:

Step 7

To the Top of Windows Phone Application, there is a Signal Icon and a Battery Icon to the left and Time displays to the right as shown below:

Step 8

Have a look at the coding part also, so that if you are not able to do the designing you can Design a Windows Phone Application through Coding as shown below:

<phone:PhoneApplicationPage

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

x:Class="WindowsPhoneApplication1.MainPage"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

</phone:PhoneApplicationPage>

Summary

This article taught us the knowledge of Designing the Windows Phone Application.