Saturday, March 24, 2012

listView item styling

I'm trying to get a listView control to display a certain style from a cssClass on the clicked item (which I have working) and then when a different item is clicked, the style is added to the new item and removed from the old item. Only one item in the listView can be selected (styled) at one time.

<listView targetElement="names" itemTemplateParentElementId="itemTemplateParent">

<bindings>

<binding dataContext="dataSource" dataPath="data" property="data" />

<binding dataContext="dataSource" dataPath="isReady" property="enabled" />

</bindings>

<layoutTemplate>

<template layoutElement="template" />

</layoutTemplate>
<itemTemplate>

<template layoutElement="itemTemplate">

<control targetElement="itemTemplate">

<behaviors>

<hoverBehavior>

<hover>

<invokeMethod target="itemTemplate" method="addCssClass">

<parameters className="rowHover" />

</invokeMethod>

</hover>

<unhover>

<invokeMethod target="itemTemplate" method="removeCssClass">

<parameters className="rowHover" />

</invokeMethod>

</unhover>

</hoverBehavior>

<clickBehavior>

<click>

<invokeMethod target="itemTemplate" method="addCssClass">

<parameters className="rowClick" />

</invokeMethod>

</click>

</clickBehavior>

</behaviors>

</control>

<label targetElement="nameLabel">

<bindings>

<binding dataPath="Name" property="text" />

</bindings>

</label>

</template>

</itemTemplate>

<emptyTemplate>

<template layoutElement="emptyTemplate" />

</emptyTemplate>

</listView>

I don't believe you can do this declaratively in a clean way. Toachieve this, you should probably extend the ListView control andimplement the concept of selections inside the listview itself. Thatway the listview can keep track of a selected item, so the user of thatlistview doesn't have to. If you want to give this a try yourself,you'll probably want to handle the click event of each item instance,and add a few properties/events like "selectedCssClass", "selectedItem"and "selectedIndexChanged".

We've already implemented selection for listView, it should be available in one of the next builds. We don't have selectedCssClass yet, but it looks like a good idea. I'll open a bug to track it.

No comments:

Post a Comment