-
Notifications
You must be signed in to change notification settings - Fork 666
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Proposal: Update strokes that are currently using 2px to 1px #835
Comments
Will this proposal address the problem that Xbox has right now where their system apps disable the automatic scaling because they need finer control over the thickness of lines? |
I have proposed this myself, and I believe Microsoft did discuss it, but was conflicted. @chigy |
@jevansaks , I do not believe so. I believe they use 1px. So we'd have to draw 0.5px to have them draw 1px at 200% scale factor. |
Does Xbox still use those thin 1 epx borders for UI elements. I thought that had been superseded by the new Filled in panels with 2 epx spacing between elements. Of course there could be separate ThemeResources for when the DeviceFamily is Xbox. |
Added an open issue. |
Removed image
@mdtauk , you are right, the Xbox design no longer uses the 1px line. However the answer to @jevansaks 's question remains the same. What we are doing here does not address the scaling issue. |
@mdtauk , not sure what you mean? Open issue is merely asking if we make the 2px line to 1px, does it make the control smaller and does it introduce layout issues. I did not mean to say we are redesigning all of the controls? Where did I make a mistake? |
Status update: Reviewed with WinUI team and there was no immediate concern with the design's plan here to make the 2px lines to 1px other than the open issue around whether that impacts layout. Will be part of the consideration before a formal pitch is made to WinUI team. |
@chigy I think I may have mis-interpreted the intention behind this issue. I thought the issue was asking if the borders should change, and so i contributed to the discussion. I am still relatively new to using GitHub. The reason I posted the image was to illustrate a conceptual approach to handling borders on control to provide a consistent visual language to indicate how a control would function. As for the open question :- Most controls with a border are still measured from their outer dimensions. Overlays will now have a shadow, but that shadow is not part of the bounding box for the controls. The buttons within the bordered controls will need some adjustments in padding around the Icon to maintain the touch target sizing. |
We discussed as this change when scoping the Density work in 1809. One item that came up was the impact this may have on sight impaired users. I wish I had more concrete data on this, but we didn't pursue it during user research testing due to time and resources. Might be a good open question. |
Sounds like a good consideration. The focus state border would still be 2 epx thickness - but how High Contrast themes would adapt the controls needs to be considered too. |
Update: |
@mdtauk , The problem we are trying to solve with this border thickness update is to make the UI that is always visible lighter weight as we received it is a bit too accentuated unnecessarily. Calendar view's borders are designed so that it works with the hover state that gets user's attention (so we are not making it 1px as it could make it less visible). In other words, we do not have a problem with the CalendarView today so we are not going to go change it unless we identify an issue. |
@chigy Thank you for the response |
🎉This issue was addressed in #1172, which has now been successfully released as Handy links: |
Proposal: Control border stroke consistency
Summary
Across Windows products, applications are moving against using thicker 2px borders in favor of lighter 1px borders. This is to update default control visuals to use lighter borders to align with the majority of the visuals being drawn and implemented (except for GridView).
Rationale
Scope
*Just using the next version #.
Design details and visuals
All form type style controls to get 1px border update.
Button
DropDownButton
SplitButton
add link to comp
TimePicker entry point
ColorPicker controls on form
Visual comp
ComboBox entry point
Editable ComboBox entry point (NOTE: Focus state's accent color border remains 2px)
DatePicker entry point
CalendarPicker entry point
Visual comp
CheckBox
RadioButton
ToggleSwitch
Visual comp
TextBox (NOTE: Focus state's accent color border remains 2px)
RichEditBox (NOTE: Focus state's accent color border remains 2px)
Visual comp
TreeView's checkbox
Visual comp
GridView's checkbox
add link to comp
Open Questions
The text was updated successfully, but these errors were encountered: