Friday, July 11, 2008

ComboBox customize - and mouse states

So make a normal combobox (from the asset library). Now right click it and choose 'Edit Control Parts (Template)' and Edit Copy. Name it whatever you feel like. Now right click [ToggleButton].
and do the same. now there should be something called Chrome that is a ButtonChrome. you can either change the colors to your choce or if you are like me and want a round cornered button then you have to make 'Chrome' have invisible colors. Dont change the Opacity under the appearance panel. You have to choose every color that 'Chrome' has and change the 'A' to 0% (remember.. for every color stop it has). So now it is invisible. Now you double click the grid (in objects and timeline) then make a square. Make the square so it is a little larger than Chrome was so it can cover it completely. You might have to move the square behind any text that you had in the button. Now round the corners (of the square) as you want them. YAY! you have a customized combobox button! Hmmm but you want to have some sort of roll over effect right?

Here is how you give it some custom mouse states.

Stay where you are inside of the combobox. (or read the top and go back to where you were). Now add a timeline named MouseOver. Change the square to the color you want to see when the mouse is over the button. now make another timeline named MouseDown. Do the same. Ok now you want these to work. So look at your trigger pallet. Click on IsMouseOver=True. Press plus sign next to 'Actions when activating' . Now use the little drop down adn choose the timeline you just created named MouseOver. Keep the other part as 'Begin'. Now scroll down a little and do the same for 'Actions when Deactivating' but choose your timeline MouseOver and instead of Begin choose Stop. Try it out!! Your mouse over state should work great! Now you need to do the same for your MouseDown timeline except you need to add a property under the triggers pallett. change 'IsChecked' to IsPressed' and do the same as above except choose your timeline MouseDown. Then when you are done test it! YAY! Let me know if you have any questions or suggestions!

No comments: