Introduction

Introducing Blue Interactive UI Elements

Blue UI Elements - Interactive Flat UI Images modified from a PSD Blue UI Kit PSD by Freebiesbug.com to use on a UserForm

Here is a Material design that allows you to add interactive Checkboxes, Radiobuttons and Buttons to a UserForm. Blue UI Elements use a minimal Colour theme and gorgeous Graphics. The Images are isolated, edited and then extracted out of a Free PSD Blue UI Kit

All of the Images loaded into the Image Controls are available in the Download File and I have also saved them as SVG. To edit the Button Text properly, you should use an Art Package for example Paint Shop Pro, Photoshop or Affinity Designer (I use Affinity for all of my work). The Images can also be copied from one UserForm to another

Blue UI Elements use two tiny Classes from UserForm Extensibility to enable the Hand Cursor and a Pause in milliseconds. The Toggle Button uses additional Code in the UserForm to move the Button back and forth with easing and to change the Cross to a Tick for On/Off states



     

If you like this Project you may also enjoy


Carbon UI ·  UserFOrm UI ·  BoX ·  Flat UI ·  UserForm Slider Buttons ·  UserFormExtensibility

Prerequisites

  • Excel 2016 (32bit or 64bit version 16.0)
  • Basic to moderate Excel Skills to understand and edit Code, also to copy & paste Images into UserForm Controls if developing this Software further or integrating it into your own Projects. In order to edit the Button Text an Art Package is required; this may be Paint Shop Pro, Photoshop or Affinity Designer or a Package that can open and edit PSD files -- Please Note: the PSD file is available as a FREE download but DOES NOT ship with this Software
  • Windows PC · NOT a Mac!
  • No support is provided for customization of this Software

Features

  • UserForm UI Elements consists of Checkboxes (2 different examples, small with Tick and large with Plus), Radiobuttons (1 interactivity and design) and Buttons (1 interactivity design with multiple states, requires an Art Package to edit the Text) in a minimal colour design
  • Easing is used for the Toggle Button
  • Features a Cursor Class that displays the Hand Cursor on the Flat UI Elements
  • Features a Timing Class to enable a Millisecond Pause
  • All of the individual Checkbox, Radiobutton and Button Images as 'PNG' and 'SVG' files including the 'OK' and 'Cancel' Button Images I created from the PSD. I also include the Affinity Designer Images which can be easily edited ie. for the Button Text
  • Before Purchasing!: The Blue UI Kit PSD file by Freebiesbug.com is FREE to download for all of the Elements used by this Software including the Button Text but it is NOT included in this Software. What IS included is shown in the Screen Shot above PLUS the 4 OK and Cancel Button 'PNG' and 'SVG' Images

Installation

Right-click on the file, 'BlueUI.zip' and extract the contents to your computer. Lots of Image files are included with this Software and within the Zip Archive you will find two folders, 'Images' (all of the main Images used for BlueUI) and 'Affinity' (the actual Affinity Images that I copied from the PSD file one by one, all of which can be edited using the Affinity Designer Program which is NOT included with this Software)

The main file is called 'BlueUI.xlsm' and I have also added my Transparent Images Software, 'ImageTransparency.xlsm' that will allow you to load in PNG with Transparency set to a Background Colour. To use this Software, open the 'BlueUI.xlsm' file

Usage

Blue UI Elements


How to Use

To use these Controls Open your own Project and the 'BlueUI.xlsm' file in the VBE Editor and drag the UserForm1 into your own Project. Then drag both the 'Cursor' Class and the 'SystemTiming' Class into your own Project. Finally drag the 'mdExample' Code Module into your own Project. I will use a new file called 'Test.xlsm' to demonstrate and here is a Screen Shot after I have copied the Code Modules across (Compile the Code - there should not be any errors):



