Microsoft-ui-xaml: Question: Can we get the default corner radius of checkboxes in ListViewItem to rounded, or have a property to set?

[hjohnson12]

Hi Team!

So a feature I'm currently working on a feature in my UWP application for tag selection. I was hoping to be able to set the corner radius of the Check-boxes inside of the ListViewItems to the same that I have for my tags beside it but I cannot find how to do so and it seems as though it's not supported 🤔

Example:

I was checking this page, ListViewItem Class, and this page ListViewItemPresenter Class, as well as the default ListView API page for a property I could set for the CheckBox Corner Radius, but I only found for brushes and such.

Main Question: I'm mainly wanting to see if we're able to get those to either a default corner radius, or if there is a property I'm missing that could achieve this without having to add in my own custom checkbox to the data template and such?

Thank you for your time :)

[hjohnson12]

Also here is where the XAML for my ListView is from the above image: ListView from example

[Felix-Dev]

Currently, you probably have to add your own checkbox visual (for example via the DataTemplate). By default, ListViewItems use a ListViewItemPresenter which displays the checkbox and does not expose a corner radius/checkbox visual property. You could use the ListViewItemExpanded style which contains the UI to display the checkbox, however, you would likely have to create a hard-copy of the style and then modify it which should be avoided if possible. You will also lose the benefits provided by the ListViewItemPresenter.

I created an own selection visual in a project of mine in the past because I found no way to modify the default provided checkbox visual (using ListViewItemPresenter) you get when setting the selection mode to multiple. There is a ListViewItemPresenter.SelectionCheckMarkVisualEnabled property which sounds like it could be used to hide the default selection visual, but it's not doing that. In fact, I'm not sure if it is even working as intended. Setting it to false, for example, results in the following look (list items are named Item2 (selected), Item3 (unselected)):

That doesn't look correct to me 🤔

Edit: You can use the ListViewBase.IsMultiSelectCheckBoxEnabled property to hide the framework provided visual and create your own. I believe that's what I did back then (it has been a while).

[ranjeshj]

@Felix-Dev SelectionCheckMarkVisualEnabled set to false showing the check box looks like a bug.

There is also a IsMultiSelectCheckBoxEnabled property on ListView which seems to disable showing the check box.

@chigy Should checkbox have rounded corners ?

[Felix-Dev]

@ranjeshj

There is also a SelectionCheckMarkVisualEnabled property on ListView which seems to disable showing the check box.

Did you mean ListViewBase.IsMultiSelectCheckBoxEnabled? Yes, that one works. @hjohnson12 Seems like you can use this porperty to hide the default selection visual and provide your own if the customization options available are not enough.

[ranjeshj]

Did you mean ListViewBase.IsMultiSelectCheckBoxEnabled? Yes, that one works. @hjohnson12 Seems like you can use this porperty to hide the default selection visual and provide your own if the customization options available are not enough.

Yep. That's the one. Fixed my comment. Thanks.

[hjohnson12]

@ranjeshj

There is also a SelectionCheckMarkVisualEnabled property on ListView which seems to disable showing the check box.

Did you mean ListViewBase.IsMultiSelectCheckBoxEnabled? Yes, that one works. @hjohnson12 Seems like you can use this porperty to hide the default selection visual and provide your own if the customization options available are not enough.

@Felix-Dev @ranjeshj Thanks for the responses! I'll give the IsMultiSelectCheckBoxEnabled a try out / the template and go from there! 😁

Per the default corner radius or separate property possibility, it would be great for future cases since most of the controls have defaulted to either 2px or 4px CornerRadius and the standalone CheckBox is already at 2px. I have no idea how frequent this comes up though with other people though!

[chingucoding]

I think we should probably add a themeresource, e.g. "ListViewItemCheckboxCornerRadius" that developers could use to set the corner radius of the CheckBoxes the ListView renders.

Of course this would only make sense, if this is a direction design would be fine with. @chigy FYI.

@ranjeshj What is your opinion on adding an additional resource here?

[ranjeshj]

Sounds good. Do we need to expose one for CheckBox also ? @chigy thoughts ?

[Felix-Dev]

@ranjeshj @chingucoding Instead of introducing a new resource, why not simply use the ControlCornerRadius like the default CheckBox style already does? See https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/CheckBox/CheckBox_themeresources.xaml#L297

That way, this can be set once and all checkboxes have the same radius, no matter if they are the ListViewItem selection checkbox or a standalone checkbox control. Otherwise, if we introduce a new resource, then the developer uses ControlCornerRadius to set the corner radius of checkboxes and then also has to use another resource to make the ListViewItem selection checkbox match the app's checkbox look. I don't think adding a new resource is worth the confusion it might add and the developer should always be able to set a unique checkbox corner radius for a ListView anyway:

<ListView.Resources>
   <CornerRadius x:Key="ControlCornerRadius">x,y,w,z</CornerRadius>
</ListView.Resources>

I've also checked TreeView's checkboxes in multi-selection mode and they respect the ControlCornerRadius resource. As such, we should do the same for ListView/GridView selection checkboxes.

We could think about adding control specific corner radius resources like currently done for border thickness. Something like CheckBoxCornerRadius and that for each control. I quite like the default ControlCornerRadius though as you can set it once and - in theory - have all controls have the specified corner radius as default. From there, you would add specific control adjustments if necessary.

[mdtauk]

If there are Control Specific brush resources, the same should apply to CornerRadius. And by default the specific brush value can point to the generic ControlCornerRadius value.

[chigy]

Sounds good. Do we need to expose one for CheckBox also ? @chigy thoughts ?

@ranjeshj
We already have an item tracking this work. We cannot do this until WinUI3 so it is on our backlog.
https://github.com/microsoft/microsoft-ui-xaml/issues/1096