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!