Building A Windows Phone App From Scratch–Part 2

Windows Phone Tutorial

In Part 1 of this mini-series we created the layout for a calculator. In this part, we’ll take a look at the event handlers required to make the buttons works. 

When the user clicks a button an event is raised. You can register a method to “handle” that event – that is you can set up your program so that when the user clicks your button a specific method is invoked.

There are a number of ways to register a method to an event. One imageof the easiest ways to do this is to click on the Button in the Designer and then to click on the event  you’re interested in in the Properties window. To see the events, you need to click the events button in the upper right hand corner, as shown in the figure.

The events window lists all the events that might be associated with your Button. Click on the Clear button and then double-click in the Click event handler box. Blend creates a new Event for you named by appending the event (Click) to the Buttton’s name with an underbar (Clear_Click). Blend also creates the stub for the event handler code, and moves you to the code file (MainPage.xaml.cs).

Switch back to MainPage.xaml and click on Button01. . This time rather than double clicking in the event handler for the click button, type in the name “NumberButton_Click” Do this for all ten number buttons; they will all share the same event handler.

Use the default name for all the other buttons.

Click the menu choice File -> SaveAll. Right click on the solution file and choose Edit In Visual Studio

Before we go on to examine writing the code associated with this application, let’s open MainPage.xaml. Visual Studio defaults to a split view, with the design view on the left and the Xaml view on the right. Notice that the design is identical to what you saw in Expression Blend.

Let’s focus on the Xaml for a moment. Every property that you set interactively in Blend is now shown in the Xaml. For example, notice that the first entry in the StackPanel is a Border that contains a TextBlock, which is just what we hoped,

<StackPanel x:Name="ContentPanel" Margin="16,0,8,0" Grid.Row="1" >
 <Border Margin="15,0,30,0" Background="White">
   <TextBlock TextWrapping="Wrap" Text="0" FontSize="48" 
       Foreground="Black" HorizontalAlignment="Right" Margin="0"/>
 </Border>

Take a look at the WrapPanel and double check that all the Buttons have the right names and correct Click event handlers,

<toolkit:WrapPanel Margin="0">
  <Button x:Name="Clear" Content="c" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="Clear_Click"/>
  <Button x:Name="Button01" Content="1" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="NumberButton_Click"/>
  <Button x:Name="Button02" Content="2" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="NumberButton_Click"/>
  <Button x:Name="Button03" Content="3" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="NumberButton_Click"/>
  <Button x:Name="Button04" Content="4" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="NumberButton_Click"/>
  <Button x:Name="Button05" Content="5" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="NumberButton_Click"/>
  <Button x:Name="Button06" Content="6" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="NumberButton_Click"/>
  <Button x:Name="Button07" Content="7" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="NumberButton_Click"/>
  <Button x:Name="Button08" Content="8" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="NumberButton_Click"/>
  <Button x:Name="Button09" Content="9" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="NumberButton_Click"/>
  <Button x:Name="Button0" Content="0" Width="210" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="NumberButton_Click"/>
  <Button x:Name="Add" Content="+" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="Add_Click"/>
  <Button x:Name="Subtract" Content="-" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="Subtract_Click"/>
  <Button x:Name="Multiply" Content="X" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="Multiply_Click"/>
  <Button x:Name="Divide" Content="/" Width="100" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="Divide_Click"/>
  <Button x:Name="Equals" Content="=" Width="210" Height="100"
            FontSize="48" Margin="0,0,10,0" 
          Click="Equals_Click"/>
</toolkit:WrapPanel>

Event Handlers

With the layout and UI design complete, it is time to write the logic of the calculator. Turn to MainPage.xaml.cs and notice that there are event handlers that were created and “stubbed-out” by Blend, for example,

private void Clear_Click(
    object sender, 
    System.Windows.RoutedEventArgs e)
{
    // TODO: Add event handler implementation here.
}

Your job, no surprise, is to fill in the event handler implementations. Before we dive into the specific event handlers, we need a few class members. We’ll begin by defining an enumeration named OperatorTypes,

public enum OperatorTypes
{
    None,
    Addition,
    Subtraction,
    Multiplication,
    Division
}

We’ll create a private member variable of type OperatorTypes and initialize its value to None

OperatorTypes operatorType = OperatorTypes.None;

We also need a flag to tell us if we’re dealing with a new value or we’re just adding numerals to an existing value.

Binding and Dependency Properites

We want to bind the number we display to a property and for that we have to register a dependency property. Here’s the syntax, see the linked to article for more on Dependency Properties.

 

public double DisplayNumber
 {
     get { return (double)GetValue(DisplayNumberProperty); }
     set { SetValue(DisplayNumberProperty, value); }
 }

 public static readonly DependencyProperty DisplayNumberProperty = 
    DependencyProperty.Register(
       "DisplayNumber", typeof(double), typeof(MainPage), null);

We’re ready to return to the Xaml and add the binding to the TextBlock,

<TextBlock TextWrapping="Wrap" Text="0" FontSize="48" 
   Foreground="Black" HorizontalAlignment="Right" Margin="0"/>
Replace Text=”0” with the following,
Text="{Binding DisplayNumber}"
At this point the entire TextBlock should look like this,
<TextBlock
    TextWrapping="Wrap"
    Text="{Binding DisplayNumber}"
    Height="58"
    FontSize="48"
    TextAlignment="Right"
    Foreground="{StaticResource PhoneTextBoxForegroundBrush}"
    FontFamily="Segoe WP Semibold" />

 

Notice that we say in the Text property that the Binding is to the DisplayNumber. What is the DisplayNumber? It is a property but of what object? This is answered by setting the DataContext  back in the code behind,

protected override void OnNavigatedTo( 
     System.Windows.Navigation.NavigationEventArgs e )
 {
     DataContext = this;
     DisplayNumber = 0;
 }

 

You can now press F5 to test the databinding.  Next up, Handling Number Click events.

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen online courses. His latest book, Building APIs with .NET will be released early in 2025. Liberty is a Senior SW Engineer for CNH and he was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Microsoft MVP.
This entry was posted in Data, Essentials, Mango, Mini-Tutorial, Patterns & Skills, WindowsPhone and tagged . Bookmark the permalink.