UI.WPF.Modern icon indicating copy to clipboard operation
UI.WPF.Modern copied to clipboard

[STYLE] Updated focus visuals

Open mou-haz opened this issue 5 months ago • 34 comments

fix #148 focus visual now use control's corner radius. improvement of focus target to various controls

mou-haz avatar Jul 11 '25 01:07 mou-haz

Hey @NotYoojun , can u check if the new corner radius is correct ? also, button focus visuals are working now.

mou-haz avatar Jul 19 '25 15:07 mou-haz

Hi, can you also take a look at the settings expander? it gets some cut issue bug Settings Expander (Settings page example) Current: image image image

CommunityToolkit: image image image

The rating controls focus on WinUI seems like doesn't use rounded corners: Current: image

WinUI: image

The slider focus also seems like doesn't get effected by new rounded corners change: Current: image

WinUI: image

GID0317 avatar Jul 19 '25 17:07 GID0317

Hey @GID0317 , can u take a look now ? for the settingsexpander, the focus visual are being clipped by the scrollviewer even if i add adornerdecorator, the only workaround i found is to increase the margins on the settingsexpander, so focus visuals are away from clipping.

mou-haz avatar Jul 24 '25 01:07 mou-haz

Hi, for the workaround resolves the clipping issue perhaps @NotYoojun has any suggestion for this?

For the main clipping i think moving padding from scroll viewer to SimpleStackPanel fix the issue for outer settings expander: image

But the inner one is still affected like what mou-haz said: image

Also, I noticed the expander non rounded point (expanded state) get effected by the change. can you please take a look mou-haz? image image image

WinUI: image image image

Some also seems not effected on gallery side for expander expand mode: image

Calendar View and Picker: Current: image

WinUI: image

TreeView seems like need some adjustment too to Match with WinUI: Current: image

WinUI image

MenuBar and MenuFlyout Focus : Current: image image image

WinUI: image image image

TabView: Current: image

WinUI: image

Regarding the other issue you mentioned after testing, it looks great now

GID0317 avatar Jul 24 '25 05:07 GID0317

@GID0317 , can u take a look now ? i think all mentioned controls except the datepicker are fine in this PR.

mou-haz avatar Jul 24 '25 23:07 mou-haz

Hi, after testing I think the issue was fixed now. Great work!

But unfortunately, i think some of it still need some adjustment. the latest commit change makes the "context menu, MenuBar MenuFlyout" to bigger than before. i think the previous version size is already perfect (The radio menu items margin seems to be too): Current: Screenshot 2025-07-25 090851 image image image

Old Version: image image image image

I think the closer right size and focus for "MenuBar and MenuFlyout" was like the Combo box: image

For the "context menu" i think the previous commit already good since it should be different from MenuBar and MenuFlyout like in the WinUI: Current: Screenshot 2025-07-25 091657

Old Version: image

WinUI: image

The other one is it seems the selection indicator get overridden by the focus in this commit: Current: image

Old Version: image

WinUI: image

The last one is the Accent Button seems not effected by the rounded corners in the latest commit like what it should be Current: Screenshot 2025-07-25 090722

WinUI: image

Could you take a look at this issue? Thank you

GID0317 avatar Jul 25 '25 03:07 GID0317

@GID0317 , they are fixed now

mou-haz avatar Jul 25 '25 12:07 mou-haz

Nice works, its overall look good now!

The one on the left is for the copy paste context menu, and its focus visual is still full on WinUI. It should have some distance from the borders, as shown in the image. This behavior is specific to the context menu and can be observed across the WinUI implementation Current: image image

What the focus visual outline should it look like: WinUI: image image

Explorer: image image

Photo: image image

GID0317 avatar Jul 25 '25 13:07 GID0317

@GID0317 context menu shoud be fixed now

mou-haz avatar Jul 25 '25 16:07 mou-haz

Sorry for another report. I think I missed this one, but hopefully it will be the last one for now. which is the combo box. it should be rounder like dropdown, but it seems like the current one still look like on the images. I’ve included a comparison with WinUI and the dropdown for reference. Current: image

WinUI: image

Dropdown: image

GID0317 avatar Jul 25 '25 16:07 GID0317

@GID0317 i think it's correct now.

mou-haz avatar Jul 25 '25 19:07 mou-haz

Hi, after testing, I think I found a strange bug. on the first time when we do not interact with the Combo box its working but if we are interacting with it the rounded corners revert back:

https://github.com/user-attachments/assets/cce36dba-5dcb-42cb-94e8-d26ee0dd0631

GID0317 avatar Jul 25 '25 20:07 GID0317

using the #269 with this should fix the problem.

mou-haz avatar Jul 25 '25 21:07 mou-haz

using the #269 with this should fix the problem.

Okay then, I think it's great now. Thanks for your hard work on this issue!

GID0317 avatar Jul 26 '25 03:07 GID0317

❤️Thanks for your excellent work! It works well for me. And I think there is still something we can improve.

ListBox:

Unnecessary focus visual:

image

ListView:

Unnecessary focus visual:

image

DataGrid:

Unnecessary focus visual:

image

CalendarView:

No focus for circled items and unnecessary for rectangle items:

image image

TimePicker:

Unrounded focus visual:

image

Jack251970 avatar Sep 16 '25 10:09 Jack251970

@Jack251970 Thanks for your feedback and review. The requested changes have been applied, can u please take a look now ?

mou-haz avatar Sep 18 '25 02:09 mou-haz

@Jack251970 Thanks for your feedback and review. The requested changes have been applied, can u please take a look now ?

It works well for me, thanks for your work!❤️

There still exists one small bug: When CalendarView is initialized, it does not focus on today as WinUI3. (When another date is selected, it correctly focuses on that data as WinUI3)

WinUI3:

image

UI.WPF.Modern:

image

Thanks for your work again!

Jack251970 avatar Sep 18 '25 04:09 Jack251970

I can confirm this happen on my side too:

https://github.com/user-attachments/assets/4c001de0-f30a-4c21-b240-9a088745b12e

GID0317 avatar Sep 18 '25 10:09 GID0317

@GID0317 For the second issue (From After I dig deeper again i think there are ...) as you described recently, I think we should move it out of this PR and create a separator PR for it. I feel like this PR should not include so much things for clean reviewing experience (And I wonder if you can move those contents to #356? There are too much contents in this PR)

I noticed that you have create an issue for it #356. Good👍

Jack251970 avatar Sep 18 '25 10:09 Jack251970

Good idea! I think I'll move it to #148 instead of keeping it here, as it still relates to the previous change so no need to open another issue

edit: The #356 is another issue since I think even on hover focus navigate it shouldn't bugged like that and it's not related to the current issue

GID0317 avatar Sep 18 '25 11:09 GID0317

@Jack251970 Thanks for your review. @Jack251970 @GID0317 @NotYoojun , the initial calendar view focus should be working correctly now.

mou-haz avatar Sep 18 '25 16:09 mou-haz

@GID0317 can u see if it now works for #316 ?

mou-haz avatar Sep 18 '25 22:09 mou-haz

@Jack251970 Thanks for your review. @Jack251970 @GID0317 @NotYoojun , the initial calendar view focus should be working correctly now.

It works as expected. Thanks for your work!

Jack251970 avatar Sep 19 '25 01:09 Jack251970

@Jack251970 You are welcome.

mou-haz avatar Sep 19 '25 02:09 mou-haz

Thank you! I can confirm that the issue with #316 is resolved

GID0317 avatar Sep 19 '25 03:09 GID0317

@GID0317 You are welcome. Thanks for the review.

mou-haz avatar Sep 19 '25 11:09 mou-haz

@mou-haz I found one strange issue.

WinUI3:

Between these two elements, you can directly switch the focus.

image

UI.WPF.Modern:

Between these two elements, you need to press tab again to switch the focus.

image

Jack251970 avatar Sep 20 '25 08:09 Jack251970

It seems to be related to my recently opened issue in #358, and it can also be reproduced on one of the current stable versions

GID0317 avatar Sep 20 '25 09:09 GID0317

@Jack251970 @GID0317 I'll try to look into these.

mou-haz avatar Sep 23 '25 13:09 mou-haz

Hey @Jack251970, can u see if the problem still happens ?

mou-haz avatar Sep 24 '25 13:09 mou-haz