Click here to Skip to main content
11,632,260 members (72,111 online)
Click here to Skip to main content

Writing a Bitmap Button control using the .NET SDK

, 6 Feb 2001 115.1K 271 48
Rate this:
Please Sign up or sign in to vote.
Article on how to write a push button control displaying different images for different user actions
<!-- Link to source file download -->
  • Download source files - 5 Kb
  • <!-- Link to demo file download -->
  • Download demo project - 17 Kb
  • <!-- Article image -->

    Sample Image - BitmapButton.jpg

    <!-- Add the rest of your HTML here -->

    This article is about writing a customized Button control that displays different images when a user moves the mouse over the button, clicks on the button and leaves the button. This control is exactly like CBitmapButton control class available in MFC. The demo project included with this article has a very simple implementation of a derived class from the Button class.

    For every control in Windows, events are fired by the framework for different actions taken by a user in the GUI application. This gives the application a chance to respond to these events and act according to the design and requirements of that control or window. This goes for the Button control too. The Button class is derived from the ButtonBase class. This base class encapsulates most of the typical implementation of event handling. If you do not want to do any customized work on the control, then the base class will handle all of the events for us. Since we want to draw different images on the button for different user actions, the derived class will have to handle the painting of the button window. In the .NET framework, drawing an image on a button control is as simple as attaching an image file resource as one of the properties of the Button class. The property is BackgroundImage. If you do not want to change the image for different actions, then you do not need to derive any special class from base class; in the application’s form, set that property and you are done. For accomplishing drawing of different images, you can make use of another property of the Button class, ImageList. Yes, The ImageList class is very much like the CImageList class in MFC. You can add different images to this list. You can attach an image list to the Button control, and then assign the index of the image in the list to the Button control. The .NET framework will draw that image on the control. You can make use of this concept to change the image on the button corresponding to different actions. The ButtonBase class has a bunch of overridable virtual functions that get called when the mouse moves over the control, a button is clicked or a button goes into the raised position. These methods are PaintDown, PaintRaised and PaintOver. You can supply your own implementation in the derived class to handle these events. Just make sure that you call the base class' method too.

    The implementation of derived control is as follows.

    public class NKBitmapButton : Button
    {
       public NKBitmapButton()
       {
       }
       
       protected override Rectangle OverChangeRectangle 
       {
          get
          {
             return base.ClientRectangle;
          }
       }
       
       protected override void PaintDown (PaintEventArgs pevent, int borderWidth)
       {
          ImageIndex = 1;
          // Call base class method.
          base.PaintDown (pevent, borderWidth);
       }
       
       protected override void PaintOver (PaintEventArgs pevent)
       {
          ImageIndex = 0;
          // Call base class method.
          base.PaintOver (pevent);
       }
       
       protected override void PaintRaised (PaintEventArgs pevent, int borderWidth)
       {
          ImageIndex = 0;
          // Call base class method.
          base.PaintRaised (pevent, borderWidth);
       }
    }

    There is a bug in the .NET framework. The PaintOver method does not get called when the mouse moves over the button control. It only gets called after you have clicked on the button. Therefore I have set the image index back to the one that gets displayed when the button is in the normal raised position.

    How To Use The NKBitmapButton class

    In the windows application, add a button. The Wizard will add an entry into the InitializeComponent method of the Form class. Change the variable type from System.WinForms.Button to NetGUIGoodies.NKBitmapButton. Add an image list to your form. Create two bitmaps of size 48x48 and add them to the list. The image at index 0 will be drawn when the button is in normal raised position and the image at index 1 will be drawn when you click on the button and it is in the down position. To keep the implementation simple I have not added properties or methods to the derived button class to specify size and indices of the images.

    private NetGUIGoodies.NKBitmapButton PictureButton;
    
    private void InitializeComponent()
    {
       this.PictureButton = new NetGUIGoodies.NKBitmapButton ();
       this.ButtonImageList = new System.WinForms.ImageList ();
       .
       .
       PictureButton.ImageList = this.ButtonImageList;
       PictureButton.ImageIndex = 0;
       .
       .
    }

    License

    This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

    A list of licenses authors might use can be found here

    Share

    About the Author

    Naveen K Kohli
    United States United States
    No Biography provided

    You may also be interested in...

    Comments and Discussions

     
    QuestionSDK for .NET Pin
    WilsonLast14-Jun-12 22:40
    memberWilsonLast14-Jun-12 22:40 
    GeneralHELP ME Pin
    Colin30-Aug-01 0:08
    memberColin30-Aug-01 0:08 
    GeneralHello!!! Pin
    Anonymous1-Jun-01 3:18
    memberAnonymous1-Jun-01 3:18 
    GeneralPaintOver/Down/Up, etc... going away Pin
    Chris Anderson28-Jan-01 14:58
    memberChris Anderson28-Jan-01 14:58 
    GeneralRe: PaintOver/Down/Up, etc... going away Pin
    Mav3113-Mar-03 22:36
    memberMav3113-Mar-03 22:36 
    GeneralRe: PaintOver/Down/Up, etc... going away Pin
    Anonymous14-Mar-03 18:46
    sussAnonymous14-Mar-03 18:46 

    General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

    Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

    | Advertise | Privacy | Terms of Use | Mobile
    Web04 | 2.8.150728.1 | Last Updated 7 Feb 2001
    Article Copyright 2001 by Naveen K Kohli
    Everything else Copyright © CodeProject, 1999-2015
    Layout: fixed | fluid