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

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

    <Grid x:Name="LayoutRoot" Background="Transparent" d:IsLocked="True">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" MinHeight="768"/>

            <RowDefinition/>

        </Grid.RowDefinitions>

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

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="16,11,8,0" Background="#FF6E007A" Height="110" VerticalAlignment="Top" d:IsLocked="True">

            <TextBlock x:Name="nokia_2700_classic" Text="Nokia 2700 Classic" Style="{StaticResource PhoneTextNormalStyle}" Margin="0,0,24,0" d:IsLocked="True"/>

            <TextBlock x:Name="nokia" Text="Nokia" Margin="0" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Times New Roman" FontWeight="Bold" Foreground="White" HorizontalAlignment="Center" d:IsLocked="True"/>

        </StackPanel>

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

        <Grid x:Name="ContentPanel" Margin="16,121,8,27" Background="#FF6E007A" d:LayoutOverrides="GridBox" d:IsLocked="True">

            <Grid.RowDefinitions>

                <RowDefinition/>

                <RowDefinition Height="0*"/>

            </Grid.RowDefinitions>

            <Image x:Name="home" Margin="5,5,0,0" Source="uiuieiuer.png" Stretch="Fill" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" d:IsLocked="True"/>

            <Image x:Name="save" Height="25" Margin="0,40,14,0" Source="save1.png" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" d:IsLocked="True"/>

            <Image x:Name="icons" Margin="9,183,8,0" Source="Copy of ghfjhgvh-mkjh.png" Stretch="Fill" Width="439" Height="200" VerticalAlignment="Top" d:IsLocked="True"/>

            <Image x:Name="download_off" HorizontalAlignment="Right" Height="32" Margin="0,0,43,8" Source="download off.png" Stretch="Fill" VerticalAlignment="Bottom" Width="32" d:IsLocked="True"/>

            <Image x:Name="download_on" HorizontalAlignment="Right" Height="32" Margin="0,0,8,8" Source="download on.png" Stretch="Fill" VerticalAlignment="Bottom" Width="32" d:IsLocked="True"/>

        </Grid>

    </Grid>

</phone:PhoneApplicationPage>

 

 Summary

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