UIRibbonDemos

Windows UI Ribbon Framework Demos

Update (Aug 29th, 2025): Updated .twinprojs to use latest WinDevLib package and to clear new errors

Update (Feb 17th, 2025): The Advanced Demo is now out!! It has its own repository, and there's way too much to cover here, so if you're a fan of these demos, just head over there!

Update (Jan 11th, 2025): NEW VERSION OF MY INTERMEDIATE DEMO! This new demo supports the new richedit control with color emoji support. It requires the two included dlls, signed by Microsoft. Contained in the 'UIRibbonDemoIntermediateD2D' folder (since the RichEdit uses a Direct2D rendering pathway).

Update (Jan 4th, 2025): Bug fix for Intermediate demo that in some circumstances caused the font background color to change to black when unrelated settings were applied.

Update (Mar 3rd): All .twinproj files updated to update reference to WinDevLib (formerly tbShellLib) 7.6; this gets rid of package errors that tB didn't raise at the time of release. Hopefully will get to advanced demo soon.

Update (Dec 19th): All .twinproj files updated to update reference to WinDevLib (formerly tbShellLib) 7.0; this gets rid of package errors that tB didn't raise at the time of release. Hopefully will get to advanced demo in the new year.

Status (Nov 11th): Sorry the advanced demo has been delayed, there's just so many cool things I'm working on. I'm absolutely still planning it and have recently begone some prelimary work definining the markup.

Update (August 10th): Basic Demo (UIRibbonDemo.twinproj) was not working when compiled to exe (and run as that). This was due to a weird edge case with Debug.Print statements.

Update (August 7th): Gallery Intro Demo Released! The finished project is UIRibbonDemoSGallery.twinproj,and all the intermediates are in \UIRibbonDemoSGallery. More info down at the bottom after the Intermediate demo. Update: Same day minor bug fix, custom border size (1-15) now works.

Update (August 1st): Intermediate Demo updated.
Bug fix: Toggle button for context tabs wasn't working.
Bug fix: Shield icon wasn't replaced with app icon when running from IDE.
I have not been able to get Recent Items pinning working correctly... this version implements a method I found that should supposedly read the changes to pinned status, but it's returning false always for every item. There is code that gets an updated pin status if you click the item. I've left all my debug code for this in, and activated the IUIEventLogger, if anyone wantsto play around with this. Will keep working on it but didn't want to delay the other fixes.

Update (July 30th): Intermediate Demo updated! Since the Recent Items category was there, I thought filling it shouldn't wait for the advanced demo. Details at end of readme.

Update (July 28th): The Intermediate Demo is now available! Scroll down to check it out! The finished project is UIRibbonDemoIntermediateA.twinproj, and the intermediates are the ones with an I suffix.

Update: Crashing has been fixed.

Windows applications frequently make use of the UI Ribbon in newer applications, including Explorer, Office, Wordpard, etc. While there's some controls implementing this kind of toolbar from scratch, and some exorbitantly expensive commercial controls that may or may not use the OS component ::cough:: CodeJock ::cough:: there's not been an implementation using the simple COM interfaces Microsoft applications use. This repository will show how to use those, with both simple and advanced demos.

Requirements

1. Windows 7 or newer
2. You'll need either the Windows SDK v7.0 or newer, or to otherwise have obtained uicc.exe and rc.exe from it or Visual Studio.
3. An up to date twinBASIC; not sure where the cutoff would be but always good to have a more recent release.
4. Becoming familiar with the XML-based Ribbon Markup Language to create the .xml files describing controls and commands. A good example for learning the syntax also accompanies this demo, although the example itself is C++.
5. Windows Development Library for twinBASIC (WinDevLib, formerly tbShellLib) v7.6 or higher added as a package.

[!NOTE] I recommend the Ribbon Designer in the Delphi Ribbon Frame by JAM-Software. an open source project here on GitHub. While it's not written in tB or VB6, it can be compiled without issue from source if you don't want to download the binary from the free Delphi IDE. It's a GUI-based designer that greatly simplifies the process of generating the XML, although you will still want to familiaring yourself with it, since the tool doesn't explain how it all works.

First demo - Hello Ribbon!

For our first ribbon application, we'll use this simple one, based on a pure C version by Stephen Wiria.

The final .twinproj for this is UIRibbDemo.twinproj.

We'll start from the xml:

Preparing the project files

Once you have the ribbon.xml file and the \Res folder containing the bitmap images for your controls, you can proceed to preparing the project.

1. Use uicc.exe to compile the XML. This is easiest if you have Visual Studio command prompt available, but you can substitute full paths or drop uicc.exe in the ribbon folder. We want not just the compiled file, but we want uicc to prepare a resource file containing all the strings and bitmaps correctly named so importation into twinBASIC is nice and simple. For this we use the following command:

   uicc.exe ribbon.xml ribbon.bml /res:ribbon.rc/header:ribbon.h

   The first file is the compiled binary file; while you can use that for manual importation, it's already copied into ribbon.rc, so you don't need to worry about that for our method.

2. Compile ribbon.rc with rc.exe -- this is simple, in the same prompt, just use rc ribbon.rc. This will produce a .res file, which you might already be familiar with as this is the format we use in VB6 for resource files.

Import into twinBASIC and set up project

1. twinBASIC does not currently support importing .res files directly-- but it does as part of the .vbp import process. This repository contains ImportRibbon.vbp, an otherwise empty VBP file that will trigger twinBASIC to import the ribbon.res file in the same directory as the .vbp. Open twinBASIC, from the new project tab select 'Import from VBP...' and choose our ImportRibbon.vbp. This will fill the resources folder with our binary UIFILE from ribbon.bml, a BITMAP folder containing all our images, and a string table containing all the control captions etc.
2. You'll want to add a Form, and a class named clsRibbonEvents. Then open up the Settings, set the name, and anything else you want, and go down to Library References, click the TWINPACK PACKAGES button, and add a reference to Windows Development Library for twinBASIC v7.6.325. (or the latest version).
3. Save the project, and you're now ready to code, which is actually simpler than everything we've done so far.

The Basic Demo

1. The form sets everything up, then the class handles the events the ribbon raises to let us know about command clicks and other information.

2. The Form code declares a variable for the UI Ribbon Framework coclass, the events class, and a handler for the command click it raises:

    Private pFramework As UIRibbonFramework
    Private WithEvents pUIApp As clsRibbonEvents
    
    Private Sub Form_Load() Handles Form.Load
        Set pFramework = New UIRibbonFramework
        Set pUIApp = New clsRibbonEvents
        pFramework.Initialize Me.hWnd, pUIApp
        pFramework.LoadUI GetModuleHandleW(), StrPtr("APPLICATION_RIBBON")
    End Sub
    
    Private Sub Form_Terminate() Handles Form.Terminate
        pFramework.Destroy
        Set pFramework = Nothing
        Set pUIApp = Nothing
    End Sub
    
    Private Sub pUIApp_OnRibbonCmdExecute(ByVal commandId As Long, ByVal verb As UI_EXECUTIONVERB, ByVal key As LongPtr, currentValue As Variant, ByVal commandExecutionProperties As IUISimplePropertySet, returnValue As Long) Handles pUIApp.OnRibbonCmdExecute
        List1.AddItem "You clicked: CommandId=" & commandId & ", Verb=" & verb
    End Sub
   

   All of those interfaces and the GetModuleHandle API are already declared in tbShellLib; that's the entirety of the form code. In the class, we have:

        Private Sub IUICommandHandler_Execute(ByVal commandId As Long, ByVal verb As UI_EXECUTIONVERB, key As PROPERTYKEY, currentValue As Variant, ByVal commandExecutionProperties As IUISimplePropertySet) Implements IUICommandHandler.Execute
            Dim hr As Long
            Dim pv As Variant
            If VarPtr(currentValue) <> 0 Then
                VariantCopy pv, currentValue
            End If
            RaiseEvent OnRibbonCmdExecute(commandId, verb, VarPtr(key), pv, commandExecutionProperties, hr)
            Err.ReturnHResult = hr
        End Sub
        
        Private Sub IUICommandHandler_UpdateProperty(ByVal commandId As Long, key As PROPERTYKEY, currentValue As Variant, newValue As Variant) Implements IUICommandHandler.UpdateProperty
            Dim hr As Long
            Dim pv As Variant
            Dim pnv As Variant
            Dim bValid As Boolean
            If VarPtr(currentValue) <> 0 Then
                VariantCopy pv, currentValue
            End If
            RaiseEvent OnRibbonUpdateProper