Now before you can start to use any of these you need to add the Defined Names for the Control states into your Project. If you do not do this then you will receive Errors once the UserForm is displayed and you attempt to click or Move over the Controls. Also, you will not be able to store the states of the Controls correctly. I added an 'On Error Resume Next' into the UserForm_Initialize() Event Handler so that at least you can run the Example in the 'mdExample' Code Routine to view the UserForm and its Controls without triggering any errors. Anyhow, now add the Following Defined Names or Named Ranges into any Cells in any of your own Project Worksheets, using either the Name Box (quickest method, simply Copy mone and Paste) or the Name Manager on the 'Formulas' Tab of Excel - select New and type the Name 'Checkbox1Value' and so on and so forth...

' 5 Checkbox Values
Checkbox1Value          
Checkbox2Value          
Checkbox3Value          
Checkbox4Value          
Checkbox5Value 

' 1 Toggle Value
Toggle1Value

' 1 Button state
Button4State

' 1 Radiobutton  Group Selected ID
RadiobuttonASelected

' 3 Radiobutton Values
Radiobutton1Value
Radiobutton2Value
Radiobutton3Value
Now in the 'mdExample' Code Module in your Project, run the Example and test out the Controls. You can check out my Code to see how each Checkbox, Radiobutton or Button is controlled by the VBA. You should see the UserForm in your own Project now like this - so simple!:



More Info


Checkboxes

These require 2 Images, some initilisation code and additional code to make them interactive. An example of how I do this is shown below by the following Checkbox Event Handlers:
' Initialisation Code
Private Sub UserForm_Initialize()
   If [Checkbox1Value].Value2 Then Tick Me.Checkbox1 Else Untick Me.Checkbox1
End Sub

' Event Handler Code
Private Sub Checkbox1_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   MouseCursor.AddCursor IDC_HAND
End Sub

Private Sub Checkbox1Ticked_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   MouseCursor.AddCursor IDC_HAND
End Sub

Private Sub Checkbox1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   If Button = 1 Then
      Tick Me.Checkbox1
      [Checkbox1Value].Value2 = True
   End If
End Sub

Private Sub Checkbox1Ticked_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   If Button = 1 Then
      Untick Me.Checkbox1
      [Checkbox1Value].Value2 = False
   End If
End Sub

' Tick and Untick Code to handle interaction
Private Sub Tick(ByVal UserFormControl As Control)
   Me.Controls(UserFormControl.Name & "Ticked").ZOrder msoBringToFront
   Me.Controls(UserFormControl.Name).ZOrder msoSendToBack
End Sub

Private Sub Untick(ByVal UserFormControl As Control)
   Me.Controls(UserFormControl.Name & "Ticked").ZOrder msoSendToBack
   Me.Controls(UserFormControl.Name).ZOrder msoBringToFront
End Sub
I won't go into all of the Code here otherwise nobody would purchase my Software! All of the Image Controls, their respective Images and full Code including the Hand Cursor Class are available in the Purchased file...

Button States


Buttons

The Buttons available in this Software act like normal Buttons with a lovely MouseOver effect. A Button will display a different Image as the Mouse rolls over it and then you can make the Button 'do soomething' like close the UserForm. Another type of Button will depress, pause for a brief time in Milliseconds before 'doing something'. Finally I have added a Button that can be Pressed permanently or Pressed and then Unpressed again with its State stored in a Defined Name or Named Range. Here are the 4 Buttons in the Software each with slightly different interactivity:



Editing the Button text

It is not easy to replicate how the PSD Buttons with different Text look as it will include 'pixelation for the Text' SO you should download the PSD from here and edit the individual Button Font etc. and then export/save your new Images out as PNG and load them into your UserForm Image Controls using my 'ImageTransparency.xlsm' Software. Here is the link to the Free PSD Blue UI Kit

Once downloaded use Paint Shop Pro, Photoshop or Affinity Designer to isolate, select and edit the Font for the Buttons:



Round Buttons and Sliders are also included in Freebiesbug.com's design on Free PSD Blue UI Kit - here is an example of this excellent work, click to view at Freebiesbug.com



