Silverlight on Mobile : Write your first Windows Phone 7 Application with Silverlight

Hi, I am back after a small break in between, well the gap I took just because the moment I started this series, There was a launch by Microsoft for Windows Phone 7 Tools, Yes ! I am talking about Windows Phone 7 Beta Tools which you can download right away. However while moving from CTP to Beta, your journey might not be safe and might go with lots of twist and turns,My fellow Community friend Mayur Tendulkar posted a nice solution here, do check that out so as to ease installation process.

Till the final bits comes to us or device or both, I will be using Beta version of tools henceforth,Whatever is new in Beta I will explore and explain here as we progress with applications.Beta tools will take pain to have Project Templates and Blend 4 for Windows Phone 7 on your machine.Today we are just greeting ourselves by saying “Hello World” and in coming posts we will go much more in depth.

Your first Windows Phone 7 Application :

I have already talked a lot about Emulator,Settings and Configurations etc. So today we will start application building via Visual Studio 2010. So Open your Visual Studio 2010 Instance. File->New Project, You will be able to see new template like this :

There are by default 3 types of Projects under Silverlight for Windows Phone as :

• Windows Phone Application – For Normal applications
• Windows Phone List Application – Provides Navigation Support
• Windows Phone Class Library – Typical Class Library for WP7

Once you choose “Windows Phone Application” you will get following instance where on left you will be able to design with controls on your Phone like page and on right hand side you can put your XAML,Something like this :

Typical Project Structure will be like this :

In my coming posts, I will be talking on each mini things in WMAppManifest.xml, Other png files and SplashScreenImage.jpg. At this moment, just understand that while loading your application on emulator, SplashScreenImage will be shown on device. We will soon discuss how you can more customize that experience for your application. To have a flavor of Expression Blend 4 for Windows Phone 7, Let’s put some Button and Textbox via Blend, So just Right Click on MainPage.xaml and choose “Open in Expression Blend” option.You will see following screen in Blend

 

Do I need to tell more about capabilities of Blend? I think we already done with it in past posts. So lets write C# code and execute our First Application, It will now look like this :

 

In the leftmost screen you can see your application listed (See the Highlighted text as “Demo_Hello_World”), Second screen shows the initial screen of application with button and the third screen shows final output. So, your first ever Windows Phone 7 application is Ready !

XAML Code :

<!--TitlePanel contains the name of the application and page title-->
       <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
           <TextBlock x:Name="ApplicationTitle" Text="Explore .NET with Vikram Pendse" Style="{StaticResource PhoneTextNormalStyle}"/>
           <TextBlock x:Name="PageTitle" Text="Hello World !" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
       </StackPanel>

       <!--ContentPanel - place additional content here-->
       <Grid x:Name="ContentGrid" Grid.Row="1">
           <Button Content="Greetings !" Margin="128,252,116,254" RenderTransformOrigin="0.5,0.5" Opacity="0.995" CacheMode="BitmapCache" Click="Button_Click">
               <Button.RenderTransform>
                   <CompositeTransform Rotation="-0.271"/>
               </Button.RenderTransform>
           </Button>
       </Grid>

C# Code :

using System.Windows;
using Microsoft.Phone.Controls;

namespace Demo_Hello_World
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            MessageBox.Show("Welcome to world of Windows Phone 7","Windows Phone 7 Console",MessageBoxButton.OK);
        }
    }
}

I know this is very very basic example but don’t worry advance examples are coming from right next week, Till that time get comfortable with Tools and IDE, See you next week with some more exciting applications of Silverlight for Windows Phone 7

Vikram.