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.