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.