BoX

Purchase

Introduction

Introducing BoX

BoX - A Material Design Excel Dialog built from a UserForm with Flat UI Image Controls using extensibility classes

Have you ever wanted to to use Flat UI on a UserForm in Excel?

Well here is a Material design to allow you to do just that. BoX consists of Checkboxes, Radiobuttons, Sliders and Toggle Buttons that can be added to a UserForm and that look Flat. BoX uses a minimal Colour theme, just a Facebook Blue and a Charcoal Gray to accentuate Checkbox Ticks or Toggle Buttons. It features a Close Cross with a Rollover effect to close the dialog and a draggable UserForm using its Titlebar. All of the Images used are available in the Download File and I have also saved them as SVG

BoX uses a redacted and modified version of my UserForm Extensibility Classes to enable and interact with all of the Flat UI



           

If you like this Project you may also enjoy


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
  • Windows PC · NOT a Mac!
  • No support is provided for customization of this Software

Features

  • Features a Lightbox Class
  • Uses my UserForm Extensibility Classes to enable and interact with all of the Flat UI
  • Features a Cursor Class that displays the Hand Cursor on the Flat UI Elements
  • Features an easing Class to move the Toggle Buttons left and right (easeOutQuintic)
  • Examples of usage with or without a Lightbox
  • Examples of usage on a Modeless or Modal dialog
  • BoX consists of Checkboxes, Radiobuttons, Sliders and Toggle Buttons in a minimal colour design
  • 2 variations of Sliders
  • 2 variations of Checkboxes - use a Tick or a Square
  • Use Rounded Corners on a UserForm
  • Drag the UserForm around by its redesigned Titlebar
  • Uses an optional Double-click on the UserForm to allow it to close if required
  • Uses a Rollover Effect on the Close Cross - the Close Cross will close the UserForm

Installation

Right-click on the file, 'BoX.zip' and extract the contents to yur computer. Lots of Image files are included with this Software. The main file is called 'BoX.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 'BoX.xlsm' file

Usage

UserForm Flat UI


How to Use

To use these Controls you will need to Copy the resource Code Modules first. Open both the 'BoX.xlsm' file and your own Macro-enabled Excel file. Go into the Project Explorer via the VBE Editor and you should see all of your Code Modules (if any) and all of the BoX Code Modules. I will make a new file called 'Test.xlsm' to demonstrate using the Flat UI. Here is my Test file and the BoX file - using the Mouse, drag over all of the Class Code Modules, the 'BoX' Code Module and the 'mdUserFormSlider' Code Module from BoX as I have done (notice that I have NOT dragged across the UserForm Code Module itself as we will integrate the Flat UI into a new UserForm!):



Now Insert a new UserForm into your Project called 'UserForm1'. A Class references a UserForm so you must have one present and we will need one to add our Controls and Code into. Compile your Project - it should not throw any errors. Now if you were to run the Example1() Code in the 'BoX' Code Module a UserForm should Popup. If you have called your UserForm something different then you will need to adjust the Code for the different Name of your UserForm. A Boolean value is added for my examples to prevent multiple instances of the UserForm being ran. You can remove this and the other Code in the 'BoX' Code Module and simply use the following Code as I will now do to my 'Test' file. This will be a Modeless dialog without a Lightbox and this is now the ONLY Code in the 'BoX' Code Module; we will leave the Height as 200: 
Option Explicit
Option Private Module

' Example1, an example of a Modeless BoX Dialog without a Lightbox
Public Sub Example1()
      
      With UserForm1
         .Height = 200
         .Show 0
      End With
   
End Sub
Running the Example will just Popup a standard UserForm like this with no UserForm Extensibiity and Controls:



Go into the UserForm Code Module and add the following Code: 
Option Explicit

Private Self As New UserFormExtensibility

Private Sub UserForm_Initialize()
   
   ' UserForm extensibility
   Set Self.Assign = Me
 
End Sub

Private Sub UserForm_Activate()
   
   ' remove UserForm caption and borders
   Self.RemoveCaptionAndBorders
   
   ' round the UserForm corners
   Self.RoundBorderCorners

End Sub

Private Sub UserForm_DblClick(ByVal Cancel As MSForms.ReturnBoolean)
   Unload Me
End Sub
So now run the Example Code again and you should see a UserForm with no Caption and rounded corners that can be dismissed via a Double-click! Rounded corners will be added even if you are using Windows 10 with older versions of Excel that do not round Windows. What you have done is to add 'UserForm Extensibilty' to your UserForm:



I will not go into Extensibility any further as BoX uses a redacted version of these Classes - you can read more about my UserForm Extensibility here. So now, we will change the Border Colour and the Background Colour of the UserForm. Click on the UserForm but not through it. Set the BackColor to '&H00FAFAFA&'. Set the BorderColor to '&H00E0E0E0&'. Run the Example again and we now have a UserForm that is ready to take our Controls:



Click on the UserForm in the 'BoX' file. Move the Checkbox Label to the right a little and then move the first Checkbox also over to the right a little. Now select all 3 Image Controls like the Screen shot below and do Edit->Copy or CTRL+C:



Switch to your own file and click on your UserForm (I will switch back to my 'Test' file to do this). Do Edit->Paste or CTRL+V to Paste the 3 Image Controls into your UserForm. Drag the Ticked Checkbox Image ontop of the standard Checkbox Image and arrange the Label to be a little closer to the Checkbox Images like this (Please note: if the Ticked Image is visible over the standard Checkbox Image then right-click on it and choose 'Send Backward':



Go into the UserFom Code Module in the 'BoX' file and find and Copy the Initialisation Code for Checkbox1 and then Paste this into your UserForm Code Module - this part goes into the UserForm_Initialize() Subroutine. Repeat for the Checkbox1 Event Handlers and the 'Tick()' and 'Untick()' Subroutines. THe Final Code should look like this: 
Option Explicit

Private Self As New UserFormExtensibility

Private Sub UserForm_Initialize()
   
   ' UserForm extensibility
   Set Self.Assign = Me
 
   If [Checkbox1Value].Value2 Then Tick Me.Checkbox1 Else Untick Me.Checkbox1
 
End Sub

Private Sub UserForm_Activate()
   
   ' remove UserForm caption and borders
   Self.RemoveCaptionAndBorders
   
   ' round the UserForm corners
   Self.RoundBorderCorners

End Sub

Private Sub UserForm_DblClick(ByVal Cancel As MSForms.ReturnBoolean)
   Unload Me
End Sub

Private Sub Checkbox1_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   Self.ChangeCursor IDC_HAND
End Sub

Private Sub Checkbox1Ticked_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   Self.ChangeCursor 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

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
Add a Defined Name in your Project called 'Checkbox1Value' to capture the output of the Checkbox and then run the Example. You will now have your own Checkbox and you can Tick and Untick it and the result will be stored in the Defined Name as either True or False depending on its state like this:



You can double-click to dismiss the dialog and as you move over the Checkbox you will see the Hand Cursor popup. That's it, you can do the same with the rest of the Image Controls for each set of Objects. The Code to Copy is clearly marked like this, for example the Slider Code section would be: 
' >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
' -----¬ Sliders, requires the external mdUserFormSlider Code Module
' >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Private Sub Slider1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   DragSlider SliderControl:=Me.Slider1, UpdateRange:=ThisWorkbook.Sheets("Sheet1").Range("B17"), Minimum:=1, Maximum:=10
End Sub

Private Sub Slider1_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   ' //  instantiate our Cursor Class into an object
   '     we will avoid auto-instancing
   Dim MouseCursor As Cursor
   Set MouseCursor = New Cursor
   MouseCursor.AddCursor IDC_HAND
End Sub

Private Sub Slider2_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   DragSlider SliderControl:=Me.Slider2, UpdateRange:=ThisWorkbook.Sheets("Sheet1").Range("B19"), Minimum:=1, Maximum:=5
End Sub
Each set of Objects will require some Initialisation Code and then some Code to make the set of Objects work. All of the Code is in the 'BoX' file UserForm1 Code Module

Screen Shots

BoX UserForm Flat UI Examples with or without a Lightbox

BoX UserForm Flat UI, Checkboxes, Radiobuttons, Sliders and Toggle Buttons

BoX UserForm Flat UI

           

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

Videos

This is a video of BoX in action. Music featured is 'Tough - NEFFEX.mp3' · view the BoX 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 BoX

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

18.01.2023 - (Version 1)

General release of BoX Flat UI for Excel