Level Gauge and Custom MessageBox

• Download source files - 262 Kb
• Download demo project - 182 Kb

Introduction

I was developing a point of sales application and realized a graphical display of stock available was a good idea so i tried to develop a control for that. There was the need to also have some colour variations in relation to the level so a user could tell outrightly when stock is ok, just low or critically low. Some animation ("flow") when getting to the value given it wasn't a bad idea :), so i added it.The Message box became useful after i had completely skinned my application and realized the "hard" looking microsoft message box was like "a fish out of water" in my software. But because we can't do without message boxes, i had to make one to match my skin, so i did that. I must say because these were made for my application, even though they're flexible, more feature will be added to make them even more flexible. That will be soon in version 2.0..

Using the code

It's pretty simple to use the controls. All you need to do is to reference the project (if using the source code in your solution) or reference the .dll. In Visual Studio 2005 the controls will appear in the Toolbox under "JemControls V1.0 Components". Drug any of the two onto the form and the use it as a normal control. For the message box, remember to set it visibility property to FALSE even though not doing so doesn't hurt. Now let's go through the details.

Namespace:   JemControls (Both reside in this namespace)

Classes: JemLevelGuage (for Level Gauge) and JemMessageBox (for messagebox)

Enumerations:   myMessageButtons, myMessageResult, myMessageType (All these enumerations are used with JemMessageBox)

Public Properties: 

      JemMessageBox:

            TitleImage     Type: Image    Sets and Gets

           ButtonImage     Type: Image    Sets and Gets

           ButtonRollImage     Type: Image    Sets and Gets

        JemLevelGauge:

              LevelHeight     Type: double    Gets

              MaxValue     Type: double    Sets and Gets

              MinValue     Type: double    Sets and Gets

              LowValue     Type: double    Sets and Gets

              CriticalValue     Type: double    Sets and Gets

    Public Methods:

          JemMessageBox:

                public void setBackImages(Image TitleImage, Image ButtonImage, Image ButtonRollImage)

                public void setBackImages(Image TitleImage, Image ButtonImage)

                public void setBackImages(Image TitleImage)

                public myMessageResult Message(string theInformation, string theTitle, myMessageType theType, myMessageButtons theButton)

                public myMessageResult Message(string theInformation, string theTitle, myMessageType theType)

         JemLevelGauge:

                  public void setNewValue(string val)

                  public void setNewValue(double val)

Descrption

JemMessageBox:

All the properties are images and their names suggest where they'll be going. The images will be eventually stretched on the controls so add that to the design. There is one for the Title picture box. No writing is done on the title picture box but a step below it, it's just for beautification. The button background images, buttonImage and buttonRollImage, are for the button's background and the background when the mouse enters respectively. If no images are set, it won't come out very nicely because i didn't give any default images. I will set then in version 2.0.

There two main public functions for setting the properties and getting results from the messagebox. "setBackImages" is overloaded for setting the various images. To pass to any image parameter or property from file, you can use "System.Drawing.Image.Fromfile(string path)" to load it. The overloaded "setBackImages" with two parameters uses the same buttonImage for rollover, hence there is no rollover effect and the image remains. You may ignore the "setBackImages" methods and pass in the images using the properties. The "Message" method is used to display a message and return a result which is of type myMessageResult, an enum in the "JemControls" namespace.

JemLevelGauge:

All the properties here are doubles. The level height just gives the height of the guage at anytime. I will modify it to give percentage instead of version 2.0. The "maxValue" is for the maximum value(double) that the level can ever get (it's 100% value), the default is 100. Say you want to put a guage on the number of days in July. The "maxValue" will be 31 and "minValue" will be 1. The "lowValue" value indicates where the level's colour will turn yellow. "criticalValue" indicates where the the level's colour will turn Red. The colours are actually images saved as resources to give it a roundish effect. Because of this there are only three colours. If you don't want to see any colour, set its related value to 0. Red is critical low, yellow is low, green can't be done without. Hope to make things more flexible in version 2.0.

There is only one public method which is overloaded, "setNewValue", which takes a double or a string. This value will move the gauge to a relative location with reference to the maximum value and minimum value you set.

 

Points of Interest

There is a funny behaviour with the level gauge when it is droped in a groupbox. Its becomes big and i haven't looked at the problem yet. It could be some settings of the groupbox or the control, i'll look at that later. However if you want it to "appear" within a groupbox, then drop it on the form and use the direction keys on the keyboard to move it "into" the groupbox, using the mouse will make it really enter.

I also realized code put in the form load method of the control is executed when the code is dropped on a form. This might be pretty obvious but it wasn't to me when i was doing it and gave me some confusing results earlier.

A boolean variable, "firstrun", was used by the "setNewValue" methods to pick initial height and botton values of the level picture box. This was done because i realized the real values of that particular instance of the JemLevelGauge could be elusive, maybe i wasn't picking from the right event handler. Even form load gave creation time values, not the values of the dropped level gauge-that can change due to resizing. So i picked the real values when you first asign a guage value to it, and then never picked again by setting "firstrun" to false.

History

This is the first version. Hope to have more details in version 2. The code is also very simple to follow. Enjoy using it.