Windows Phone 8: A quick intro

This tutorial targets absolute beginners in windows phone 8 application development. If you are a developer with a Silverlight application development background, you don't actually need this tutorial. But for reference you may use this. Developing an application for windows phone 8 using Visual Studio is as simple as developing a Silverlight application. XAML is the language used to create controls. You can use C# or VB to code the business logic of the application. Prerequisites are Windows 8 Operating System and Visual Studio 2012. Now that VS 2013 is in Beta Phase and it supports the development of Windows Phone 8.1

Lets start. To Create a new project, Click New Project and Windows Phone from the "New Project Dialog". Select "Windows Phone App". There are other templates such as DataBound App, Pivot App, Panorama App etc. For now, lets just stick with the application that is selected by default, which is the "Windows Phone App". See the screenshot

Here is what you see in the "New Project Dialog"

On selecting, you will be directed to a new window to select the target OS, which is as follows. Select the default, which is Windows Phone 8.0

Now that you are ready to start windows phone application development. To develop an application, you need to have a basic understanding of XML (I really mean XML and not XAML);

What is XAML?

Extensible Application Markup Language!!! To make it simple, its just a form of XML. You can create controls, define properties for the controls and assign events using XAML. In this XML, the node is either an object or a control and the attributes are properties or events. See the below example

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            
        </Grid>
    </Grid>

In the above example, Grid & StackPanel are layout controls that helps you arranging the controls in your application. If you need a detailed information on the layout controls, refer this link. Apart from the Layout controls, there are several other controls for Windows Phone 8. Take a look at this link for more detail.

Now that you know what control is. Our next step is to Create a sample application and run it!
As you click the OK Button in the Target popup (In the above image), Visual Studio will create a basic application with a few lines of code. If you want to run the application, just click on the Run button which is as follows.

By default, Emulator is selected! Let it be. We are running the application using the emulator. When you click Run (Press F5), the emulator will start and load the application. Be patient! Emulator takes time to load. Once loaded, you don't have to close it, instead you can stop debugging from Visual Studio by pressing stop button. Here is how the emulator looks like for the default template (from the above code).

Now, I am going to change the XAML and lets see.

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="www.devqueries.com" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="Colors" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->        
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <Rectangle Grid.Row="0" x:Name="Rect1" Height="100" Fill="Yellow"/>
            <Rectangle Grid.Row="1" x:Name="Rect2" Height="100" Fill="Red"/>
            <Rectangle Grid.Row="2" x:Name="Rect3" Height="100" Fill="Green"/>

            <Button Grid.Row="4" x:Name="ChangeButton" Content="Change color" Click="OnChange"/>
            
        </Grid>
    </Grid>

In the above example you can see a button with an event. To generate the event, enter a name and "Right Click" on the name and Click "Navigate to event handler. You can even use the properties window to do the same.

In the code behind (Navigate to event handler will open the code behind of the XAML or simply right click anywhere in the XAML and click View Code), you may write the following code 

private void OnChange(object sender, RoutedEventArgs e)
{
            var random = new Random();
            var color1 = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255));
            var color2 = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255));
            var color3 = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255));
            this.Rect1.Fill = new SolidColorBrush(color1);
            this.Rect2.Fill = new SolidColorBrush(color2);
            this.Rect3.Fill = new SolidColorBrush(color3);
}

See the output!!!

I will be updating more about windows phone application development in the future. Thanks for visiting my blog!