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:

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.

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.

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.

Step 5:

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

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.

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:

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.

 

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.

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.

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

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

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