Jesse Liberty » Mini-Tutorial

Playing A Sound, Simplified

Jesse Liberty — Fri, 27 Jan 2012 16:49:25 +0000

In a previous posting I discussed how to play a sound using a background process. That is great when you need the sound to continue playing even if you leave your application. But much of the time you need something far simpler: just the ability to play a sound and be done with it.

For that, all you need is to add a MediaElement to your Xaml. In the following sample we place two buttons on the MainPage; one to start playing the sound and one to stop it.

The trick is also to add an invisible MediaElement to the Xaml, which will be the control on which you’ll call such methods as Play() and Stop().

Here’s the content panel from the Xaml:

Note that the file I’m using for sound is one I created in Audacity: dtmf.mp3; but you can use any handy .wav, .wma, .mp3 or .aac media file.

In the codebehind we simply reference the Media Element calling its Start() and Stop() buttons respectively.

public MainPage()
{
    InitializeComponent();
}

private void PlayButton_Click( object sender, RoutedEventArgs e )
{
    SoundPlayer.Play();
}

private void StopButton_Click( object sender, RoutedEventArgs e )
{
    SoundPlayer.Stop();
}

That’s all there is to it. If you want to play a different sound than the one you hard coded in the Xaml, you can programmatically change it using the SoundPlayer’s SetSource method.

Calling Navigate From The View Model

Jesse Liberty — Tue, 17 Jan 2012 16:04:01 +0000

Windows Phone Mini-Tutorial

In the third part of the MVVM Light Toolkit Soup To Nuts (part 1 is here) I started with an application that had two pages, and a button on the first that was to cause a navigation to the second page. You can download the starting source code here.

In that article I explained how the VM cannot call the Navigate service, but that you could use messaging to have the View make the call. While that is correct, there is an easier way; which is to grab the rootFrame and to call Navigate on that.

To do this, open the starting application and navigate to the GoToPage2() method that is called by the relay command. Remove the MessageBox and instead add this line to obtain the RootFrame of the current application,

var rootFrame = (App.Current as App).RootFrame;

Once you have that in hand, you can call the navigation service directly from the View Model,

rootFrame.Navigate(
  new System.Uri( "/Views/Page2.xaml", System.UriKind.Relative ));

This greatly simplifies the code and avoids the added complexity of using messaging back to the original page to perform the navigation.

Vibrating the phone

Jesse Liberty — Tue, 03 Jan 2012 17:31:15 +0000

Windows Phone Tutorial

A little vibration added to your application can be just the haptic feedback needed. It turns out that vibration is absurdly easy to add; so much so that discussions of adding vibration typically come with the caveat that you want to use it sparingly; too much of a good thing can make for a very annoying application.

To see how to add vibration to an application, let’s start by creating a new application named Vibrate.

The UI is dead simple, just a button centered on MainPage.xaml,

The event handler for this button will call the Vibrate Controller’s Start method passing in a value for how long to vibrate. You’ll need to add a using statement for Microsoft.Devices.

 void Vibrate_Click(
     object sender,
     RoutedEventArgs e )
 {
     VibrateController.Default.Start(
         TimeSpan.FromMilliseconds( 200 ) );
 }

That’s really all there is to it. Press the button, the phone vibrates. You can imagine using this in a game of course, but also for specific (and startling) feedback in other applications as well.

Binding Formatting

Jesse Liberty — Thu, 29 Dec 2011 17:48:15 +0000

Windows Phone Tutorial

When you are binding data there are additional properties that allow you to format the display and to handle errors and null values.

The StringFormat property allows you to add any standard .NET format string that matches the type you are binding to.

The FallbackValue instructs the binding on what to display if the binding fails.

The TargetNullValue instructs the binding on what to display if the value bound to is null.

To see this at work, let’s create a very simple application with three StackPanels, each holding a prompt and a TextBlock,

Notice that all three TextBlocks use the identical properties except for the name of the property that it will bind to.

In Main.xaml.cs we’ll create a tiny class to act as the data context for the binding,

public partial class MainPage : PhoneApplicationPage
{
    public class Book
    {
        public DateTime? PromisedDate
        {
            get { return DateTime.Now; }
            set { PromisedDate = value; }
        }

