RegionControl - Usage tutorial

Idea of RegionControl

We wanted the developers to be able to create buttons with any shape and look. So we thought – let them paint the buttons themselves. And we did. The control then just displays the image they painted. So let’s say you create your image with the buttons and it looks like this:

Let's call this image a Normal Image.

But how does RegionControl know whether a button was clicked if all it’s doing is that it is displaying an image? Well, the developer has to let it know where the boundaries of the buttons are. Sow how would he do it? Well, he would paint those boundaries:

Let's call this image an Image Mask.

In image mask, all pixels that are not white symbolize a region. So in this mask we have red region, yellow region, etc. Now if the user clicks the Normal Image, RegionControl checks whether the clicked pixel is part of a region. If it is, then all pixels that are part of the region are substituted with pixels from a so called – Selected Image:

Selected Image defines the look of pressed buttons.

Putting the idea to work with RegionControl

1. Put RegionControl on the form of your project.
2. Set BmpNormal property to the Normal Image.
3. Set BmpSelected property to the Selected Image.
4. FilePathBmpMask property contains path to the Image Mask. Therefore you should add that image to your project (so that it appears in Solution Explorer), right click it, choose properties and:
   1. Set Build Action -> Content
   2. Set Copy to Output Directory -> Copy if newer
5. Set MultSelectionEnabled to true, if you want to enable multiselection.
6. Handle the SelectedColorChanged event. When the event fires, check the SelectedColor property of RegionControl. It contains the color of the pixel on the ImageMask which has been clicked. That is how you can find out what region has been clicked.

If you have any questions or ideas how to improve this tutorial, please let us know by writing to support@beemobile4.net.