Customize Window top bar possible

Is it possible to get something like the new Windows 10 Settings window?
Basically I want to change the color and remove the thin line between mainwindow and menu (also see screenshot below).

Also, is there a way (declares?) to get rid of the thin line between the main window and menu?

Not possible it seems?

You posted your question 6 hours ago… here in the United States that was between 10pm and 1am… might want to be patient and give people time to wake up, have some coffee, start their day etc.

Everything is usually possible. More or less easily, more or less likely…

[quote=203654:@Christoph De Vocht]Is it possible to get something like the new Windows 10 Settings window?
Basically I want to change the color and remove the thin line between mainwindow and menu (also see screenshot below).
[/quote]

The settings in Windows 10 are a Modern API application. Hence what you see is not a regular window, it is a composition based on the borderless plain box window. Basically, think canvases, rectangles.

There are two issues here :

  • The current plain box window in Xojo under Windows 10 is not a plain box, it has a small lighter bar across the top. I filed a bug report feedback://showreport?report_id=40171 but until fixed, it will be necessary to apply a declare workaround. The basic code to render transparent that extra lighter bar is in the the example /Platform-specific/Windows/CustomWindowShape. See the top declares in the ShapeForm method. Instead of going pixel by pixel just create a rectangular region to erase the glitch.

Also in the same program, note the method to make the plain box window movable, useful to re-create the bar move.

If I remember right, that technique does not work quite right in XP.

[quote]Also, is there a way (declares?) to get rid of the thin line between the main window and menu?

[/quote]

You may want to have a look here to see how to change the menu color. You will need to build the declares.

I should also point that the color of the window bars can be changed by the user in the Control Panel or in Personalization with the themes. Then having a menu of the same color as the window bar requires detecting it. More interesting even, if the glass effect à la Vista/Windows 7 is used (kind of semi transparent a bit like Apple’s vibrancy) for the bar and windows frames. …

I know you seem to prefer declares, but for this one, I would personally rather go the plain window custom skin. But that’s me.

What was called “Metro” for Windows apps, now called UWP apps, as is the Settings app in Windows 10, is strongly guided by the need to support touch. Larger buttons, larger listboxes, clean look. They are also influenced by web design. No surprise, since CSS/JavaScript is one of the development platform for them.

Look at https://dev.windows.com/en-us/design#1 for guidelines. They are a real good read, rather exhaustive. Sort of the Windows 10 equivalent of Apple’s HIG.

I shall think that an app designed today for Windows 10 should NOT have old fashion Desktop style windows, but the much cleaner look of Modern API apps. I remember you complaining that the Windows apps looked ugly. I think this new design may correct that impression.

Yes, same way Microsoft is doing it. Get rid of the obsolete Menus. Just look at how the new Calculator App is set up. Menus take up too much room when you’re making them for touch screens.

Plus the default Desktop menus are almost impossible to use with fingers, as they are far too small. PopupMenu and ComboBox can use much larger fonts and be made friendlier, but Microsoft still recommends to use Lisboxes instead (as in the Settings left pane).

That leaves the question how to change the window top bar color? :slight_smile:

in principle, that is under the control of the user, who does that through the themes.

There are hacks, but I rather use a plain box window to which I add a canvas that looks and feel the very exact way I want.

If you feel like applying a declare, see http://stackoverflow.com/questions/23634056/can-you-change-the-color-of-the-titlebar-of-a-userform-in-vba-using-windows-api ; I believe the posted code is fairly easy to adapt to Xojo.

[quote=204200:@Michel Bujardet]
If you feel like applying a declare, see http://stackoverflow.com/questions/23634056/can-you-change-the-color-of-the-titlebar-of-a-userform-in-vba-using-windows-api ; I believe the posted code is fairly easy to adapt to Xojo.[/quote]

Thanks for the link Michel.
Unfortunatelity, I am not very familiar with Windows declares. No idea where to start. :slight_smile:

The best I can offer is a workaround to obtain true plain box windows in Windows 10 :

Const WS_BORDER = &H800000 Const WS_DLGFRAME = &H400000 Declare Function SetWindowLong Lib "user32" Alias "SetWindowLongA" (hwnd As Integer, nIndex As Integer, dwNewLong As Integer) As Integer dim rien as integer = SetWindowLong(self.handle, GWL_STYLE, WS_BORDER)

There are three possible styles :
0 (zero) the box has no border
WS_BORDER it is a thin border as in the Xojo splash window, or in usual Windows 10 dialogs
WS_DLGFRAME is the kind of old fashion way dialog borders used to look in XP

Now all you need to do to emulate the bar is to place a 30 pixels high rectangle or canvas on the top of that box, together with the classic minimize, maximize and close box.

To be able to move the window, look into the /examples/Platform specific/Windows/WindowShape project.

May I suggest the excellent book Eugene Dakin just released
https://forum.xojo.com/23516-i-wish-i-knew-how-to-implement-win32-declares-with-xojo-on-wind

@Christoph De Vocht Did you ever have any luck with this?