TABLE OF CONTENTS

La Volpe Buttons vH.1

(Horizontal Version)

 

Appearances

      ButtonShape (Overall shape of the button, including custom shaped buttons)

      ButtonStyle (Operating System Style)

      Caption (Button Text)

      CaptionAlign (Text Alignment)

      CaptionStyle (Text Effects)

      CustomClick (Optional click style for Custom-Shaped buttons)

      Enabled

      Font (Text Font)

      FontStyle (Font Attributes)

      Mode (Command button, option button or checkbox styles)

      ShowFocusRect (Highlight option when button has focus)

      Value (Only applicable for Option Button and CheckBox Modes)

 

Colors

      BackColor (Button background color)

      ForeColor (Text color)

      GradientColor (Button background gradient color)

      GradientMode (Gradient direction)

      HoverBackColor (Button background color when mouse is over the button)

      HoverForeColor (Text color when mouse is over the button)

      HoverColorLocks (Forces various colors to synchronize)

      ResetDefaultColors (Resets all button colors to Window standard colors)

 

Images

      MouseIcon (Custom image to display when mouse is over the button)

      MousePointer (Standard images to display when mouse is over the button)

      Picture (Image to display on the button)

      PictureAlign (Image alignment)

      PictureSize (Image size)

     

Functions

      DelayDrawing (Halts drawing while changing multiple button properties)

      Refresh (Redraws the button on demand)

 

Window Events and Properties

      Events (Button events returned to parent control)

      hWnd (Read-only value of the button’s window handle)

      hDC (Read-only value of the button’s device context handle)

 

Compiling Requirements

 

 

^Top.  ButtonShape (Overall shape of the button). There are three basic shapes, a custom shape and variations of those shapes.

           

            0. lv_Rectangular.  Default. The button will have a rectangular shape

            1. lv_LeftDiagonal. The button will have a rectangular shape with a diagonal edge on the left side

            2. lv_RightDiagonal. The button will have a rectangular shape with a diagonal edge on the right side

            3. lv_FullDiagonal. The button will have a rectangular shape with a diagonal edge on both the left and right sides

            4. lv_Round3D. The button will have a round or oval shape with a 3D border. The border alternates from light to dark shades when clicked.

            5. lv_Round3Dfixed. No longer applicable. Now is the same as lv_Round3D.

            6. lv_RoundFlat. The button will have a round shape with a flat, one-pixel black border.

            7. lv_CustomFlat. The button takes the shape of the picture assigned to it. The border color is the BackColor property.  See Notes

            8. lv_Custom3Dborder. The button takes the shape of the Picture assigned to it. A 3D border is applied. See Notes.

 

Programmer Notes for button shapes #7 and #8 above.

1. A picture property must be assigned before the button shape is selected

2. Icons are not valid pictures. Bitmaps & JPEGs will give the best results

3. Captions on these buttons are only shown if the button mode is lv_OptionButton or lv_CheckBox and the Value property is True

4. By default the visual click action is accomplished by reducing the image and showing the smaller image while the button is down. Optionally, you can make the click action move the button in one of eight directions.  See CustomClick property.

5. lv_CustomFlat buttons uses the BackColor property for the outline border.

6. The transparency color for the image is always the top left corner pixel color. If needed, you should add a 1 pixel border to your image.

7. Since the images are scaled to fit the button size, the best results are achieved when the image size is close to the actual button size.

 

^Top.  ButtonStyle (Operating System Style). These button styles imitate the operating system or language they are associated with. Note that it is not the author’s intention to perfectly replicate the button. In fact the author has taken some liberties for purposes of either visual affects or code streamlining. The following buttons modify the color settings by either making the color lighter or darker: lv_XP, lv_Machintosh, lv_Java.

 

            0. lv_w95.  Default. Imitates buttons between versions 95/98/ME/NT inclusively

            1. lv_w31. Windows 3.1

            2. lv_XP. Windows XP

            3. lv_Java. Java

            4. lv_Flat. Flat-style buttons

            5. lv_Hover. Mouse-over, hover-style buttons

            6. lv_Netscape. Netscape

            7. lv_Macintosh. Macintosh

 

Programmer notes. Since hover buttons have no border until the mouse is over the button, the button will have a dotted or dashed border in design mode only. This can aid in positioning the button since the edges can be seen.

 

^Top.  Caption (Button Text). The caption follows the same rules as typical command buttons, including the assignment of accelerator keys identified by an ampersand (&) symbol.  In addition, the control allows line breaks to be embedded within the caption.  The use of a double pipe symbol ( || ) is replaced with a line break.  Example:  Two Line||Caption would be displayed as   Two Line

                                                                                                      Caption

 

Programmer Notes. Captions on custom-shaped buttons are only shown if the button mode is lv_OptionButton or lv_CheckBox and the Value property is True

 

^Top.  CaptionAlign (Text Alignment). There are three basic caption alignment options. Also see PictureAlign as this property may affect the placement of the caption.

 

            0. lv_LeftJustify.  Default. Places the left edge of the caption against the left edge of the button

            1. lv_RightJustify.  Places the right edge of the caption against the right edge of the button

            2. lv_Center.  Places the caption in the center of the button.

 

^Top.  CaptionStyle (Text Effects). There are two special effects that can be applied to button captions. Note. Effects are more apparent when dark text is placed on a lighter shade background. In addition, text effects are not applied to disabled buttons.

 

            0. lv_Default.  Default. Text has no effects applied.

            1. lv_Sunken.  Text will have an engraved effect

            2. lv_Raised.  Text will have an embossed effect.

 

^Top.  CustomClick (Optional click style for custom button shapes). The default setting lv_cDefault attempts to imitate a click by reducing the image size and displaying that image while the button is in a down state. The other eight property settings will move the button in the direction of the setting.

 

Programmer Notes: This property is only valid for custom button shapes and only when the button mode is lv_CommandButton.

 

^Top.  Enabled. When a button is disabled, no button events will be triggered. However, the button can still have its properties modified.

 

^Top.  Font (Text Font).  Any standard font object can be assigned to this button.

 

^Top.  FontStyle (Font Attributes). The following font attributes can be changed by selecting the appropriate value. The attribute Strikeout cannot be assigned with this property, but can be assigned via the Font property.  In addition, setting font attributes via this property does not affect the Strikeout attribute if it has been applied..

 

            0. lv_PlainStyle. Default. No bold, italic or underline attributes are set.

            2. lv_Bold. Makes the font only bold.

            4. lv_Italic. Makes the font only italicized.

            8. lv_Underline. Makes the font only underlined.

            6. lv_BoldItalic. Makes the font both bolded and italicized.

            10. lv_BoldUnderline. Makes the font both bolded and underlined.

            12. lv_ItalicUnderline. Makes the font both italicized and underlined.

            14. lv_BoldItalicUnderline. Makes the font italicized, underlined and bolded.     

 

^Top.  Mode (Command button, option button or checkbox styles).

 

            0. lv_CommandButton.  Default. The button will imitate a typical VB command button.

            1. lv_CheckBox. The button will imitate a VB check box that has a Style property set to Graphical.

            2. lv_OptionButton. The button will imitate a VB option button that has a Style property set to Graphical.

 

Programmer notes:  Buttons set to lv_OptionButton do not interact with VB option buttons. Therefore, you can have both on your form. In addition, the button control must be placed in a container that has an hWnd property.

 

^Top.  ShowFocusRect (Highlight option when button has focus). The focus “rectangle” is generally a rectangle drawn around the inside edge of the button’s border to indicate a button has the focus. This property will show or hide that rectangle.  The following exceptions to this rule apply. 

 

            1. Circular buttons will have a circular shape drawn around the inside edge

            2. Diagonal buttons will have a light rectangle drawn around the inside edge, regardless of the ButtonStyle property.

            3. lv_WinXP style buttons will show the focus with a bluish rectangle drawn around the inside edge of the button

            4. lv_Machintosh-style buttons will show a dotted rectangle drawn around the button caption.

            5. lv_Java-style buttons will have a solid bluish rectangle drawn around the button caption

            6. lv_Hover-style buttons will have a light solid line drawn around their shape.

 

Programmer notes. When a button, in design mode only, is set to Default, then a focus rectangle may be displayed regardless of the ShowFocusRect setting. This is to help identify the “Default” button. If the ShowFocusRect setting is False, then the rectangle will not be shown during run-time.

 

^Top.  Value (Either True or False and used only for ButtonModes of lv_OptionButton and lv_CheckBox).  The Value for lv_CommandButton modes is always False and cannot be set to True.

 

