Combobox items Changing automatically on mouse events in Expression Blend


This article shows how the ComboBox items change themselves on mouseover in a WPF application using Expression Blend. For this add a new WPF project in Expression Blend and follow the procedure below.

Step 1:

First of all you need to add a ComboBox from the the toolbox or asset library to the artboard:

adding-combobox.gif

Step 2:

Now select the ComboBox and add Items to the combobox by right clicking on it then a pop up window appears from this choose AddComboBoxItem. After this rename the items by again right clicking on the items and selecting Edit Items.

combo-items-add.gif

Step 3:

Now next job is to select the ComboBox and right click then choose Edit style --> Edit A copy. A window opens up here name the resource, make the necessary selections, and click Ok.

EDIT-STYLE.gif

Step 4:

Now select the ComboBox and in the object and timeline palette click the '+' button to create new Timeline in the timeline and Object palette, give it a name and click OK.

TIMELINE-ADD.gif

Step 5:

Select the ComboBox and in the common properties palette assign '0' to the selectedIndex property.

SELECTED-INDEX.gif

Then drag the timeline to a new time i.e. shift one second ahead and then assign 1 to the selectedIndex. keep moving the timeline forward and incrementing the selectedIndex for as many items as you have.

RECORDING.gif

After this right click on the track and in the pop up menu that appears choose edit repeat count. then click the forever button and click ok as shown in the figure below:

record-repeat.gif

Step 6:

Now turn the recording button off by clicking the red button at the top left corner of the design window.

Step 7:

Its time now to add functioning to the ComBobox, for this click the trigger palette and change the default property, Window.Loaded to Combobox, mouseover or mouseenter then click the '+' property button in the triggers pallete, in the new pane select the timeline name and set it to BEGIN.

 triggering.gif

Then click the Event+ button at the trigger palette and again change the default property, window. loaded to the Combobox. mouseleave then click the '+' property button in the triggers pallete, in the new pane select the timeline name and set it to STOP. Now goto common property window and set the IsDropDownOpen from the default property, and change True to False.

events.gif

This step allows the combobox to change its items automatically when mouse enters it and becomes blank on mouse leaving.

Step 8:

Now thats all we have done with combobox triggering. On pressing F5 the output is produced like this:

Initially the ComboBox is blank.

outpt.gif

When mouse enters the ComboBox, the items begin to appear one by one.

output2.gif

When mouse leaves the ComboBox, the ComboBox turns blank again.

outpt.gif

Thats all in this article today. Hope you enjoyed the application. do post your views.

Next Recommended Readings