WP7 Chronometer – adding the ‘Application Bar’
I have been waiting to get back to the Windows Phone 7 Chronometer app that I have started to build and blogged about last week. Today’s World Cup Cricket final provides the perfect setting to sit in front of the television to watch the game and get some coding done as well!
My goal today is to add the Application Bar functionality to the application, to use a different timer construct, and also to clean up the code a bit.
Getting the ‘official’ icons
Let me start first by using some professional icons for the application instead of the self-made ones in version 1.
You will find most of the important icons used on the Windows 7 phone already on the system. These come with the Windows Phone 7 developer toolkit, and you will them in the following locations:
- On 32 bit computers – C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons
- On 64 bit computers – C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons
You have both “dark” and “light” versions, I will be using the “dark” versions, as I have the default dark background for my Stop Watch page. I have copied over the following icons and add them to the project for the “save”, “pause”, and “play” functionality in the application, saving them in the “Images” folder
Also, click on each of the icons, and in the properties window, change the “BuildAction” to “Content” from “Resource”
Using a DispatchTimer
In the last post I had used a Timer object. With this object, the callback happens on a different thread. Hence, to access the UI elements of the application, I had to use the Dispatcher.BeginInvoke mechanism on the object to access it. In this post, I will use the DispatchTimer object instead. For this class, the event callback happens on the UI thread itself, and I can access the UI elements directly.
To add the DispatchTimer, I add the following lines
At this point, it is opportune to point out an useful short cut in Visual Studio. To add the event handler for the DispatchTimer object all you do is simply type
timer.Tick += <tab> <tab>
Visual Studio automatically completes the rest of the last instruction shown in the snippet above, and also add the event handler code, below, automatically! I like this short cut!
Changing the display font to a fixed-width type
At this time, I will also make a few clean up changes. I clean up some of the static variables I had introduced earlier. I will also change the font type of the TimerDisplay TextBlock to “Courier New”. This is a “fixed width” font, and it will prevent the perceptible wobbling of the numbers in the timer display for the earlier version – that is, the total width of the displayed text will stay constant with this font, irrespective of the digits displayed. This requires me to change the width of the display block a bit, and I also take the opportunity to change the font color to a shade of blue to add a bit of color!
With this, the main part of the UI, and the properties of the TextBlock are the following
Introducing the Application Bar
In this version I will also introduce the “Application Bar”. It is the bar that sits at the bottom of the screen. The bar supports four icons, and have additional menu items at the bottom. The bar displays just the icons and a “…” symbol on the right (bottom left of the screen) to expand the display bar and display the additional menu items.
The Visual Studio development environment makes it easy to make to bring the application bar into play! Double click on the MainPage.xaml file and check out the bottom of the xaml code – you will see the following xaml code in a comment block
Uncomment the comment block, and you see the Application Bar show up in the XAML designer view, as shown below
I have also cleaned up some of the old timer code and removed the old button that I had in version 1. At this time, you can build the application and run it. You can now see the Application Bar on the screen. The left image below shows the default display, and you can click the “…” icon at the bottom right of the screen and you can see the application bar expand, now showing the names of the two icons used, and also the additional menu items that are included in the XAML code above.
I want to use the first of the icons in the application bar for the “start / pause” toggle for the Stop Watch, and the second one for a “save” functionality that I will introduce a bit later.
To do this, I update the XAML code in the Application Bar segment to change the icons for the first two icons to the play and save icons, comment out the extra menu items which I will not be using in this version, and also add the handler code for the two icon buttons. The XAML code for the Application Bar now looks as follows:
If you use the IntelliSense feature in Visual Studio to add the “Click” property, it will also add the handler code in the backing code file. I have changed the name to the one shown above/below
Building the solution and running it, we can now see the Application Bar displayed with the two icons we have selected.
When you click on the buttons, nothing happens yet, as I have not hooked up the code in the above handler to do the main stop watch logic. However, you will notice that the system automatically provides all of the functionality to “invert” the color of the icon when it is hit, and the subtle up-down motion showing the buttons are clicked.
Putting back the logic for updating the display
We can now put back the code we had in version 1 to update the display, taking care to put the logic in the appropriate event handlers, and accessing the new icons to update the application bar icons.
First I show below the code for clicking the first button in the Application Bar. It simply starts the DispatchTimer and Stopwatch, and simply toggles the icon images for the button from play to pause and vice-versa, and updates the icon text accordingly.
Next, I show the code in the DispatchTimer callback. It simply updates the stopwatch components, and simply updates the Application’s TextBlock display directly from the thread (without having to use Dispatcher.BeginInvoke, as explained earlier in this post).
With this, we have are now back at the functional state we had in Version 1, but with the buttons in the Application Bar. Below are snapshots of the starting, running, and paused states of the application.
Finishing up version 2 for now …
The cricket match is at a very interesting stage now – it is quite tense, the last quarter of the match remains and India seems to be in a bit of discomfort and Sri Lanka has the upper hand. I better get back to paying complete attention and supporting Team India! I will keep evolving the application with further posts …