Buttons can easily be edited and their Text changed once loaded into an Art Package like Affinity - here is one I made as an OK Button. Simply select the Button in the PSD Layer and Copy. Then Paste as New from Clipboard. Isolate the Text part and just change it to whatever Text you need. You can even change the Font Style and Size if you want:

     

Screen Shots

Blue Interactive UI Elements v1.1

Create your own Buttons using your own Art Package like Affinity Designer - I will give you a couple to start you off!

     

FAQ

Q. Can I change the Images?
A. Of course -you can use your own. I recommend an art package like 'Affinity Designer' to create or edit SVG and PNG Images. Instructions on how to add your own Images to an Image Control with Transparency are in the 'ImageTransparency.xlsm' file included in the download. Don't forget you can just load an Image directly into an Image Control as a Transparent GIF!


Q. How do I change the Text on a Button?
A. Instructions are given in the Usage Section - you will need an Art Package like Paint Shop Pro, Photoshop or Affinity Designer to edit the original PSD file by Freebiesbug.com (this is FREE but NOT included in the Software). Two additional Button Images are included in the Download file, the 'OK' and 'Cancel' Button Images


Videos

This is a video of the Blue UI Interactive Elements version 1.1 in action. Music featured is 'Dreaming On - NEFFEX' · view the Blue UI Elements video on YouTube

Caution: Music may contain Explicit Lyrics, please listen at your own risk!

This is a video of the Blue UI Elements in action. Music featured is 'Dreaming On (Instrumental) - NEFFEX' · view the Blue UI Elements video on YouTube

Caution: Music may contain Explicit Lyrics, please listen at your own risk!

Support

Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful

Support for my Software

  • Responding to questions or problems regarding the Software and its features
  • Fixing valid (replicated) bugs and reported issues for the VERSION I HAVE WRITTEN

Software support does not include

  • Customization and installation services
  • Support for third party software or ANY kind of development whatsoever

Before seeking support

  • Make sure your question is a valid Software Issue and not a customization request
  • Make sure you have read through the FAQ's, online documentation and any related video guides before asking support on how to accomplish a task
  • Ensure that you access to the VBOM is allowed and that Macros can run in Excel
  • Make sure to provide 'proof of purchase' and state the name / version of the Software that you are having issues with when requesting support by Email or via Facebook

How to get Support

Contact Mark Kubiszyn on the Email address provided when you purchased the Software, including the Order Number
Remember to be patient, if there has been an issue with your download, Mark will always respond within 48 hours and will Email you the File directly if neccessary. For other issues the response time may be considerably longer and I may choose to respond to specific questions only (as is my right), depending on what has been asked

Future Builds

* No ideas as yet!

Bug Fixes

* No bugs have been identified for Blue UI


Changelog

You can find the version history in the Code Module for any Macro-enabled Software or read more information on the status of each release here
- the latest Version including a description of any changes made is always shown first

08.02.2023 - (Version 1.1)

Renamed the internal Project Name as Blue Interactive UI Elements
Now includes all the Affinity Designer Images which can be easily edited ie. for the Button Text
Added in the missing Licensing Text in the ThisWorkbook and UserForm Code Modules
Renamed the Radiobutton Text to be 'Radiobutton Option 1', 'Radiobutton Option 2' and 'Radiobutton Option 3'
Changed the Checkbox, Radiobutton and Buttons Event Handlers to include 'MouseCursor.AddCursor IDC_HAND' on the MouseDown() Event Handlers so that we do not see the ugly Pointer Cursor appear if we click down on the Image Controls during interactivity
Replaced the Radiobutton Event Handlers 'A1RadiobuttonChecked' with 'A1RadiobuttonSelected' as they were not being recognised by the Code at all to change the Hand Cursor
Added a new Video of the Software that now demonstrates all of the above changes

22.01.2023 - (Version 1)

General release of Blue UI or Blue UI Elements