WPF/Windows Phone/winrt: checkbox and radiobutton list

This effect:

WPF:

Windows Phone:

Winrt:

 

(The radiobutton list is similar ).

 

Pay attention to the following details:

1. Multiple tab focus should not appear (both listboxitem and checkbox can obtain the tab focus ).

2. The entire control can be operated on the keyboard (this is not a problem with the ListBox of WPF/WP and the listview of winrt ).

3. The background of the default list should be transparent without any border. (The ListBox of WPF/WP/winrt is a white background by default. The ListBox of WPF also has borders, while the listview of winrt has no background)

4. the checkbox list can be multiple choices. The radiobutton list can only be single choice.

 

OK. The implementation is quite simple. Set itemcontainerstyle of itemscontrol, set the internal item template, and connect the ischecked attribute of togglebutton with the ischecked attribute of the internal item. Set istabstop of the internal item to false.

 

In WPF and Windows Phone: the style of the checkbox list (corresponding to the ListBox type ):

<StyleX:Key="Checklist"Targettype="ListBox">

<SetterProperty="Background"Value="Transparent"/>

<SetterProperty="Borderthickness"Value="0"/>

<SetterProperty="Selectionmode"Value="Multiple"/>

<SetterProperty="Itemcontainerstyle">

<Setter. Value>

<StyleTargettype="Listboxitem">

<SetterProperty="Istabstop"Value="False"/>

<SetterProperty="Template">

<Setter. Value>

<ControltemplateTargettype="Listboxitem">

< Checkbox Content = "{ Templatebinding Content } " Ischecked = "{ Binding Isselected , Mode = Twoway , Relativesource = { Relativesource Mode = Templatedparent }} " />

</Controltemplate>

</Setter. Value>

</Setter>

</Style>

</Setter. Value>

</Setter>

</Style>

 

Checkbox list style in winrt (for listview type)

<StyleX:Key="Checklist"Targettype="Listview">

<SetterProperty="Background"Value="Transparent"/>

<SetterProperty="Borderthickness"Value="0"/>

<SetterProperty="Selectionmode"Value="Multiple"/>

<SetterProperty="Itemcontainerstyle">

<Setter. Value>

<StyleTargettype="Listviewitem">

<SetterProperty="Istabstop"Value="False"/>

<SetterProperty="Template">

<Setter. Value>

<ControltemplateTargettype="Listviewitem">

< Checkbox Content = "{ Templatebinding Content } " Ischecked = "{ Binding Isselected , Mode = Twoway , Relativesource = { Relativesource Mode = Templatedparent }} " />

</Controltemplate>

</Setter. Value>

</Setter>

</Style>

</Setter. Value>

</Setter>

</Style>

 

As for the radiobutton list, it is okay to slightly modify the checkbox list.

First, select setter for multiple styles:

<SetterProperty="Selectionmode"Value="Multiple"/>

Delete, which becomes the default single-choice mode.

 

Then, change the checkbox in the template to the radiobutton control.