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
If you like this Project you may also enjoy
Blue UI · BoX · Flat UI · UserForm Slider Buttons · UserFormExtensibility
- 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
- 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
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
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):
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 Radiobutton3ValueNow 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!:
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 SubI 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...
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
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:
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
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:
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!
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
This is a video of UserFOrm UI Elements in action. Music featured is 'Dreaming On (Instrumental) - NEFFEX' · view the UserFOrm UI Elements video on YouTubeCaution: Music may contain Explicit Lyrics, please listen at your own risk!
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
* No ideas as yet!
* No bugs have been identified for UserFOrm UI Elements
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