RegionControl - Usage tutorial

This tutorial will teach you the basic steps in using RegionControl Silverlight component for Windows Phone 7 operating system. It is divided into the following sections:

1. Idea of RegionControl
2. How it works
3. What it is useful for
4. Designing RegionControl
5. Using RegionControl during run-time

Idea of RegionControl

The idea of RegionControl is to allow the developers to divide the client area into regions of arbitrary shape. The user of the application would be able to click/tap any of these regions and the clicked/tapped region would become highlighted. The developer is free to decide how many regions he would like to have, what their shape should be and how they will look like when they are highlighted and when they are not highlighted.

How it works

You provide three images:

• Normal Image – is displayed by default by RegionControl. It defines how the regions look when they ARE NOT SELECTED.
• Selected Image – defines how the regions look when they ARE SELECTED.
• Image Mask – defines the shapes of the regions.

For example:

Normal Image	Selected Image	Image Mask

Let’s say the user clicked the printer icon. RegionControl first looks find out the coordinates of the clicked point within the normal image. It then looks into Image Mask at the same coordinates. It sees a dark gray color there. RegionControl then takes all coordinates of all pixels of this same dark gray color in Image Mask. This set of all pixels of the same color make up a region. The region does not have to be contiguous. RegionControl finally looks into Selected Image at the pixels which belong to the region. It then displays the region of these pixels (taken out from Selected Image) inside the Normal Image.

What it is useful for

RegionControl can be used in many scenarios. We will give you a few examples for inspiration:

Country picker

You would like the user to select a state from USA. Instead of populating a ComboBox with a list of all states, you would display a map and let the user select the state from the map (the idea is applicable to European-Union states, African states Asian states) or any other kind of map for that matter (selection of country districts or other territory).

Fancy menu

Tired of creating menu items of rectangular shape? Why not to give them a shape of hexagon? See the images in How it works section for inspiration.

Human body part selector

Let’s say you are an agent who came to a traffic accident site and wishes to document the damage done to people. Display a human body and let the user tap a particular part to choose that body part quickly using his mobile device.

Similar to the previous example, but this time document the damage done to a vehicle automobile.

Stadium sector selector

Creating an application for seat reservation on a stadium, cinema, theater, etc. ? You can use the RegionControl to let the user choose a sector and seat quickly by drawing a small clickable map of the stadium and its seats.

Designing RegionControl

Before going on with this chapter, make sure you have Visual Studio 2010 installed with Windows Phone 7 development SDK and Bee Mobile Metropolis (you can get a free trial version here).

1. Start Visual Studio 2010 and create a new Windows Phone Application project. Give it a name e.g., “RegionControlTutorial”.
2. Display the Toolbox of your Visual Studio (if it’s not displayed) by clicking View->Toolbox
3. If Bee Mobile Metropolis components are not in your Toolbox, use Windows Explorer to navigate to the installation directory of Bee Mobile Metropolis (typically c:\program files (x86)\Bee Mobile\Metropolis) and locate AddControlsToToolbox.pdf file. Read the instructions in it to put Bee Mobile Metropolis components to your Toolbox.
4. Double click RegionControl to put it to your page. You can also rename the heading which is by default in the Textblock on your Page from MY  APPLICATION to e.g., “RegionControl Tutorial”. If you downloaded and installed the trial version of RegionControl, you will see a “Trial version” notification  written with red font over RegionControl.
5. We will use the 3 images from How it works chapter for this tutorial. You can download them to your hard drive from this web site.
6. Display the properties of RegionControl by right-clicking it on your page and  choosing properties from the context menu.
7. Look for NormalPNG property and assign the normal image to it. You will notice that the image has appeared over RegionControl. Resize RegionControl to  the same dimensions as the dimensions of this normal image are – 240×268 pixels.
8. Use the same procedure to assign images to SelectedPNG and MaskPNG properties.
9. Compile and run your project.

Using RegionControl during run-time

Your emulator should now display your application with RegionControl. If you click the  menu items they will highlight themselves in red just like on the Selected Image:

But how do we find out when the user clicked a region? That is what SelectedColorChanged event is for! Simply handle the event. The event handler’s e parameter tells us in its NewlySelectedColor property the RGB code of the region in the Image Mask. Based on that we know what region the user has clicked.

This concludes the tutorial for RegionControl for WP7. Please send your feedback to support@beemobile4.net.