Introduction

Introducing UserFOrm UI Elements

UserFOrm UI Elements - Interactive Flat UI Images modified from a PSD by Blackjamun to use on a UserForm

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

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

UserFOrm UI Elements use two tiny Classes from UserForm Extensibility to enable the Hand Cursor and a Pause in milliseconds

Here is a Material design that allows you to add interactive Checkboxes, Radiobuttons and Buttons to a UserForm. UserFOrm UI Elements use a minimal Colour theme and gorgeous Graphics

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 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 MouseOver 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 Buttons can easily be edited and their Text changed once loaded into an Art Package like Affinity - here is one I made as a Cancel 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 Buttons can easily be edited and their Text changed once loaded into an Art Package like Affinity - here is one I made as a Cancel MouseOver 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

If you like this Project you may also enjoy

Blue 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 (4 different examples), 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
Features a Cursor Class that displays the Hand Cursor on the Flat UI Elements
Both Affinity Designer Elements and all of the Images used are now included with the Zip Download File
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
Before Purchasing!: The PSD file by Blackjamun 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, 'UserFOrmUI.zip' and extract the contents to yur computer. Lots of Image files are included with this Software. The main file is called 'UserFOrmUI.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 open the 'UserFOrmUI.xlsm' file

Usage

UserFOrm UI Elements

How to Use

To use these Controls Open your own Project and the 'UserFOrmUI.xlsm' file in the VBE Editor and drag the UserForm1 into your own Project. Then drag both the 'Cusror' 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):

To use these Controls Open your own Project and the 'UserFOrmUI.xlsm' file in the VBE Editor and drag the UserForm1 into your own Project. Then drag both the 'Cusror' 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 Checkboxe Values
Checkbox1Value          
Checkbox2Value          
Checkbox3Value          
Checkbox4Value          
Checkbox5Value          


' 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:

Here are the 4 Buttons in the Software each with slightly different interactivity

Editing the Button text

So you can edit the SVG Button included in the Software download but it is not easy to replicate how Blackjamun designed the Buttons as it will include 'pixelation for the Text' OR you can 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 TransparentImages Software. This is my favourite method. Here is the link to the Free PSD designed by Blackjamun

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

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 Blackjamun's design on freebiesbug.com - here is an example of this excellent work, click to view at Freebiesbug.com

>

Round Buttons are also included in Blackjamun's design - here is an example of this excellent work!

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:

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

Buttons can easily be edited and their Text changed once loaded into an Art Package like Affinity - here is one I made as a Cancel 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

Buttons can easily be edited and their Text changed once loaded into an Art Package like Affinity - here is one I made as a Cancel MouseOver 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

UserFOrm UI Elements

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

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 Blackjamun (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 UserFOrm UI Elements in action. Music featured is 'Dreaming On (Instrumental) - NEFFEX' · view the UserFOrm UI Elements video on YouTube

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

Support

Please remember you have purchased very affordable Software and you have not paid for a full-time Software design agency - I am but one man. Occasionally I may help with small tweaks, but these requests will be put on a much lower priority due to their nature. You have not PAID for Support, Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful

Support (limited) for my Software includes

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
...or Contact Mark Kubiszyn via our Facebook Page - 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 or via Messenger. 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 UserFOrm UI Elements

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


14.02.2023 - (Version 1.1)

Added the Hand Cursor to the Event Handlers where interaction resulted in a Pointer being displayed
Changed parts of the Code that had Event Handlers that were not recognised so replaced 'Checked' with 'Selected' - no errors are thrown however now the Hand Cursor is displayed correctly on all elements
Separated the Affinity Designer Elements and the Images into separate Folders and added to the Zip Archive


21.01.2023 - (Version 1)

General release of UserFOrm UI Elements