As I continue working, slowly, on the Pay It Square app for Windows Phone 7 one of my points of emphasis is the UI and the design experience.  One thing that I have learned is that, unlike Android, WP7 does not give you a whole lot, even with the Toolkit, for certain effects; for example modals and overlays.

This is not a huge problem though, as the XAML gives you an incredible amount of flexibility in designing the look and feel of an application.  So, while the controls may not come pre-built, we still have the opportunity to build our own.  The following is an example of the Pay It Square Overlay in action:

This produces a very nice effect which keeps the user informed and prevents them from making a double request.  The code to produce this effect is quite simple.

Microsoft provides the System.Windows.Controls.Primitives namespace which contains all sorts of goodness and pieces that you can use to make your own controls.  Among these controls is the Popup class.  This class allows you to create the popup effect for the screen, enabling custom dialogs.  The class itself is incredibly simple to use:

   1: Popup dialogPopup = new Popup() {Child = new ProgressDialog()};

   2: dialogPopup.IsOpen = true;

By setting the Child property of Popup you are telling the Popup which content will “pop up”.  I am still trying to figure out a way to get away from referencing ProgressDialog, which is a custom User Control that I created.

Using the Popup instance will NOT give you the overlay that you see above.  The Popup only allows content to be displayed in a “popup” type fashion.  You still need to create that effect yourself, this is one of the problems I have with Windows Phone 7.  It is nice to have the ability to customize things to your hearts content, but at times, you want to just things out of the box easily.

The XAML to get this effect is below:

The idea here is to create a non-opaque rectangle with a custom filling.  This rectangle is locked into the first row and first column of the LayoutRoot Grid.  This rectangle is then extended to cover the entire screen.  Then a StackPanel is defined after which will place the content on top of the grid.

From this point, you use the IsOpen property to control whether the Popup content is visible or not.

As a side note, I don’t fully like this implementation completely because it relies on an externally defined user control. I would prefer to avoid this type of coupling.  Still working on that.