KB_Soft Group - Software Vendor's Development Partner
Start page
Site map
Contacts
   



   

Introduction

When implementing one of the projects, we faced with a necessity of controls of an arbitrary (convex) shape. The shape should not only influence the appearance, but also determine what region of the control should response to the mouse activity. There should be some restrictions concerning the region: it should have no cavities and should be convex. The meaning of the restrictions will be described in details below. For the control to be conveniently used we decided to specify its shape with the help of an image

 

(a 32-bit bitmap). The control�s boundary is presented in the picture as a closed line. The control is extracted from the image during the analysis as a sequence of points defining the curve. The region restricted by the curve is a client�s resulting region of the control. The control�s functionality is implemented in the convenient SkinControl base class. By inheriting a control from it, You may create your own controls that have a non-standard shape.


   

Using the controls inherited from the SkinControl class

The project available for download presents three controls implemented by the KB_Soft Group company for its internal needs. These controls are based on the SkinControl common base class and are described below:
  • KBSoft.Components.SkinButton � the button, which appearance is defined by four images (one for each state � pressed, disabled, hot and normal).
  • KBSoft.Components.SkinTextbox � the text box, which appearance and boundaries are specified by an image.
  • KBSoft.Components.Skintooltip � the pop-up window supporting the first two controls placed on it. Has a number of animations.

    The SkinControl base class has the following properties and methods:
  • PatternBitmap � the property setting the image, which boundaries will be a source of information for forming the region that restricts the control.
 
  • TransparentColor � the color defining the region of the image, which is specified by the PatternBitmap property, that is not included to the control.
  • UseCashing � being set, the property indicates that the control�s region is calculated only once during the first creation and after that it is stored to the static collection that allows the time for the repeated control�s initialization to be considerably shortened.

    The SkinControl class is inherited from the UserControl class and implements the ISupportInitialize interface. The EndInit method calculates the control�s region if the UseCashing flag is not set. The method is automatically added to the code of the control�s initialization when it is created with the help of the VisualStulio 2003 designer. Given below is an example of manual creation the SkinButton button without using the shape designer.
   

First create a new windows-application and add the main window class (Form1, by default) a new variable:

private KBSoft.Components.SkinButton skinButton = null;

Then add the constructor the following code:

//creating an object.
skinButton = new SkinButton();

//setting the color that defines the image�s regions that should be excluded.
skinButton = new SkinButton();

//the control�s location.
skinButton.Location = new Point;

//getting an image from the resources. Do not forget that it is formed in VS 
//7.1 as a name of the default namespace + name of all the folders in 
//Solution Explorer that contain the resource + the resource name.

Assembly currentAssembly = Assembly GetAssembly( this.GetType() );
Bitmap bmp = (Bitmap)Bitmap.FromStream( 
    currentAssembly.GetManifestResourceStream( "TestControls.Power.png" ) );

//Setting the image � the pattern for calculating the control�s regions.
skinButton.PatternBitmap = bmp;

//Setting the image that is displayed in the initial state of the button.
skinButton.NormalImage = bmp;

//The image for the pressed state.
skinButton.PressedImage = (Bitmap)Bitmap.FromStream( 
    currentAssembly.GetManifestResourceStream("TestControls.Power_p.png");
);

//The image for the disabled state.
skinButton.DisabledImage = (Bitmap)Bitmap.FromStream( 
    currentAssembly( GetManifestResourceStream( "TestControls.Power_d.png" ) );
    
//The image for the hot state.
skinButton.HotImage = (Bitmap)Bitmap.FromStream( 
    currentAssembly.GetManifestResourceStream( "TestControls.Power_f.png" ) );
    
//Calling the method performing the needed calculations.
skinButton.EndInit();

//Don�t forget to define which window owns our button.
skinButton.Parent = this;

The result of the application work is presented in the picture below:

     

A simpler way is to add the dll containing the components to the toolbox and to set all the control�s properties from the property window.

   

The description of the bitmap scan algorithm

To reach the effect shown in the screenshots a rather simple approach is used, which is shown in the picture. Shown in the picture is the initial image. Let the white color be set as a color for cutting off. Scan of the image is performed pixel by pixel, line by line. Pixels enumeration stops when the pixel with the color that does not coincide with the color set for cutting off is found. The pixel�s coordinates are kept. First scanning from left to right the pass from up to down is performed, as a result the left boundary of the image is obtained; after that it goes from down to up scanning the pixels from left to right, as a result the right boundary is obtained.
 



   

Given below is the code of the function performing these operations:

public void UpdateRegion()
{
    if( patternBitmap == null )
        return;

    ArrayList pts = new ArrayList();

    Color pixelColor;
			
	//Getting the rectangular region of the control
    Region region = new Region( this.ClientRectangle );
			
    //Scanning the patternBitmap bitmap from the zero string from left to right.
    //If we find a pixel that is not transparent and does not coincide with the 
    //transparent color, we add it to the list of the points of the future 
    //boundary that bounds the control.
    for( int i = 0; i< patternBitmap.Height; i++)
    {
        for( int j = 0; j< patternBitmap.Width; j++ )
        {		
            pixelColor = patternBitmap.GetPixel( j,i );

            if( pixelColor != transparentColor && pixelColor.A != 0 )
            {
                pts.Add( new Point(j,i) );
                break;
            }			
        }
    }

    //correcting the lower bound of the boundary for storing a pixel of the image.
    Point last = (Point)pts[pts.Count-1];
    Point dop = new Point( last.X, last.Y +1 );

    pts.Add(dop);
    bool addDopPoint = true;
	
    // Do the same from right to left beginning from the last (lower)
    // string of pixels for obtaining the right bound of the outline.
    for( int i = patternBitmap.Height -1; i>=0; i-- )
    {
        for( int j = patternBitmap.Width-1; j>=0; j-- )
        {
            pixelColor = patternBitmap.GetPixel( j,i );
            if( pixelColor != transparentColor && pixelColor.A != 0 )
            {
                if( addDopPoint == true )
                {
                    addDopPoint = false;
                    pts.Add( new Point(j+1,i+1) );
                }

                pts.Add( new Point(j,i) );
                break;
            }
        }
    }

    //closing the outline.
    pts.Add( new Point( ((Point)pts[0]).X, ((Point)pts[0]).Y ) )  ;
			

    //putting the resulting points to the array of points.
    Point[] pp = new Point[pts.Count];
    for( int i=0; i< pts.Count; i++ )
    pp[i] = (Point)pts[i];

    //creating the GraphicsPath object basing on the array of points.
    controlArea = new GraphicsPath();
    controlArea.AddLines( pp );

    //Search the intersection of the initial region of the control with 
    //the found closed outline and set the resulting region as the 
    //control's region.
    region.Intersect( controlArea );
    this.Region = region;
			
    this.Invalidate();
    this.Update();

}
    Reading pixels is performed with the help of the GetPixel(int i, int j) function of the Color class. When all boundary pixels are found, the closed outline is built basing on them with the help of the GraphicsPath class. Then the resulting control�s region is built formed by the intersection of the interior of the region and the initial rectangular region of the control with the help of the Intersect() function of the Region class. It is important to note that the control�s shape should imply that the line
 

drawn along the line of pixels should intersect the boundary only in two places. That is why, for example, the button with cavities can�t be created with the help of the algorithm. The choice of the simplified algorithm may be explained by the functionality being enough for KB_Soft Group. Besides, the algorithm of line scan of the bitmap is the fastest. You may modify the UpdateRegion() function to extend the functionality of the controls described above.