Programmer notes.

      This is the button control’s default property.  Example> Debug.Print lvButton will return either True or False depending on the Value property.

      Captions on custom-shaped buttons are only shown if the Value property is True

 

 

^Top. BackColor (Button background color). The ResetDefaultColors property can change this setting.  This setting can change the HoverBackColor property depending on the HoverColorLocks setting.

 

Programmer notes. This color is also used for lv_CustomFlat button shapes as the outer border. Also see HoverBackColor

 

^Top. ForeColor (Text color). The ResetDefaultColors property can change this setting.   setting can change the HoverForeColor property depending on the HoverColorLocks setting.

 

^Top. GradientColor (Button background gradient color). The ResetDefaultColors property can change this setting.  This is the secondary color for a gradient color scheme. If the GradientMode property is not lv_NoGradients, then the button will be shaded from the BackColor property value to the GradientColor property value. This setting can change the HoverBackColor property, depending on the HoverColorLocks setting.

 

Programmer notes.

            If the CaptionStyle property is set, using a light BackColor and darker GradientColor produces nicer effects.

            lv_Round3D-style buttons when gradient-shaded from top to bottom or vice versa can produce a nice 3D “ball effect”

 

^Top. GradientMode (Gradient direction). The ResetDefaultColors property can change this setting.  There are several directions which the gradients can be drawn

 

            0. lv_NoGradient. No gradient colors are used, regardless of the color selected into the GradientColor property.

            1. lv_Left2Right. Gradients are shaded from the button’s left edge to its right edge

            2. lv_Right2Left. Gradients are shaded from the button’s right edge to its left edge

            3. lv_Top2Bottom. Gradients are shaded from the button’s top edge to its bottom edge

            4. lv_Bottom2Top. Gradients are shaded from the buttons’ bottom edge to its top edge

 

^Top. HoverBackColor (Button background color when mouse is over the button). The ResetDefaultColors property can change this setting.  This color will always be a solid color, whether or not the GradientColor property is used.  Depending on the HoverColorLocks setting, this color may be forced to match either the BackColor or the GradientColor property.

 

Programmer notes. When this setting is different than the BackColor property and the button shape is custom, then the button shape will be outlined in this color when the mouse is over the button.

 

^Top. HoverForeColor (Text color when mouse is over the button). The ResetDefaultColors property can change this setting.  Depending on the HoverColorLocks setting, this color may be force to match the ForeColor property.

 

^Top. HoverColorLocks (Forces various colors to synchronize). The ResetDefaultColors property can change this setting.  There are four lock settings that can modify several color settings automatically. The value of the lock can also change automatically.

 

            0. lv_LockTextandBackColor. This is a combination of the two following lock settings.

 

            1. lv_LockTextColorOnly. When this setting is chosen, the HoverForeColor property will be forced to match the ForeColor property, changing the ForeColor property will force the HoverForeColor property to match also.  If the HoverForeColor is changed manually, then this lock will change its setting to either lv_LockBackColorOnly or lv_NoLocks, whichever is applicable.

 

            2. lv_LockBackColorOnly.  This setting will force the HoverBackColor property to match the BackColor property if the GradientMode is lv_NoGradients, otherwise, this setting forces the HoverBackColor property to match the GradientColor property. If the HoverBackColor property is manually set, then this lock will change its setting to either lv_LockTextColorOnly or lv_NoLocks, whichever is applicable.

 

            3. lv_NoLocks. When set, no color enforcements are applied, nor are any locks set.

 

^Top. ResetDefaultColors (Resets all button colors to Window standard colors). This property is only available in design mode. When selected, it will change the following colors and then reset its value back to False.

 

            1. Resets BackColor property to vbButtonFace

            2. Resets ForeColor property to vbButtonText

            3. Resets HoverBackColor property to vbButtonFace

            4. Resets HoverForeColor property to vbButtonText

            5. Resets GradientColor property to vbButtonFace

            6. Resets GradientMode property to lv_NoGradients

            7. Resets HoverColorLocks property lv_NoLocks

 

 

^Top. MouseIcon (Custom image to display when mouse is over the button). This image can be an icon or cursor only. If set, the MousePointer property must be set to vbCustom.

 

^Top. MousePointer (Standard images to display when mouse is over the button). Various stock mouse pointers that can be used.

 

