Making Controls Beautiful

Hey guys,

Is there any way to implement a “cool” default design to new desktop apps in Xojo?

A button in Filemaker 14/15 looks smooth and modern, so does the Twitter Bootstrap framework for web apps. But in Xojo, it seems to me that I either have to hire or become a designer.

I found this which looks alright, but I’d still far away from what would be possible/really modern:

This would be an example of what I think looks cool:

Thanks for your help!


You can do anything you want using the Canvas. For instance the colored dotted list, and the gradient progressBar. A vast majority of Jeremie Leroy’s controls are made that way.

But basically the picture you have on DropBox show a list that can be made with the regular ListBox in minutes. Well, maybe a couple hours for someone who is moderately competent.

Cool comes more from your own aesthetic sense than the intrinsic possibilities of the language.

[quote=297643:@Michel Bujardet]

Cool comes more from your own aesthetic sense than the intrinsic possibilities of the language.[/quote]

Hey Michel,

Thanks for your quick answer. Exactly there is the problem: my own “aesthetic sense” is limited to liking or not liking a design. I am just not able to say why and which elements of a design I like.

Hence, I was looking for an easy way out. Something like a " Xojo CSS" file that I just add to my project.

Best regards

uh sounds like “make controls great again”? :wink:

btw. I am waiting for native Xojo support of web frameworks like foundation…

When you find what you like, just copy it :slight_smile:

Sorry to tell you that so bluntly, but when it comes to developing applications, there no “easier way”. Well, there is, it is subcontracting, but it is usually a costly one.

Will gave you, I think, the best advice : copy. When you find something you like, as the picture you posted, copy it. I assure you that sample is possible to do with ListBox and Canvas.

This reminds me of a story from John Lasseter, Chief Creative Director of Pixar, on one of the very earliest animated shorts by Pixar “Andr and Wally B.”:

[quote]I remember this guy. He came up to me and he said, “John, what software did you use to animate Andr and Wally B.?”
I said… “Just a key frame animation system much like other systems I’ve seen.”
He goes, “No, no, no. It was so funny. What software did you use?”[/quote]

The software is only a tool; whether you’re a writer, an artist, an animator, a programmer, or a web or UI developer, your results are going to rely on your ability to create a good story, picture, animation, program or interface.

Alright, thanks guys. I guess I will have to improve my design skills then… And try to copy as much as possible.

Has anyone tried out these, maybe they could help:

You might find this thread useful…

Listbox Design

All of this can be done in pure Xojo.

#1 Start playing with the canvas.paint and the graphics functions within Xojo.
#2 Look at listbox.cellTextPaint and cellBackgroundPaint events to customize how a listbox works.

Do not use pre-rendered images, you may be tempted to do so for this kind of interface, but what you’ve shown can be done without images, not to mention that images are fixed resolutions (unless containing multiple resolutions).


These can be done in native Xojo, and I would recommend that you start with pure Xojo, however you’ll want to ‘moving’ towards to using platform native gradients in the future, these will be much quicker and allow for clipping (rounded corners).

For the typography;
I would also recommend using Xojo’s font function and a list box to print out the system font names as Xojo understands them. This is the simplest way to learn how to draw text with different weights.

Eventually you’all get into declares and be able to ask the system for different fonts of weights and such.

One useful hint when developing long-lasting business apps: One reason why I am using XOJO are the native OS-specific controls. In most cases even when the underlaying system changes completly, they still will work. It’s a reasonable compromise to find a good mix between custom made and native controls.