Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[markf2748]

Many Win11 main windows have remarkably high quality rounded corners, implemented by the OS itself.  For example, just look at a Win11 File Explorer window (especially with an 8x magnifier!).  But it's also true for many third party apps, big and small.  Here's a programming reference on the subject:

https://learn.microsoft.com/en-us/windows/apps/desktop/modernize/ui/apply-rounded-corners

While I have implemented decent rounded corners for MC's main window in the skinning engine through careful design, they are still not as smooth as what is available through the OS.  With MC, there are always sharp jagged rounds, more or less visible depending on the corner radius and outermost edge contrast with the desktop background.  The Green Eyes skin is a good example of the problem.

Can JRiver make use of new Win11 features to improve matters, while still retaining all the skinning flexibility?

[EnglishTiger]

Since Win 11 can't round all of MS's own Apps/Software then I seriously doubt it, which is a shame because Apple's Sequoia running on an M4 Mini does an excellent job of rounding the corners of every MC Skin.

[markf2748]

Since Win 11 can't round all of MS's own Apps/Software then I seriously doubt it, which is a shame because Apple's Sequoia running on an M4 Mini does an excellent job of rounding the corners of every MC Skin.

The point is, there are new features described in my MS reference, which should improve matters for third party apps.  There's plenty of evidence that it has already happened, both within and outside of MS apps, though not universally and not automatically for every case.  For MC, these features probably need to be requested from the OS at the code level by JRiver.  They are "auto-" only in the sense that the OS implements the graphics details, when possible within some limitations.

The question for JRiver is, can this be done and still maintain the skinning engine flexibility?
For example, is current per-pixel alpha setting along the edges (which does not fully work at the edges anyway, AFAICT) a show stopper for Win11?
Or can JRiver improve the per-pixel alpha along the edges, so we do not need to rely on the OS at all?

[Awesome Donkey]

Assuming it was possible for MC to work perfectly with rounded corners from the system (which I too would love to see), wouldn't it also need to support the system buttons for close/minimize/maximize/restore? Because the images used for the system buttons may not work correctly with rounded corners in MC. Honestly, since Craig has done it for macOS it's probably worth doing for Windows and even Linux too, because dealing with images can be a total pain in the you know what when creating or updating skins, especially for newer versions of OSes and especially for trying to implement scaling beyond 100%. I still haven't had time to update the ModernCards Linux skins for the newer Adwaita theme and newer Yaru theme and the changes to the close/minimize/maximize/restore buttons, for example. I can easily adapt to changes in the colors and frames, but the system buttons are always the most time consuming part when doing a skin.

I really wish we could get Acrylic/Mica material support in MC, then they can depreciate the OpenGL-based glass method for skins and I could finally proceed at trying to make a new skin that better fits Windows 11. Yes, developers can add Acrylic/Mica to Win32 apps on Windows. This is the top of my pipe dream wishlist for MC for the future. I actually would love to also see support for the rounded Mica material rounded menus that Windows 11 has for the right click and in Microsoft Edge has, it's pretty. Pipe dreams are fun, huh?

[markf2748]

... wouldn't it also need to support the system buttons for close/minimize/maximize/restore? Because the images used for the system buttons may not work correctly with rounded corners in MC.

At full screen, Win11 corners are square and the close button matches.  At less than full screen, the corners are rounded and the close button upper right corner radius matches (obvious with File Explorer or Firefox browser and other modern apps).  Easy way out is to let the OS deal with that, though I hate giving up the flexibility of button design! I prefer MC leave it up to the skin, as I sometimes change color of those buttons.

Currently MC skinned round corners retain the same radius at both full screen and less than full screen, which is fine with me.  I've adjusted my close button upper right corner radius to match, not so much of a problem.  But on clients with different monitor resolutions and sizes, the buttons end up needing position adjustments.    I haven't bothered figuring out how to skin that.  May end up just offsetting them out of the corner for simplicity, but so far just living with it.

For the record, another difference between Win11 and MC:  The ~2-pixel border around a typical Win11 window disappears when the window is expanded to full screen.  Any border around an MC window remains visible whether full screen or not.

[Awesome Donkey]

I was specifically referring to windowed mode, thankfully it works great with maximized windows (though there is an issue with the maximize/restore button when MC is maximized that happens).

A few years ago Matt added maximized TopBorder and BottomBorder image support so you can somewhat simulate rounded windows when windowed but it has issues with the edges, especially the bottom. ET is fully aware of that issue as well.

[EnglishTiger]

Let's compare Microsoft's rounded corner feature, Apple's and what is currently available in MC.
Yes MS's rounded corners look neat/smart but to implement it in MC means having to put up with those Oversized Win 11 Close, Minimize and Maximize/Restore Buttons.
Then you get the problem Bob and CNCB/Craig encountered when they replaced the MC Buttons with the Apple OS Buttons - OS supplied buttons will only ever do what the OS Creators want them to do.
In MC the Close Button only closes MC down in Standard View and, unless the user tells it otherwise, Mini-View; in Cover and Display Views clicking on the close buttons causes MC to return to the View MC was using prior to entering Cover or Display View. Let's look at the Maximize/Restore Button which is only ever displayed in Standard View where it is used for the purpose MS/Apple/Linux designated it for; but in Display View it is used to switch between FullScreen Mode with a Drop-Down PlayerBar and Windowed Mode with a locked in place PlayerBar.

Now lets look at 2 things that are different between Windows 11 and Apple OS15 (AKA Sequoia).
1. To get MS to auto switch between Light and Dark Mode you have to install a 3rd Party Ap, to get a Mac to do it you simply turn the feature on.
2. To get the OS to create Round Corners in MC somebody is going to have to make changes to the Windows Version of MC, on the Mac no changes to the Mac Version of MC were needed. Up to Sequoia 15.3.1 MC skins that did not have rounded corners had square corners but ever since Sequoia 15.3.2 Skins like ModernCards Dark have rounded corners when Windowed and Square Corners when Maximised; plus the Mac goes one better because it also rounds the corners of the Mini View Player. But, unlike that, still in development, MS offering Apple didn't have to change the size of the OS Close, Minimize and Maximize/Restore buttons. I suppose the only true difference between the MS and Apple implementation of using the OS to Round Corners is that in Win11 it is optional since MacOS 15.3.2 it's compulsory.

There has to be a very valid reason why the majority of the 86 MC Stock and Site Skins I've been working on have square corners given that even in the early days of MC creating a skin with round corners was a relatively easy task. So any changes made to allow the OS to modify the look an feel of any MC skin has to be OPTIONAL.

[Awesome Donkey]

Personally, since I only use the ModernCards skins I'd be fine with using system buttons in Standard View and button images in other views (as I don't use them) if the result was it could get rounded corners in the Standard View without having to perform voodoo rituals to get something suitable with images.

To be fair it's been a little while since I messed with rounded corners, maybe it's something to revisit soon to see if anything fruitful can be done with the ModernCards Mica skins.

[EnglishTiger]

AD one of the things I discovered about rounding corners is not to use the mainframe, frame or groupbox borders from skins, like the ModernCards skins, that use the old style DrawMode method.

P.S. have you ever noticed that although the mainframe borders in the ModernCards Skins end up as close as possible to being identical in size the instructions for the Dark Edition are very  different to the ones used for the Grey and White Editions.

[Awesome Donkey]

Quickly messed around with it some and actually made some progress. It's not perfect because of the aliasing and whatnot of the corners, but it's better than how I had it before in the WIP Mica skins.

WIP ModernCards Grey Edition with rounded... well, round-ish corners on Windows 11! It's probably as close as I'm going to be able to get though. And it certainly won't work with glass/transparency, it looks terrible.

[EnglishTiger]

Looks good AD - but don't make those corners too perfect or MS or Apple will probably have their lawyers chasing after you.

Quick question for anyone to answer - What's so new about rounded corners in Win 11, OS Aps with rounded corners was one of the selling points when Win 11 was launched way back in 2022 although anybody who participated in the pre-launch testing at some level or other knew about their existence before then.

But there's nothing new about using software to change an image with square corners into one with rounded corners, the HTML5 + CSS 3 Combination had that ability long before Apple and MS decided that a Computer Monitor was not an oversized E-Book Reader look alike. Maybe sometime in the next millennium they may decide that just like HTML5 & CSS 3.0 they will come up with an OS and Ap's that are fully responsive.

AD - If the rumours are true later this year MacOS 16 will introduce a brand new feature/ability to their PC's and those overpriced iPad/iPhone things -Transparent/Translucent icons.

[Awesome Donkey]

Ooooh, transparent icons!