        public DateTime? ReturnDate
        {
            get { return null; }
        }
    }

Notice that PromisedDate returns a date, there is no property for DeliveredDate. amd ReturnDate returns null. In the body of Main we’ll instantiate a Book object and set as the page’s DataContext.

public MainPage()
{
    Book b = new Book();
    DataContext = b;
    InitializeComponent();
}

When this is run, PromisedData provides a date which is formatted by the StringFormat property. Because there is no DeliveredDate the binding on that property fails and the FallbackValue is used. Finally, because ReturnDate is null, the TargetNullValue is used for that value. The output is shown in the illustration at the start of this posting.

DecryptR Part 2

Jesse Liberty — Wed, 21 Dec 2011 15:37:03 +0000

In a recent post, I discussed the DecryptR application I have been toying with. While the fundamentals are working, there is much to do. Today I’ll make a few minor improvements.

First, let’s set the font in the list box to a fixed font, so that the columns align better. To do so I’ll open the application in Expression Blend. In the Objects and Timeline I’ll click my way down to Results- the list box and then in the Text properties window I’ll set the font family to Courier New (a fixed width font) and the font size to 24.

Let’s save this as is, and return to Visual Studio. The next job is to implement the event handler for the Configure button. Create a new page Configuration.xaml.

We’ll want prompts and text boxes for the user to fill in how many letters should be used in the game and how many letters in the code. We also want a check box to indicate whether the code should be revealed or printed as asterisks.

Here’s the Xaml for that page’s ContentPanel,

The job of the code-behind is to store these choices for the main page, which we’ll do with Isolated Storage. To do so, create a private member of type Isolated Storage Settings

private IsolatedStorageSettings _isoStorage;

and initialize it in the constructor,

_isoStorage = IsolatedStorageSettings.ApplicationSettings;

All the real work is done in Navigated_From, called when you leave the page (to return to Main.xaml),

protected override void OnNavigatedFrom(
    System.Windows.Navigation.NavigationEventArgs e )
{
    if (_isoStorage.Contains( "NumberOfLetters" ))
        _isoStorage["NumberOfLetters"] = NumLetters.Text;
    else
        _isoStorage.Add( "NumberOfLetters", NumLetters.Text );

    if (_isoStorage.Contains( "SizeOfCode" ))
        _isoStorage["SizeOfCode"] = SizeOfCode.Text;
    else
        _isoStorage.Add( "SizeOfCode", SizeOfCode.Text );

    if (_isoStorage.Contains( "ShowCode" ))
        _isoStorage["ShowCode"] = ShowCode.IsChecked;
    else
        _isoStorage.Add( "ShowCode", ShowCode.IsChecked );
}

With these values tucked away in Isolated Storage we can retrieve them and assign them to the appropriate variables in OnNavigatedTo in MainPage,

protected override void OnNavigatedTo(
    System.Windows.Navigation.NavigationEventArgs e )
{
    if (_isoStorage.Contains( "NumberOfLetters" ))
        Number_Of_Letters =
            int.Parse(_isoStorage["NumberOfLetters"].ToString());

    if (_isoStorage.Contains( "SizeOfCode" ))
        Answer_Size =
            int.Parse( _isoStorage["SizeOfCode"].ToString() );

    if (_isoStorage.Contains( "ShowCode" ))
        ShowCode =
            bool.Parse( _isoStorage["ShowCode"].ToString() );

    string initialRow = GenerateAnswer();
    InterimResults.Add( initialRow );
    Results.ItemsSource = InterimResults;

}

Note that the last three lines (generating the answer and setting the initial row) were moved from the constructor to the bottom of the OnNavigatedTo method.

The small changes greatly enhance the game, allowing the user to set the number of letters in play, the number of letters in the code and whether or not the code is revealed.

DecryptR–A Glass House Application

Jesse Liberty — Mon, 12 Dec 2011 20:40:16 +0000

Periodically, I like to build a “glass house” application – that is one which I document as I go, hiding nothing and showing all the thinking that goes into the application as well as the raw, not ready-for-production code along the way.

DecryptR

DecryptR is a game, but one which will illustrate a number of Mango features. It will not be written in XNA, but rather will be written in Xaml and C#.

The idea of the game is that the computer thinks of a code, using n of the first m letters of the alphabet (where n and m are configurable). Thus, we might decide that it will use 6 of the first 8 letters (A-H). The code does not duplicate letters, so a typical code might be ACBFED but of course the code is not displayed. Your job is to break the code. Each “turn” you put in 6 letters and Decrypter tells you how many you matched, and how many were in the right position.

Thus, if the code is ACBFED and you put in BCAFDH the response would be 5,1, because five of your letters are in the code (BCAFD) and one (F) is in the right position.

Eventually, we will make a beautiful UI for this game, allowing the user to pick letters from tiles, and to have the tiles animate as they appear, with the results displayed nicely. For now, we want to make do with the simplest UI that will work.

What? No MVVM?

Another glass house application that I’m working on with Jon Galloway (as part of the Full Stack Project) is being written test-first and with MVVM. I’ve decided to write this application in the get it working and keep it working design pattern, making use of code-behind rather than creating VMs.

YAGNI

The idea of get it working and keep it working is to create something simple that works, and then to progressively refine it and to add features as needed. Get it working and keep it working also subscribes to YAGNI – You Ain’t Gonna’ Need It, which says not to add a feature until the last possible minute, as you may never need it after all.

The Core

Step 1 in get it working and keep it working is to build just enough UI to be able to put in guesses and get results. That requires

A TextBox to enter each guess
A Button to say “accept and score this guess”
A List Box to show all the guesses and their scores

Here’s the Xaml for the content panel,

The basic application consists of two major areas of functionality:

Setting up the code using a random number generator
Scoring the user’s guesses

Setting Up The Code

To get started, we need a number of members and properties. For example, we need a collection to hold the correct answer

private List answer = new List();

We also need a collection of the guesses that we can set as the ItemsSource of the list box. Rather than fussing with INotifyPropertyChanged, we can make the collection and ObservableCollection and notification is handled automagically.

public ObservableCollection InterimResults =
    new ObservableCollection();

Finally, we need a number of constants that we’ll implement as properties so that we can, eventually, configure these from a configuration page (and then from isolated storage) [YAGNI alert!]

public int Answer_Size { get; set; }
public int Number_Of_Letters { get; set; }
private List alphabet = new List
   { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
     'I', 'J', 'K', 'L', 'M' };

The constants are initialized in the constructor, where a call is also made to GenerateAnswer() – the method responsible for generating the code and stashing it away in the answer member.

private string GenerateAnswer()
{
    Random r = new Random();
    StringBuilder sb = new StringBuilder();
    for (;;)
    {
        int alphaOffset = r.Next( Number_Of_Letters );
        if (answer.Contains( alphabet[alphaOffset] ))
            continue;

        // sb.Append( '*' );
        sb.Append( alphabet[alphaOffset] );

        answer.Add( alphabet[alphaOffset] );
        if (answer.Count == Answer_Size)
            break;
    }
    sb.Append("\t\t?\t?");
    return sb.ToString();
}

We begin by creating an instance of Random, which will generate random numbers, and a StringBuilder to build up the answer string. We then iterate in a forever loop, randomly generating offsets of 0 through the Number of Letters that we’re using as our answer pool (minus one due to the zero offset).

As we get unique letters, we add them to the answer, and we add them to the StringBuilder. Note that right now, while we’re creating the project, we’re displaying the code on the first line, but once we are ready to play we’ll comment that out and use the asterisk instead.

Here’s the complete constructor, for context:

public MainPage()
{
    InitializeComponent();
    // TODO: Get from configuration
    Answer_Size = 6;
    Number_Of_Letters = 8;
    Duplicates = false;  //YAGNI?

    string initialRow = GenerateAnswer();
    InterimResults.Add( initialRow );
    Results.ItemsSource = InterimResults;

    Go.Click += new System.Windows.RoutedEventHandler( Go_Click );
}

Notice that the string returned from GenerateAnswer becomes the first string in the collection, and the collection is set as the ItemsSource for the list box.

The only remaining work is to set up the event handler on the Go Button.

Go Button Event Handler

When the user clicks Go we have a guess, which we then need to compare to the answer. Our first job is to make sure that the guess is not null and that there are exactly n characters in the guess,

void Go_Click( object sender, System.Windows.RoutedEventArgs e )
{
    string guess = Entry.Text.ToUpper();
    Entry.Text = string.Empty;
    if (string.IsNullOrEmpty( guess ) ||
           guess.Length != Answer_Size)
    {
        MessageBox.Show(
           "Must be " + Answer_Size.ToString() + " characters." );
        return;
    }

We’re now ready to count the matches. We do this with an outer loop (looping over each guess) and an inner loop (looping over each letter in the answer). If the letter is found, we have a match; if the offsets are the same then we also match position.

int totalFound = 0;
int totalPosition = 0;

for (int i = 0; i < Answer_Size; i++)
{
    for (int j = 0; j < Answer_Size; j++)
    {
        if (guess[i] == answer[j])
        {
            totalFound++;

            if (i == j)
            {
                totalPosition++;
            }
            continue;
        }
    }
}

with that in hand, we’re ready to form the string that will be put into the list box, and if all six were found in the right position, we congratulate the player,

string interimResult =
    guess +
    "\t\t" +
    totalFound.ToString() +
    "\t" +
    totalPosition.ToString();
InterimResults.Add( interimResult );

if (totalFound == totalPosition
    && totalFound == Answer_Size)
{
    MessageBox.Show( "You win!" );
}

We’re done. There are plenty of features to add, and much work to do on the UI, but this is now an entirely playable game. Change GenerateAnswer to hide the code, and give it a whirl.

Context Menu

Jesse Liberty — Wed, 30 Nov 2011 12:39:00 +0000

Windows Phone Tutorial

The Silverlight For Windows Phone Toolkit is a magnificent collection of controls and utilities for writing Windows Phone applications. Unfortunately, there is little or no documentation, and the samples, while wonderful, are quite complex. At times, it is difficult to tease out how to use a control; how to “just make it work.”

As I have done in previous mini-tutorials, this posting will show one of the toolkit controls stripped down to its bare essentials. Creating a context menu, and responding to the user’s choice in the menu turns out to be wicked easy.

To get started, create a new Mango application. On MainPage we’re going to add a StackPanel which in turn will hold two things:

An inner StackPanel to show the menu choice
A button which will have a context-menu.

Within the declaration of the button we’ll declare a ContextMenu

That’s all there is to it, except handling the click of a Menu item. All we want to do, in this case, is ask the sender for its text, and display that in the TextBlock above the button. Here’s the code:

private void MenuItem_Click( object sender, RoutedEventArgs e )
{
    lastSelection.Text =
        ((( MenuItem ) sender).Header).ToString();
}

Beautiful Page Transitions (Practically) Free

Jesse Liberty — Tue, 29 Nov 2011 16:48:58 +0000

Windows Phone Tutorial

I don’t just mean you don’t pay for the code, or the control, I mean we’re talking about 2 minutes of effort. No joke.

Step 1 is to download the November Windows Phone Toolkit and install it

Step 2 is to create a new application with two pages. Add a button to the first page and in the click even handler for the button navigate to page 2,

private void button1_Click( object sender, RoutedEventArgs e )
{
    NavigationService.Navigate(
        new Uri( "/Page2.xaml", UriKind.Relative ) );
}

Run the application and note that the transition between page 1 and 2 is instantaneous and does not have that nice Metro feel to it.

Now, make three changes. First, in App.xaml.cs locate

RootFrame = new PhoneApplicationFrame();

and replace it with

RootFrame = new TransitionFrame();

Second, at the top of both pages place this namespace definition.

Note, if you drag any control from the toolkit onto your page, the system will generate this namespace definition for you automatically.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
   assembly=Microsoft.Phone.Controls.Toolkit">

Finally, add the following Xaml to each page (above the LayoutRoot),

Run the application. You should see a much nicer transition now between your first and second page. That’s really all there is to it.

You can of course use the toolkit to create other kinds of transitions, and even your own transitions, but here you have beautiful Metro-style transitions with 2 minutes effort.

New Mini-Tutorial Video Series

Jesse Liberty — Fri, 04 Nov 2011 18:14:03 +0000

I’m very pleased to announce that I’m starting a new video series based on my mini tutorials about Windows phone mango. These will all be posted on Channel 9 and you can also find them listed alphabetically on my Windows Phone Videos page.

The first of the series is on animation for Windows phone without code…

Find links to the rest of the series here.

First six videos:

The Full Stack, Phase 2–Overview

Jesse Liberty — Wed, 02 Nov 2011 18:48:57 +0000

Windows Phone Tutorial

Last year Jon Galloway and I launched the Full Stack experiment,in which we video-documented the creation of a nontrivial application.

Today we begin the second phase of this experiment, building a new application that will have implementations or related applications on the following platforms:

Windows phone 7.5
ASP.net MVC
HTML 5/JavaScript
Windows 8

For this phase not only will we be creating a video-documentation record, but I will also be documenting all of my progress and all the work that I’m doing in this series of blog posts.

Pomodoro Timer

The application we will be building is a Pomodoro timer, with a few extra features. The Pomodoro timer is used as part of the Pomodoro technique, created in the late 1980s by Francesco Cirillo and fully documented on the Pomodoro technique homepage.

The essential aspects of using the Pomodoro technique are:

work without accepting any interruptions for 25 min
(25 minutes of work is called 1 Pomodoro)
take a 5 min. break
every fourth Pomodoro take a 20 min. break

Before you begin working on your Pomodoro’s for the day, your first task is to determine what all of your tasks for the day will be, assign estimated Pomodoros to each task and then begin working through the task list in priority order.

Please note, this is my interpretation of the essence of the Pomodoro technique; Pomodoro experts may very well disagree.

Building the Pomodoro Timer

It is our intent to make extensive use of unit testing, and to a degree test driven development. We will also be building this application using the MVVM design pattern.

To get started however, and to explore some of the primary user experience issues, I opted to spike a quick and dirty application which will serve both to explore implementation issues, and as a working spec (see figure at the start of this post). The spiked version will be the subject of the next couple posts in this series.

Application Features

Among the features that will be implemented for this timer are

countdown from 25 min.
pause for 5 min.
all timing is configurable
keep track of blown and completed Pomodoro’s
track notes for interruptions
reminder after five-minute break even when not in foreground
optional ticking sound, even when not in foreground
reports
editable task list
server-based report generation
sharing status across platforms

We expect to implement the same or similar UI and features on the phone, on the web, and on the desktop. All of these will be coordinated by a hosting service written in ASP.net MVC.

All of the entries in this series will be catalogued in the min-tutorial homepage, under the word Pomodoro, and in chronological order.

[Dictated to Dragon Dictation. Apologies for errors]