Skip to content

Improve Your Project’s Look – Windows UI Tips

With Xojo 2018 Release 1 now available, Windows apps now have a more stable and flicker-free UI than ever before. In order to provide these improvements, Xojo and your apps do ask a bit more from Windows. Here are some tips that will help ensure your Windows apps look and feel their best.

Set Transparent Property for Controls to False

UI controls now have a Transparent property which determines whether the control is transparent on Microsoft Windows. The default is False for new controls added to layouts. For existing projects and controls, this property is set to True for maximum compatibility.
However, controls that have Transparent set to True require more drawing, use more memory and are thus slower. For best results you should set the Transparent property to False for as many controls as possible.

Consider ContainerControl DoubleBuffer Property

Set this property to True to reduce flicker on Microsoft Windows when the ContainerControl is scrolled. Otherwise you can leave this to False.

Avoid Overlapping Controls

The easiest thing you can do to prevent flickering is to not overlap any controls. Overlapped controls result in more requests to redraw the controls which can result in flickering and slower performance.

Use a Canvas

For best results, display any graphics using the Paint event of a Canvas control. Stay away from using the Window Backdrop property, the Window Paint event, the Canvas.Backdrop property or the ImageWell control. Although those techniques work fine in certain situations, they often lead to flickering in more complex window layouts.

On the Canvas, the first thing you want to do is turn off the EraseBackground property. The EraseBackground property prevents the Canvas from being erased (and showing as a white rectangle) before it is redrawn, which is another common source of flicker. (Deprecated in Xojo 2019r2) You should also check your usage of the DoubleBuffer property. In many cases you will find you can leave it set to off (False) for best performance.

With these tweaks, you can do all your drawing in the Paint event using the supplied graphics object parameter: g.

Note: Do not do any drawing directly to the Canvas.Graphics property. This ability was deprecated in 2011 and is strongly discouraged. Drawing in this manner will likely increase flickering and will definitely slow down graphics updates.

You can have separate methods that update the graphics, but they need to be called from the Paint event with the graphics object supplied to the methods as a parameter. Another technique is to have a Picture property that you use to draw you graphics to and then in the Paint event handler you draw the Picture to the Canvas to display it.

When you want the Canvas to update itself, redrawing any changes to your graphics, you call the Invalidate method:

Canvas1.Invalidate(False)

You can also call the Refresh method:

Canvas1.Refresh(False)

The difference is that Invalidate tells the Canvas to update itself when it gets a redraw request from the operating system. The Refresh method tells the Canvas to update itself immediately. Normally you want to use Invalidate as it results in fewer draw requests, improving performance and reducing flicker.

To reduce flicker, both of the above commands pass False for the EraseBackground parameter (which defaults to True) so that the Canvas is not erased before its updated contents are drawn.

Remove or Update Older Code

If you previously had specialized code in your app to help minimize Windows flicker, you should consider removing it as the code may prove to be unnecessary and cause worse performance.

A Note About Virtual Machines

Many people run Windows in Virtual Machines. If you do so you’ll want to ensure that you have the best performance possible. Xojo apps use Direct2D for all screen drawing and not all VM software has properly accelerated graphics drivers for this.

In particular, VMware Fusion has rather poor performance when “Accelerate 3D Graphics” is enabled in the Display preferences. For best performance you should make sure that option is turned off.

Alternatively, Parallels Desktop and VirtualBox both seem to have better graphics performance with Direct2D and Xojo apps.

For more information:

*Minor update re: deprecation 3/2021