Matt, does Platform apply to MainFrame_TopBorder and MainFrame_BottomBorder? If not, supporting that would be nice because this could be made to only work on Windows 11 and not any other platform, just in case there's interest for these rounded corner modifications just for Windows 11. If there's interest I might try doing the Dark Edition and White Edition skins this way too.

I also found a MC/skinning bug too when using certain fonts. If you set MC to use the Segoe UI Variable font (Text font style at 9pt) a white line appears in the top bar part of MC above the progress bar when using the stock Modern Cards Grey Edition skin. I would muck around to find a fix myself but ran out of time so mentioning it here.

[Matt]

The platform should work for any XML in an Entry or EntryGroup which is pretty much everything. If you find some area not working, just let us know and we'll see what we can do. Thanks.

[Awesome Donkey]

Good to know, I'll mess with it more this weekend.

BTW, what's the platform used specifically for Windows 11? I see in most skins it specifies 6.2-6.3 but ideally for rounded corners to work it has to target only Windows 11 and not Windows 10 or 8.1.

[Matt]

Platform can be Windows, Mac, or Linux today. It doesn't handle different versions of Windows itself.

[Awesome Donkey]

I see Platform="Windows" PlatformVersion="6.2-6.3" which specifies Windows 8, but there isn't anything for the newer Windows 11 itself (or even Windows 10) that can be the PlatformVersion. Having to target Windows 11 only here for the rounded corners to work as they're nice straight edges in Windows 10 and 8.1. Come to think of it, it may be hard to specify as I believe Windows 11 still uses 10 as its PlatformVersion in Windows itself if memory serves, unless it's a dot version of it.

[Matt]

Windows 11 is 10 for the version. We use a regex to match.

[Awesome Donkey]

Oooof, that'll be annoying to deal with, haha. Thanks Microsoft.

[Hendrik]

I have added support for specifying versions to the third component, so you can use something like "10.0.22000-?" for Windows 11 (22000 is the first Windows 11 release). Note that it requires at least two components, so 10 is invalid, needs to be 10.0, the third component is optional.

[Awesome Donkey]

Thanks Hendrik! I guess the future is bright for rounded corners now on Windows 11, well, at least for the three bundled ModernCards skins, haha.

[markf2748]

WIP ModernCards Grey Edition with rounded... well, round-ish corners on Windows 11! It's probably as close as I'm going to be able to get though. And it certainly won't work with glass/transparency, it looks terrible.

FYI:  A month or two ago I tried using rounded corners in an MC main window with transparency turned on in the Top Border.  In the artwork, I made all the interior Player Bar/Top Border regions opaque, but gave the rounded corners transparency in order to create anti-aliased edges in the artwork.  The edges retained their anti-aliasing transparency features when displayed by MC, a good thing.  But the net result looked terrible because those underlying, exposed outer corner regions were heavily blurred by MC and looked very ugly in this limited context.

I suspect am virtually certain the results would have been much better if it were possible for MC to apply transparency without background blur.  I have long wished that MC gave us control over the degree of blur invoked with their transparency.

[Awesome Donkey]

Oooooh, yes please. And fixing the bug where you can't use semi-transparent white without it appearing opaque would be nice too.

The thing is rounded corners with transparency used to actually work fine in MC (more or less), as you can see here: https://yabb.jriver.com/interact/index.php/topic,131789.msg914353.html#msg914353

This was the pinnacle of the Acrylic/Mica skins before rounded corners started to look terrible with transparent images and I got road blocked due to the issue with semi-transparent white always appearing opaque (I was doing experiments to see if I could replicate the Acrylic/Mica material in an image). Anyways something between then and now and rounded corners with transparent skins looks terrible regardless how you do it.

[markf2748]

The thing is rounded corners with transparency used to actually work fine in MC (more or less), as you can see here: https://yabb.jriver.com/interact/index.php/topic,131789.msg914353.html#msg914353

Mostly less.  The outer corners don't work fine.  In general they exhibit strong aliasing jaggies wrt desktop background.  On a red background the outer stair steps are less apparent due to your choice of red edge on red background.  With contrasting background the steps are very apparent, as expected under current circumstances.  There is no true anti-aliasing transparency going on between corner edges and desktop pixels.

[EnglishTiger]

Mostly less.  The outer corners don't work fine.  In general they exhibit strong aliasing jaggies wrt desktop background.  On a red background the outer stair steps are less apparent due to your choice of red edge on red background.  With contrasting background the steps are very apparent, as expected under current circumstances.  There is no true anti-aliasing transparency going on between corner edges and desktop pixels.

I've got some bad news for you markf2748 - those MS Rounded Corners in things like Explorer look just as bad when you take a screenie and then look at the rounded corners  in something like PSP.

[markf2748]

those MS Rounded Corners in things like Explorer look just as bad when you take a screenie and then look at the rounded corners  in something like PSP.

?? I disagree - you may be misinterpreting what you see.  On the desktop, MS rounded corners show anti-aliasing transparency pixels, which are always absent from MC's outer corners.  It is precisely these pixels which make the edge look smooth at normal viewing scale.  Attached are just a few of the many examples I've looked at. 

Attachment 1:  A modern third party app snapped on a white desktop background.  The inner red anti-aliasing pixels are partially transparent and look redish.  The outer pixels transparency makes them look grayish on the white background.

Attachments 2 & 3:  Snapshots of a Win11 Explorer Window.  They show exactly the same effects of partial transparency in the anti-aliasing pixels as the 1st image.  Their color is always sensitive to the background color through partial transparency.

Attachment 4:  JRiver MC, in which I have a black outer edge and an inner grey edge.  The inner edge generated anti-aliasing partial transparency pixels in Inkscape which preserved them in the png artwork.  MC displays them correctly.  The outer, outside black edge displays as simple stair-steps (except for one blue pixel artifact), which is very evident against a light desktop background.  For these outer pixels, Inkscape also saved anti-aliasing grey scale transparency pixels in the png file, but they are not displayed by MC (they can be seen by reading the file into Gimp or XnView).   So against a dark desktop background, the stair steps remain but will be less evident.  This is analogous to the red edge - red desktop example referenced by AD in Reply#21.

Notice the lack of anti-aliasing pixels on the mouse pointers.  They exhibit simple stair steps, similar to the MC rounded edge, and stand in stark contrast to anti-aliased rounded edges in Attachments 1-3 and the Close Button "x" seen in each picture.

[Awesome Donkey]

Getting that aliasing working in an image that when overlayed another (e.g. the close button or where the wallpaper shows through) that looks as close as possible to what Windows 11 does for both the system light and dark themes is the challenge. Never been able to replicate that one either.

[markf2748]

Getting that aliasing working in an image that when overlayed another (e.g. the close button or where the wallpaper shows through) that looks as close as possible to what Windows 11 does for both the system light and dark themes is the challenge. Never been able to replicate that one either. 

I think it's only an issue where the wallpaper shows through.

I just added a 4th image to my previous post and another (with different borders) is attached here. Both show that MC preserves anti-aliasing pixels for internal artwork, including custom windows buttons on artwork background color.  The trick is to use a graphics program which itself generates the anti-aliasing and then preserves it in the exported file.  If it is there in the png, then MC will display it, but probably not where an image has a transparent "hole" which lets desktop wallpaper show through.  FWICT, MC defeats partial transparency over the wallpaper by simply "omitting" pixels with transparency in those regions (i.e. turns them fully transparent).

I do all my vector art in Inkscape.  There is an option (easily missed), when saving a png, to preserve anti-aliasing in the export.  GIMP is also very good at creating and displaying anti-aliasing pixels.  If you read the file into a good image viewer (I use XnView), you will also see it, and you can easily convince yourself that the problem is with MC's interaction with the local desktop background - be it wallpaper, other windows, desktop icons, etc.

... as close as possible to what Windows 11 does for both the system light and dark themes is the challenge. Never been able to replicate that one either.

At this point, I just want something that works correctly and retains the flexibility that MC is known for.  I'm not looking for a 100% match to the appearance of MS Windows.  In fact, in a custom Close Button I changed the Windows red mouseover background color to a bluish color which matches my skin's highlights.  It's less jarring and I can more easily pick MC out of a crowded desktop with overlapping windows! 

4/14/2025 Attachment Note:  Here I drew the <MAINFRAME> border artwork large and used Scale="3" in my MC skin to reduce it.  The border artwork consists of 3 adjacent stripes |black|light gray|dark gray| (inside, middle, outside) with varying widths.  The outside dark gray stripe is a compromise to find something that works reasonably well on all desktop backgrounds, despite MC's stair step limitation there.