^Top. Picture (Image to display on the button). This picture can be almost any icon, bitmap, GIF or JPEG file that can be assigned to a StdPicture object. In addition, it can be assigned from functions that create StdPicture objects, such as LoadPicture, LoadResPicture, ImageList.ExtractIcon, etc.

 

Programmer notes:

      Large bitmap images should be resized in Window’s Paint or Microsoft’s Photo Editor to reduce overall program size.

      Bitmap images scale better to 24 x 24 pixels than do icons

      GIFs may produce the poorest quality

      Bitmaps, GIFs and JPEGs are made transparent if possible

      Icons cannot be used for custom-shaped buttons

 

^Top. PictureAlign (Image alignment). There are six settings, but these settings are dependent upon the CaptionAlign property also. In total, there are eleven different visual combinations that can be applied.

 

            0. lv_LeftEdge. Default. The image will be placed on the button’s left edge. If the CaptionAlign property is lv_LeftJustify, then the text is justified to the image’s right edge.

            1. lv_LeftOfCaption. The image will be placed left of the button’s left edge.

            2. lv_RightEdge. The image will be placed on the button’s right edge. If the CaptionAlign property is lv_RightJustify, then the text is justified to the image’s left edge.

            3. lv_RightOfCaption. The image will be placed right of the button’s right edge.

            4. lv_TopCenter. The image will be placed above the caption. Both the caption and image are automatically centered.

            5. lv_BottomCenter. The image will be placed below the caption. Both the caption and image are automatically centered.

 

^Top. PictureSize (Image size). There are five settings that can be used.

 

            0. lv_16x16. Default. Images are scaled to 16 x 16 pixels.

            1. lv_24x24.  Images are scaled to 24 x 24 pixels.

            2. lv_32x32.  Images are scaled to 32 x 32 pixels.

            3. lv_Fill_Stretch.  Images are stretched to fill the entire button.

            4. lv_Fill_ScaleUpDn.  Images are scaled proportionally to fill as much as the button as possible.

 

Programmer notes:  The last two settings will center the image automatically and any button captions will be shown overlaying the image.

 

 

^Top. DelayDrawing (bDelay As Boolan)   Halts drawing while changing multiple button properties. This function is intended to mimic the Window API functions BeginPaint and EndPaint.  Each time a button property is changed, it is redrawn.  To prevent the button from redrawing while changing multiple properties, call this function with a True parameter before changing the properties.  Then call it again with a False parameter after the last property has been changed. It will then refresh the button.

 

Programmer notes: You must make a DelayDrawing False call for each DelayDrawing True call.

 

^Top. Refresh  Redraws the button on demand.

 

 

^Top. Events (Button events returned to parent control). The control returns every event a typical command button would return.  In addition, it returns two additional events…

 

      DoubleClick (Button As Integer).  This event is for information purposes and may allow you to intercept the second click to prevent it from occurring.

 

      MouseOnButton (OnButton As Boolean).  This event is called once when the mouse initially enters the button area and after the first MouseMove event has been triggered.  It is then called again when the mouse leaves the button area and after the last MouseMove event is triggered.  Between the True and False values passed to this event, you can change the button properties as needed (i.e., supply different colors, fonts, or images).

 

Programmer notes: If the mouse clicks the button, only left mouse buttons will fire a Click or DoubleClick event.

                                 Typical command buttons trigger click and double click events as….

                                             Click: MouseDown, Click, MouseUp

                                             Double Click: MouseDown, Click, MouseUp, MouseDown, Click, MouseUp

                                 This control will trigger those same events as…

                                             Click: MouseDown, MouseUp, Click

                                             Double Click: MouseDown, MouseUp, Click, DoubleClick, MouseDown, MouseUp, Click

 

^Top.  hWnd (Read-only value of the button’s window handle)

 

^Top.  hDC (Read-only value of the button’s device context handle)

 

 

^Top.  Compiling Requirements. As a user control, this button control can be compiled directly into your project or as a separate OCX.  The following should be considered.

 

      A. Separate OCX.  Compile using the P-Code option as this will reduce the size of the control.  The control must include these two files…

 

                  1.  lvButtons_H.ctl

                  2. modLvTimer.bas

 

      B.  Compiled within your code.  You must include the few lines of code in the modLvTimer.bas file within one of your modules.  Optionally, you can simply include the entire modLvTimer.bas file in your project. If you use this option, you will add between 100-120kb to your application size.