user interface - How to achieve the complex UI using ItemControl in silverlight -

i working on creating complex report looks shown in here image

for have create collection store descriptions , corresponding ratings. collection binding itemcontrol. collection fetched database depending on criteria's. problem how fragment or separate single itemcontrol shown in image. should use multiple collections bind different itemcontrol ? can use multiple datagrids?

i out of ideas... suggestions / examples appreciated.

definitely do-able. treat each block (such mathmatics, arts education etc) item, , you're dealing itemscollection. create style how present each item in collection, , style how present each property in block (which feature collection of something.

an example have of similar, blocks consisted of heading, , varied number of checkboxes each description. there varying number of these blocks too.

in view, displayed these blocks, xaml looked this:

<scrollviewer verticalscrollbarvisibility="visible" maxheight="100">   <itemscontrol itemssource="{binding featureflags, mode=twoway}" style="{staticresource flaggroupsandflagsitemscontrolstyle}" /> </scrollviewer> 

i had style itemscontrol defined in resource dictionary somewhere ...

<style x:key="flaggroupsandflagsitemscontrolstyle" targettype="itemscontrol">         <setter property="width" value="auto" />         <setter property="itemtemplate">             <setter.value>                 <datatemplate>                     <grid x:name="flaglistgrid">                         <grid.rowdefinitions>                             <rowdefinition height="auto" />                             <rowdefinition height="*" />                         </grid.rowdefinitions>                          <textbox grid.row="0" width="{binding width, elementname=flaglistgrid, mode=oneway}" isreadonly="true" text="{binding name}" />                         <listbox grid.row="1" width="{binding width, elementname=flaglistgrid, mode=oneway}" itemssource="{binding flags}" scrollviewer.horizontalscrollbarvisibility="disabled"                                   style="{staticresource flagslistboxitemsstyle}" background="{binding isoptional, converter={staticresource yntooptionalbackgroundcolour}}"/>                     </grid>                 </datatemplate>             </setter.value>         </setter>     </style> 

and style items within templates listbox ...

<style x:key="flagslistboxitemsstyle" targettype="listbox">         <setter property="itemspanel">             <setter.value>                 <itemspaneltemplate>                     <toolkit:wrappanel width="{binding width, elementname=flaglistgrid, mode=oneway}" orientation="horizontal" scrollviewer.horizontalscrollbarvisibility="disabled" />                 </itemspaneltemplate>              </setter.value>         </setter>         <setter property="itemtemplate">             <setter.value>                 <datatemplate>                     <stackpanel orientation="horizontal">                         <checkbox width="20" height="18" verticalalignment="top" ischecked="{binding isselected, mode=twoway}" />                         <textblock width="180" minheight="18" verticalalignment="center" text="{binding description}" textwrapping="wrap" />                     </stackpanel>                 </datatemplate>             </setter.value>         </setter>     </style> 

unfortunately can't show image of finished result looks like, hope these pointers set on track similar problem