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!

Silverlight ItemControl For Beginners

Problem:

              Need to display collection of item but don’t want mouse over effect and selected item effect like we have in list box control and in the data grid control.

Solution:

               To solve the above problem that we can display the collection of items in hierarchical way like data grid control or like the list box control but we don’t want the effect of mouse over (as we can also remove the mouse over effect and selected item effect of the data grid control and list box control by customizing the style of these controls but we don’t want to have) we can use the Item control which is design for this purpose.

So we don’t want mouse over and selected item effect so we will use the item control for this purpose as it don’t have mouse over and selected item behavior as you can see in the Image 1 here you can see that I have used the Item control to display the customer information. User can view the customer information but can’t select the item from the list as he/she can use in list box and data grid control

Image 1

List 1

Let us start with the code how to insert the item control in the xaml and then bind the item control with the collection of item using MVVM (I have used MVVM pattern for this sample code if you have code behind then you can set the Item source of the item control in code behind by using the name of the control which you specify in the xaml).In the List 1 I have posted the code for the template of the Item control how the item control will looks. Here you can see that I have only use the scroll viewer control so if we have more items then it will show scrolling vertically as in my example item as display vertically. And then the Item presenter which will be the place holder for the items of the Item control will be displayed. So I have placed the scroll viewer only in the item control template and didn’t mention other attributes like background color , border color , font color etch for the entire item control.

List 2

Next is how to display the Item in item control. Here as you can see in the Image 1 that I have use card view border around the customer information and then horizontal line at the end.Here I have used the Item template as you can see in the List 2 and then inside the Item template I have used the data template or organization the detail of the each of the customer.Code for the Data template for the item template is shown in the List 2.
You can use the mouse event for the item control perform opertion like on mouse over you can display tooltip which will show further detail of the customer. Hope you have some idea of how to use the item control and if you have similar requirement to use the control which don't have the mouse over and selected item behaviour then you can use the item control instead of customize the list box or data grid control.You can download the source code of the sample from here.

All and any comments / bugs / suggestions are welcomed!