[Bug] Selection Highlight Outline (Focus Visual) doesn't have rounded corner

[GID0317]

Describe the bug

Every highlight outline in WinUI has rounded corners. but this doesn't apply to the ListBox, which was designed to have no rounded corners. So, outside the ListBox, it should have rounded corners.

iUWM:

iUWM ListBox:

WinUI:

WinUI ListBox:

Reproduction

Select item > press arrow on keyboard to navigate > Highlight Outline showed

Suggested Solution

No response

Library Version

0.10.0

Operating System

Windows 11

Framework

.NET Core and .NET

Framework Version

8

Source of Package

Microsoft Store (Gallery)

Additional Notes

No response

Validations

• [x] Check that there isn't already an issue that reports the same or similar problem.
• [x] Check that this is a bug in the library that should be fixed, not a feature, also this is not about the documentation. (Or please choose the right repo and template.)
• [x] This is one single problem, or a few problems with the same cause. (If you want to report multiple problems, please create one issue for every single problem.)
• [x] You've checked that this problem still exists in the latest version. (Keep in mind that we don't provide any support for old versions.)
• [x] You know that we can't guarantee that we will satisfy your request. This is not really our duty to do everything anyone asks for. Also, you will treat our staff, contributors, and other users with respect and kindness.
• [x] You're sure there's something wrong with the library itself, not how you're using it. (If you are having issues using it and need help, please go to discussion.)

[mou-haz]

Hey @GID0317 , can u take a look at #282 ?

[GID0317]

Hi, after I test it (With alt, Tab or Shift+Tab key) the rounded corners selection is working good for the navigation view, context menu of settings card, Expander with card style, AppBarButton, AppBarSeparator, AppBarToggle, CommandBar but the secondary command gets cut off of on the top and bottom part, CommandBar Flyout but the three dot was still not effected.

So overall, it seems like it’s not globally affected in some areas. For instance, the context menu remains unaffected: Current: WinUI:

[mou-haz]

@GID0317 i tried to look for controls that didn't have the expected focus visual and found that some controls like the expander control need to update their style to match their winui ones, so i think a separate PR for them may be better. I also made the necessary changes needed for the focus visual to work on buttons, toggle switch and menu items , and i think they are fine now.

[GID0317]

No problem at all, I will create a separate issue for that one. Thanks for your great work!

for the listed change for buttons, toggle switch and menu items after I am testing it the button can't be highlighted again

for the secondary commands context menu still has this issue like on the images bellow Current: WinUI:

for the toggle swich could you please make the top and bottom padding is like on the WinUI? Current:

WinUI:

[mou-haz]

ok, i will look into them.

[mou-haz]

@GID0317 , i think they are good now.

[GID0317]

Thank you, now it looks good on my side

[GID0317]

After I dig deeper again i think there are also things that need adjustment, like when navigating using the keyboard, the blue accent outline behavior was unlike the winui3 (FIXED ✅)

WinUI3:

https://github.com/user-attachments/assets/ddb4d8fa-9c02-4cd2-82e7-1439c7fc47ff

Current:

https://github.com/user-attachments/assets/65d3c50e-f665-49dd-9f78-7c8f8596b4f1

---

Moved to https://github.com/iNKORE-NET/UI.WPF.Modern/issues/359

---

The Copy-Paste Context menu outline change also seems to have affected the menu flyout after further investigation. When I checked, the Copy-Paste menu on WinUI3 uses its own styling for focus, while the current version seems to use the same style as the menu flyout, causing the menu flyout to be affected as well

WinUI3:

https://github.com/user-attachments/assets/8023e62e-50fc-402e-bc20-d2b289405862

(As seen in the video, the menu flyout uses a different focus styling compared to the copy-paste menu. The menu flyout adopts a focus style similar to the menu bar rather than the copy-paste menu)

Current:

https://github.com/user-attachments/assets/83bd5fa7-df2f-46ef-ad65-1ecd3d10c216

(As seen in the video, the current focus styling was different from WinUI3 styling. The menu flyout uses the same style as the copy-paste menu, which causes the flyout menu focus style to be inconsistent between menu items. in the video the menu items that has a child (That has ">" Symbol) was the right styling for menu flyout while the other is inherited the copy paste menu which shouldn't use on menu flyout)

[GID0317]

It seems that some changes were needed for the time picker, to match the behavior like in WinUI3. so, in winui3 the focus is placed beneath the blue selected layer, whereas currently it appears on top of it

WinUI3:

Current:

[GID0317]

Alright, looks like the CalendarDatePicker and CalendarView are LGTM so far! I’ve already tried screening the whole focus mode behavior via the Gallery (I hope there were not any issue left) and it seems the only remaining issues are related to menu items specifically the menu flyout since the problem appears to be widespread and affects more than one control. I’ll open a new issue for that, and I think we can focus on two last issues like time picker and MenuFlyout with CopyPaste Context menu Flyout issue above instead