A Simple Calculator App for Windows Phone in 10-15 Minutes

Being an android developer, I was trying to find out which platform will be the most exciting to learn next, and I have found myself starting with WP7 instead of BlackBerry because WP7 provides more flexibility than BlackBerry app development. FYI, I have also tried to develop basic examples in BlackBerry but it requires a lot to implement this simple Calculator example, where as here I was able to create this example in 10-15 minutes.

Here is a solution for a Simple Calculator example:

Output:

 

Main.xaml

<phone:phoneapplicationpage x:class="PhoneApp1.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="Portrait" 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="*">
        </rowdefinition></rowdefinition></grid.rowdefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <stackpanel x:name="TitlePanel" grid.row="0" margin="12,17,0,28">
            <textblock x:name="wp7example1" text="Windows Phone 7 Example - 1" style="{StaticResource PhoneTextNormalStyle}">
            <textblock x:name="pageName" text="Simple Calculator" margin="5,-7,0,0" style="{StaticResource PhoneTextTitle1Style}" fontsize="30">
        </textblock></textblock></stackpanel>

        <!--ContentPanel - place additional content here-->
        <grid x:name="ContentPanel" grid.row="1" margin="12,0,12,0">
            <button content="Calculate Sum" height="72" horizontalalignment="Left" margin="111,386,0,0" name="button1" verticalalignment="Top" width="221" click="button1_Click">
            <textblock height="30" horizontalalignment="Left" margin="20,22,0,0" name="textBlock1" text="Enter First No:" verticalalignment="Top">
            <textbox height="72" horizontalalignment="Left" margin="12,58,0,0" name="txtFirstNo" text="" verticalalignment="Top" width="420" inputscope="Number">
            </textbox>
            <textblock height="30" horizontalalignment="Left" margin="20,152,0,0" name="textBlock2" text="Enter Second No:" verticalalignment="Top">
            <textbox height="72" horizontalalignment="Left" margin="12,188,0,0" name="txtSecondNo" text="" verticalalignment="Top" width="420" inputscope="Number">
            <textblock height="30" horizontalalignment="Left" margin="20,272,0,0" name="textBlock3" text="Result:" verticalalignment="Top">
            <textbox height="72" horizontalalignment="Left" margin="12,308,0,0" name="txtResult" text="" verticalalignment="Top" width="420">
            <border borderbrush="Silver" borderthickness="1" height="466" horizontalalignment="Left" margin="5,6,0,0" name="border1" verticalalignment="Top" width="451">
        
    
 
</border></textbox></textblock></textbox></textblock></textblock></button></grid></grid></phone:phoneapplicationpage>

Code for button click event:

private void button1_Click(object sender, RoutedEventArgs e)
      {
          txtResult.Text = Convert.ToString(Convert.ToInt32(txtFirstNo.Text) + Convert.ToInt32(txtSecondNo.Text));
      }

What do you think? Pretty cool, isn’t it?