Use the template to create the radiobutton-List Control

 

This article uses the creation of a simple control to see how powerful the Silverlight template system is (of course, this is just a bit more powerful ....) I am inspired to write this article because I am hanging out on the internet and want to learn Silverlight through this exercise, but what I hope most is that this article will be helpful to anyone who needs it.

 

 

 

 

 

Control Requirement: use the single-choice button to display entries and accept the selected list box

It looks like this:

 

Solution 1: merge elements using Silverlight

This control can be combined by the following two elements:

1: radiobutton

2: ListBox

So the simplest code came out:

 

<ListBox width = "150" Height = "60">
<Radiobutton content = "single choice button 1"/>
<Radiobutton content = "single choice button 2"/>
<Radiobutton content = "single choice button 3"/>
<Radiobutton content = "single choice button 4"/>
</ListBox>

 

Let's see the results:

 

 

Looks good ~~ If our requirements change and we need to select the first radio button by default, let's continue to change it:

 

 

Code

<ListBox width = "150" Height = "60">
<Listboxitem isselected = "true">
<Radiobutton content = "single choice button 1"/>
</Listboxitem>
<Radiobutton content = "single choice button 2"/>
<Radiobutton content = "single choice button 3"/>
<Radiobutton content = "single choice button 4"/>
</ListBox>

 

 

The result is as follows:

The first item in the list is selected, but the single-choice button is still not selected, so we can continue to modify it:

 

 

 

Code

<ListBox width = "150" Height = "60">
<Listboxitem>
<Radiobutton content = "single choice button 1" ischecked = "true"/>
</Listboxitem>
<Radiobutton content = "single choice button 2"/>
<Radiobutton content = "single choice button 3"/>
<Radiobutton content = "single choice button 4"/>
</ListBox>

 

The first button is selected by default. The result is as follows:

The selected button is acceptable by default. However, when we click the second button, we find that the first button is still selected. This problem can be solved, and the single button can be grouped into one group:

 

<ListBox width = "150" Height = "60">
<Listboxitem>
<Radiobutton content = "single choice button 1" ischecked = "true" groupname = "go"/>
</Listboxitem>
<Radiobutton content = "single choice button 2" groupname = "go"/>
<Radiobutton content = "single choice button 3" groupname = "go"/>
<Radiobutton content = "single choice button 4" groupname = "go"/>
</ListBox>

 

 

In this way, a target control is merged, but it is not a real control. When you click a list item, the single-choice button will not be selected, this option can be selected only when you click the single-choice button in the list item. It is actually quite powerful. Here we use radionbutton as the content control of ListBox. Next, let's take a look at using the template technology to better meet this goal.

 

Solution 2: Use the template technology and binding technology to implement

The itemcontainerstyle attribute of ListBox must be used:

Gets or sets the style used when the item container is rendered.

 

C #
public Style ItemContainerStyle { get; set; }

XAML attribute element usage
<ListBox> <ListBox.ItemContainerStyle> inlineStyle </ListBox.ItemContainerStyle></ListBox>

Create a listboxitem template, set the template content to radionbutton, and bind the ischecked attribute of radiobutton to the isselected attribute of listboxitem:

 

Code

<ListBox scrollviewer. verticalscrollbarvisibility = "visible" width = "100" Height = "60" X: Name = "LB">

<ListBox. itemcontainerstyle>
<Style targettype = "listboxitem">
<Setter property = "template">
<Setter. value>
<Controltemplate targettype = "listboxitem">
<Radiobutton ischecked = "{binding Path = isselected, relativesource = {relativesource templatedparent }}"
Content = "{templatebinding property = content}"/>
</Controltemplate>
</Setter. value>
</Setter>
</Style>
</ListBox. itemcontainerstyle>
<Listboxitem isselected = "true">
<Textblock> single choice button 1 </textblock>
</Listboxitem>
<Textblock> single choice button 2 </textblock>
<Textblock> single choice button 3 </textblock>
<Textblock> single choice button 4 </textblock>
</ListBox>

 

 

In this way, when you select a list item, the selected Attribute of the button changes with the change of the list item, and the single-choice button does not need to be grouped, this is because it is not the content control of the list control. Check the final result: