Microsoft Expression Blend, WPF – ListBoxItem selection and highlighting

In this small blog I would like to demonstrate how we can use Microsoft Expression Blend 3.0 to handle mouse over event to change the background color of ListBoxItem. At the end of this post we will have something like this

ListBoxItem selection and highlighting

You can see that the list box has following properties.
– Selected: Background = Blue, Foreground = White
– Mouse-hovered: Background = ActiveBlue
– Not of cases above: Background = SkyBlue
Separating with color makes our list box more beautiful and easy to observe. So let’s open Blend and create an new WPF Application

Resize main window and add a list box on it. Then add some listboxitems so that we can see the animation. To add listboxitem, simply right click on listbox in “Objects and Timeline” windows then choose “Add ListBoxItem”.

After adding some items for testing, now we must create a style for handling mouse click, hover event and color animation. To simplify the process, instead of creating myself a completely new style, I would like to reuse the template of Blend and edit it to fulfill my purposes. Then right click on the list box, choose “Edit Additional Templates” –> “Edit Generated Item Container (ItemContainerStyle)” –> “Edit a Copy”.

On the “Create Style Resource”, enter the name of your style. I use “ListBoxItemStyleHighlighting” and press ok. Now it’s time to edit our style. Click on “Resources” Window, browse to “ListBoxItemStyleHighlighting” and press “Edit resource”

Then click on the small combo box below the title of design window and choose “Edit Template” –> “Edit Current”.

Now we will handle the behavior of listboxitem for each mouse action. Let’s consider all of our cases:
– When item is selected, the condition for Trigger should be IsSelected=true
– When item is not mouse-hovered, the condition for Trigger should be IsSelected = false and IsMouseOver = false

1. Selected
On mouse click, we would like to change background color to blue and foreground to white. Navigate to Triggers windows and edit the Trigger “IsSelected=true”

On frame “Properties when active”, click on the property which we want to edit. For example, click on Bd.Background, on the properties windows, choose the color what we want. This color will be shown as background of listboxitem when it’s selected.
2. Not mouse-hovered
Now we would like to handle the not mouse-hovered. We would like that when the mouse is not over the listboxitem, the item will have a Skyblue.  So come back to Triggers windows, edit the second trigger to “IsSelected=True and IsSelectionActive=False” to “IsSelected=False and IsMouseOver=False” and delete all existing entries in “Properties when active” window.

We have added handler to handle event when listboxitem is not selected and not mouse-hovered. Now we should tell handler what he should do. Click on “+” button beside “Actions when activating” and add new Storyboard.
Switch to XAML Code and edit our story board by adding ColorAnimation into it.

<Storyboard x:Key="Storyboard1">
	<ColorAnimation Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="SkyBlue" AutoReverse="False" Duration="0:0:0.5"/>
</Storyboard>

3. Mouse-hovered

To handle this event, we just need to add one more Storyboard to the second trigger for the “Actions when deactivating” and add code for Storyboard

<Storyboard x:Key="Storyboard2">
 <ColorAnimation Storyboard.TargetName="Bd" Storyboard.TargetProperty="Background.Color" To="AliceBlue" AutoReverse="False" Duration="0:0:0.5"/>
</Storyboard>

You can adjust the color as you like. The complete source code you can download here “ListBoxItem selection and highlighting

2 thoughts on “Microsoft Expression Blend, WPF – ListBoxItem selection and highlighting”

  1. @Hardy: I know this problem. I will update them later because I have no time now. I will choose another image hosting.

Leave a Reply

Your email address will not be published. Required fields are marked *