RadioButton List Using Silverlight

Problem:

              Need to create radio button list so that user can select one option from the given list of the collections.

Solution:

             The solution to the above problem is very simple if you read my last post how to create checkbox list control. We will use similar approach as we have used in the create checkbox list control. You can see the output in the Image 1 as shown below, here you can see that I have list of customer from where user can select one of the customers and the selected customer is displayed at the end of the list.

Image 1

The xaml code for creating the radio button list is similar to the checkbox list but what we need to replace the checkbox control with the radio button control (as in case of radio button we know that radio button is used to select only one option from the group of radio button so we don’t need to have the All option (for selecting all the options) which we created for the checkbox list). So in the List 1 you can see only the Item control which contains the radio buttons in its item template so that we have the radio button list for the user to select the option.

List 1

There is not much in the home view model (view model for the home view, views are located in the view folder and view models are located in the viewModel folder). Just based on the property changed event for the particular radio button I just display the serial number and the full name of the record which is currently selected by the user. You can download the source code of the sample from here.

All and any comments / bugs / suggestions are welcomed!

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!

Microsoft CRM 2011 Silverlight: Busy Indicator Style

I was working for Microsoft CRM 2011 for more than 1 year and I like the web resource specially Silver light 4 which can used as web resource in Microsoft CRM 2011. I have really like the GUI of the Microsoft CRM 2011 and especially the control which I have design for this post " Busy Indicator". I have design the style of the Busy Indicator like the busy bar of the Microsoft CRM 2011, You can see the output in the Image 1 as shown.

 Image 1

List 1

I have created two similar type of busy indicator style and both are applied on the busy indicator control.First one is the default style which I have set and second one is the named style which you can refer by using name of the style. I have posted code for applying the style to busy indicator control as shown in List 1, Here you can see that I haven't apply any style to the first busy indicator control but for the second busy indicator control I have use the name BusyIndicatorStyle1, as there should be only one default style for one control.
You can also see in the XAML code that I have used grid layout with 2 rows of 50% 50% height and place busy indicator control in each row of the grid layout.You can download the source code of the sample from here.

You can view online sample here.
All and any comments / bugs / suggestions are welcomed!

Select Distinct Using Linq

Problem:

              We have a list and when want to filter the list based on property to get the unique List.  

Solution:

               The solution to the above problem is very simple, as we have list and we want to get the distinct list based on some property of that list.For this code which I have used is listed in List 1 here you can see that i have an Employee class which has employee id, name and city properties, then in the main function I have declare _employeeList of type list and added records in the list. Here you can see that I have named employees with Employee A, Employee B and so on. You can see that I have place Employee A , Employee B and Employee C are duplicate and in cities I have used Islamabad, Lahore and Karachi.

List 1

Here I have get the distinct list based on two property first the name of the employee and then the based on the city. You can see in the statement where I have distinct employee list, I have first used the GroupBy of the linq and here you can notice that I have group by name of the employee as I want to get the list of unique name of the employee after the group by is the the select of the linq to get the first record of the grouped list.

Image 1

After getting the distinct employee list in var type I have used the foreach loop to display the distinct employee based on the employee name and you can see in the output that it shows only 6 records as Employee A, Employee B and Employee C has two records each so one is selected and shown. 

In the next distinct statement I have used the city , so that the resultant record are distinct on the city name and in the Image 1 you can see both the outputs.First is the distinct based on employee name and has 6 records and second is the distinct based on city and has only 3 records.

This was the way I get the distinct list based on property of the object and hope if you have similar problem then you can solve your problem by using above technique.

All and any comments / bugs / suggestions are welcomed!