First Windows Phone App

In this article we make a first approach to software development for Windows Phone.

To start, we need to install the Windows Phone SDK 7.1, wich comes with a free IDE (Visual Studio Express) and with a Windows Phone Emulator, which allows you to test your apps before deploying them to a Windows Phone-based mobile device.

In this example app, the Visual Studio 2010 has been used, but, of-course, Windows Phone SDK 7.1 must allways be installed.

Windows Phone execution model

Before starting the development of our first app, just some words about the Windows Phone execution model:

• Just one App may run in foreground at a given moment in time;
• Other Apps in execution are put into a dormant state;
• When the device's memory isn't enough, the operating system (OS) starts terminating Apps in the dormant state.
• Through their programming framework, Apps can manage their state when they are activated or deactivated. This can be used to give the user the impression that an app has always been running, even when it is stopped and later reactivated.

Create the Windows Phone Project

 In Visual Studio (or Visual Studio Express), create a new project with the template for "Silverlight for Windows Phone", and type Windows Phone Application:

 Then, select the OS version:

Visual studio creates the architecture of the application, which consists of only one page:

 Windows Phone applications are made of Silverlight UI page descriptions (Silverlight is a subset of XAML, a XML-based User Interface description language created by Microsoft), and code behind files in C# (although VB.Net may also be used).

At the center of the image above, you can see two views of the MainPage.XAML, which is the description of the user interface for our application. The two views are, in the left, a graphical view of the page, and in the righ, the XAML description. You can modify the page in any of these two views, and those modifications are automatically reflected in the other view.

By dragging and droping controls from the toolbox to the graphical view of the XAML page, you can start composing the App UI:

 We are building an app for converting Farenheith degrees into Celsius degrees, so we drag a few TextBlocks, a TextBox and a Button:

 The XAML equivalent is:
<phone:PhoneApplicationPage
    x:Class="MinhaPhoneApp.MainPage"
    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="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--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 Orientation="Vertical" x:Name="TitlePanel" Margin="12,17,0,28" Grid.ColumnSpan="7">
            <TextBlock x:Name="ApplicationTitle" Text="Minha Phone App" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="ºF --> ºC" TextAlignment="Center" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0">
            <TextBlock Height="50" HorizontalAlignment="Left" Margin="17,37,0,0" Name="textBlock1" Text="Temperatura ºF : " VerticalAlignment="Top" Style="{StaticResource PhoneTextLargeStyle}" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="236,25,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="220" TextChanged="textBox1_TextChanged" />
            <Button Content="Converter temperatura" Height="72" HorizontalAlignment="Left" Margin="57,117,0,0" Name="button1" Click="button1_Click" VerticalAlignment="Top" Width="344" />
            <TextBlock Height="173" HorizontalAlignment="Left" Margin="57,209,0,0" Name="textBlock2" Text="TextBlock" VerticalAlignment="Top" Width="344" Style="{StaticResource PhoneTextTitle1Style}"/>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>


Note the XAML code for the button:

<Button Content="Converter temperatura" Height="72" HorizontalAlignment="Left"
        Margin="57,117,0,0" Name="button1" Click="button1_Click"
        VerticalAlignment="Top" Width="344" />

The event handler that shall run when the button is clicked is button1_Click.
Now we need to provide the code for the event handler:

Here is all the code behind for MainPage.XAML.cs:

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

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


        private void button1_Click(object sender, RoutedEventArgs e)
        {
            int fahrenheit = 0;

            if (Int32.TryParse(textBox1.Text, out fahrenheit))
            {
                // C = 5 * ((F-32)/9)

                decimal celsius = 5 * (((decimal)fahrenheit - 32) / 9);

                textBlock2.TextAlignment = TextAlignment.Center;
                textBlock2.Text = Decimal.Round(celsius, 0).ToString() + "º C";
            }
            else
            {
                // Show message "Invalid Data"
                textBlock2.Text = "Dados inválidos!!!";
            }
        }

        private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
        {

        }

    }
}

Then, we may run or new App on the Windows Phone device emulator: