Simple Way To Create CheckBox List In Silverlight

Problem

                We have a requirement to create the Checkbox list control so that user can select multiple options from a given list for his/her choice.

Solution

                Solution to above problem is very simple if you read my post "Silverlight ItemControl For Beginners" where I have explained how to use the item control in Silver light and why item control is used.To create Checkbox list control we will use same item control as it don’t have the selected item and mouse over behavior which we don’t need for the Checkbox list control.You can see the output in the Image 1 as shown, here you can see that I have also All option and then list of the customer name as Checkbox list so that user can select one or more customer from the list or he/she can select all by using the All option.

Image 1

In Image you can see that some of the customers are checked and some are not and by default the All option is not checked.
Let us start with the xaml code first mean how we created the checkbox list for the users so that he/she can select one or more customer from the given list of customers.The xaml code for the checkbox list is listed in List 1 here you can see that I have first inserted the check box control for the All option which is used to checked or un-checked all check box control depending on the value of the All check box checked property.The All option check box is bind with the IsAllSelected property of the view model which has mode of two way as based on IsAllSelected value I have to do some processing for other checkbox so that the y will be checked or un-checked.

List 1

Next is the item control tag here you can see that I have used stack panel layout for the Items Panel of the item control and in the item template I have used the check box control, the IsChecked property of checkbox is bind to the IsSelected property of the view model and the content property contain text block which is bind with the First name and the last name of the customer. Here you can see that Item control is bind with the CustomList which is collection of customer records.
Let me explain some of the code in the view model which is important. First is the property which is used to bind with the All option of the check box (which is used to checked or un-checked all the check box control in the list so that user can select all the option of the checkbox list or un-check all the options.The IsAllSelected property code is listed in List 2; here you can see that in the setter of the property I have some code which is used to set the IsSelected property of every record to true if the isAllSelected property is true and if the isAllSelected property is false then false is set to IsSelected property of every customer records.

List 2

In the List 2 you have notice the variable _isAllSelectedExecution, which is used to restrict the execution of the individual check box IsChecked changed property code. At the start of the code I set true to the _isAllSelectedExecution variable so that it will restrict the code execution of the Individual checkbox property changed as we are for the time being executing the operation when user checked or un-checked the All option.
Next is the code which is executed when user click any of the check box control other then All option. Here you can see that at the start I have place condition to check the value of the _isAllSelectedExecution variable and if the value is true then it will return as the All option code is being executed and we don’t want to execute the code as listed in List 3.

List 3

Next statement is to check the value of the sender IsSelected property if value is false then set the _isAllSelected to false and raises the notification property event; here I have used the private member to set the _isAllSelected value, if I set the IsAllSelected mean if I used the public property then it will un-checked all the checkbox as I have write code for checked and un-checked in the setter of the IsAllSelected property.In the else statement mean if the send IsSelected has value true then we need to check all the IsSelected properties of the customers so that if user checked all the check box in the list then All option should be checked.In the code I will check for the first false value of the IsSelected and set false _isAllSelected property and raise the property changed event to notify the UI and then break the for each loop.
This is the easy way how to implement check box list control from my point of view if you have your own way to implement the checkbox list control then please do mention.You can download the source code of the sample from here.

All and any comments / bugs / suggestions are welcomed!