The goal wasn’t to add new features but to explore how applying thoughtful UI design principles can significantly enhance the look and feel of an application, making it more visually appealing and cohesive.

Here are some of the key aspects of the UI revamp:

• Design System Foundation: I started by establishing a basic design system. This involved defining core visual elements to ensure consistency across the entire application interface.
• Typography Definition: Specific styles were defined for how titles and standard text should appear. This helps create a clear visual hierarchy and improves readability.
• Consistent Color Palette: A specific set of colors (Light & Dark mode) was chosen and implemented throughout the project, contributing to a unified and more polished look.
• Refined ListBox Appearance: The standard DesktopListBox control received some visual tweaks to better align with the overall updated aesthetic.

The aim was to demonstrate how focusing on UI details can elevate even a simple example application.

Here’s a glimpse of the revamped ToDo app:

You can find the complete source code for this UI-enhanced ToDo app project on GitHub.

Stay tuned for more exciting projects as we continue our Year of Code 2025 journey!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Year of Code Project

• Year of Code: Kickoff
• January Project: Desktop Apps | Forum Discussion
• February Project: Database Apps | Forum Discussion
• March Project: Web Apps | Forum Discussion
• April Project: User Interface | Forum Discussion
• May Project: Mobile Apps | Forum Discussion
• June Project: Code Sharing | Forum Discussion
• July Project: Charting | Forum Discussion
• August Project: Console Apps | Forum Discussion
• September Project: Games | Forum Discussion
• October Project: Multi-Platform | Forum Discussion
• November Project: PDF | Forum Discussion

How to Play:

Each month we’ll announce a new theme and share an example project of our own. Share your projects to the Xojo Forum thread for that month via GitHub (all the links you need are posted above ↑ ). Learn how to use Xojo and GitHub.

The Prizes:

Monthly winners get $100 at the Xojo store. Every month you submit a project is another chance to win the grand prize. The grand prize is $250 cash plus a Xojo Pro license and a year of GraffitiSuite and will be announce in December. Learn more about the prizes.

The requested enhancements are:

• Display the requested folder in the menu.
• Sort the folder contents.
• Skip files that cannot be accessed.

To dive into these a bit more, right now when you request SpecialFolder.Documents, you see the contents of Documents. With a slight change, you can now see “Documents” as the top of the hierarchical menu.

The folder contents were previously shown in the default file system order, which seems pretty random. Now the files are sorted in alphabetical order.

Lastly, if you had any inaccessible files in your folder hierarchy, an IOException was raised (and not caught). Now any files that cause an IOException are skipped.

Here is the updated CreateFolderMenu method:

Private Function CreateFolderMenu(f As FolderItem, showRoot As Boolean = False) As MenuItem
   Var base As New MenuItem(f.Name, f)
   Var rootMenu As MenuItem
   If showRoot Then
     rootMenu = New MenuItem(f.Name, f)
   End If

   Var sortedFiles() As FolderItem
   Var sortedNames() As String

   For i As Integer = 0 To f.Count - 1
     Try
       Var child As FolderItem
       child = f.ChildAt(i)
       sortedFiles.Add(child)
       sortedNames.Add(child.Name)
     Catch e As IOException
       Continue // Skip any unavailable files
     End Try
   Next

   sortedNames.SortWith(sortedFiles)
   For Each child As FolderItem In sortedFiles
     If child.IsFolder Then
       base.AddMenu(CreateFolderMenu(child))
     Else
       Var m As New MenuItem(child.Name, child)
       base.AddMenu(m)
     End If
   Next

   If showRoot Then
     rootMenu.AddMenu(base)
     Return rootMenu
   End If

   Return base
 End Function

You’ll notice a new parameter, showRoot. Pass in True to include the root folder name in the hierarchical menu.

The sorting demonstrates the use of the SortWith command which allows you to sort one array (in the case an array of file names) and keep another array (the array of actual FolderItems) correspondingly sorted.

The Try…Catch is used to catch an IOException on a file and then allows things to continue on to the next file.

Download the Project

Here’s how you can recurse through files and add them to a regular MenuItem:

Private Function CreateFolderMenu(f As FolderItem) as MenuItem
  Var base As New MenuItem(f.Name, f)
  For Each child As FolderItem In f.Children
    If child.IsFolder Then
      base.AddMenu(CreateFolderMenu(child))
    Else
      Var m As New MenuItem(child.Name, child)
      base.AddMenu(m)
    End If
  Next

  Return base
End Function

You can call it like this:

Var startFolder As FolderItem = SpecialFolder.Documents
FolderMenu = CreateFolderMenu(startFolder) // Property FolderMenu As MenuItem

And show the menu like this:

Var selectedFile As MenuItem = FolderMenu.Popup

If selectedFile <> Nil Then
  Label1.Text = FolderItem(selectedFile.Tag).NativePath
End If

Sample project download

Another alternative might be to show the folder in a hierarchical ListBox. An example project for that is included with the Xojo download: Examples/Files/FileBrowser

I’m sure this new feature will make your ListBox shine thanks to the work of Xojo Engineer William Yu.  Even better, you only need to implement a couple of events to make it happen!

Even if you don’t need to customize your ListBox headers right now, you are already benefitting from its related improvements in 2020r1! The header’s height will adjust on macOS to fit the text size to the font size of your choice (as it was doing already in previous releases both on Windows and Linux).

In addition, now it is really easy to add any picture, background color and text combination you want to your headers too; and the way to do that is adding these two Event Handlers to the ListBox instance:

HeaderBackgroundPaint(g As Graphics, column As Integer) as Boolean

HeaderContentPaint(g As Graphics, column As Integer) as Boolean

Do these look familiar to you? They should! As you can see, the Event Handler signatures are like the ones for customizing the cells drawing:

CellBackgroundPaint(g As Graphics, row As Integer, column As Integer) as Boolean

CellTextPaint(g As Graphics, row As Integer, column As Integer, x as Integer, y as Integer) as Boolean

You already know that the "g" Graphics context are relative to each header with the (0,0) coordinate on the upper-left corner, while the g.width and g.height values are the width and height dimensions of the header itself. Thus, you can use any of the available Graphic methods and properties to put the content of your choice right there.

You can use FontSize from the attributes section in the Inspector Panel to set the Header cell height. Let’s say you want to draw some pictures that are 32px height, while you want to draw the header text in a 20 points font size. So, in this case, you would set 32 points as the Font Size for the ListBox and then set the Font Size to 20 points for the text size drawing, probably in the HeaderContentPaint Event Handler. Don’t forget to set the FontSize to any other desired value for the cell text drawn in the rows themselves!

As a result, you will get the perfect sized header height to fit both your pictures and text.

One way to avoid this problem is to not actually load all the data at once. This is often a great idea because the user can’t actually see all the data at once anyway. So why not only load the data they can actually see?

One way to do this is to use a ScrollBar to track the data the user wants to see and then to only load that data into the ListBox.

To demonstrate this, start by creating a simple class as a container for data. The class structure is like this:

Class ListData
  Property Num As Integer
  Property Value As Double
  Property Desc As String
End Class

On Window1, add a property that is an array of this class:

Data() As ListData

Now on Window1, add two Buttons, a Vertical Scroll Bar and a ListBox. Align the ScrollBar so that it is to the right of the ListBox and the same height and change its Allow Live Scrolling property to True (ON). Change the ListBox to have 3 columns using the Column Count property in the Inspector. In the Open event of the Window add 1 million elements to the Data array:

 For i As Integer = 1 To 1000000
   Var d As New ListData
   d.Num = i
   d.Value = Rnd()
   d.Desc = "Testing"
   Data.AddRow(d)
 Next

In the Action event of the 1st Button, add this code to load the entire 1 million element array into the ListBox:

Listbox1.HasVerticalScrollbar = True
ScrollBar1.Visible = False
Listbox1.RemoveAllRows
For i As Integer = 0 To Data.LastRowIndex
  Listbox1.AddRow(Data(i).Num.ToString, Data(i).Value.ToString, Data(i).Desc)
Next

Pretty standard stuff. Now in the 2nd Button’s Action event add this code, which populates the ListBox only with the first 50 rows:

Listbox1.RemoveAllRows
Listbox1.HasVerticalScrollbar = False
ScrollBar1.Visible = True
ScrollBar1.MinimumValue = 0
ScrollBar1.MaximumValue = Data.LastRowIndex
ScrollBar1.Value = 0
For i As Integer = 0 To 50
  Listbox1.AddRow(Data(i).Num.ToString, Data(i).Value.ToString, Data(i).Desc)
Next

Lastly add the ValueChanged event to the ScrollBar with this code, which fetches 50 rows after the value of the ScrollBar:

Listbox1.RemoveAllRows
For i As Integer = Me.Value To Me.Value + 50
  If i <= Data.LastRowIndex Then
    Listbox1.AddRow(Data(i).Num.ToString, Data(i).Value.ToString, Data(i).Desc)
  End If
Next

Now go ahead and run the project. Click the first button to see how long it takes to populate the ListBox. It took my computer about 11 seconds. You can scroll around at a reasonable speed, although it’s a bit unwieldy with that many rows. Another thing to note is that this uses about 750MB of RAM.

Now click the second button that does the lazy loading. It will show the first bunch of rows instantly. Use the scrollbar to display other rows and you’ll see they are also displayed instantly even thought they are not technically in the ListBox. This also uses only about 110MB of RAM.

Now this is just a quick example (download here) and doesn’t handle every situation, but you can certainly expand on it as needed. If you’d rather not create this yourself, another option is to try 3rd party ListBox or DataView controls which have this built-in. You can find some on our 3rd Party Product page:

https://documentation.xojo.com/Resources:3rd_Party_Products