In a previous post I showed how to create a custom template for a Silverlight ListBoxItem.
In this post I want to show how easy it is to create an unusually shaped Silverlight Button using Expression Blend 4.
Designing the Button.
Once you have created your silverlight application you can set about defining the look you want for your buttons.
I am not a designer so I am not really sure anyone would actually want a star shaped button, but for this example I have created a Star shape, which is just a polygon and can be found in the assets panel of Blend’s toolbox, with a gradient fill and a wide gray stroke.
Now that the custom look of the buttons has been achieved, we can make the shape into a button.
Make me a Button.
This is not the only way to create a custom looking button, or control for that matter, it is just the easiest.
There are only two steps for changing the shape into a button and that is to go to “Tools” in the main menu of Blend and select the first option which is "Make Into Control".
A new window will open and you then select the Type of control you want to create, give it a name and then click the "OK" button.
You now have a Silverlight Button as the XAML shows.
Several other things will have happened after converting your shape into a button. You will notice that a ContentPresenter has been added to the button.
The "Objects and Timeline" panel shows the newly created template for the Button.
Lastly the "States" panel displays the list of States which are associated with a silverlight button.
Adding Visuals to the Button.
Even though a completely functioning button has been created none of the visuals for a button, a colour change on mouseover or resizing when clicked for example, have been include. Any visual prompts need to be added to the VisualStates of the control.
To make changes to the appearance of controls in certain states, select the state you want to make changes to from the states panel and, making sure you have the part of the control you want to change selected in the "Objects and Timeline" panel, change the properties of the control in the properties panel.
In the MouseOver state I changed the colour of the stroke from Gray to Orange.
For the Pressed state, the colour of the stroke reverts back from orange to gray and I resized the control by ten percent to give the illusion of movement.
So there you have it a quick and easy way to create a custom silverlight control.
Posted Apr 02 2011, 08:47 AM by Neil Knobbe Filed under: XAML, Expression Blend, Silverlight, Silverlight 4, ControlTemplate, Expression Blend 4, States, VisualStates, CustomControl
0 comments:
Post a Comment