This post is part of a string of posts found here: Learn Blend in a Month.
Silverlight has a number of ‘out the box’ controls which I will touch on further along this tutorial series, but one of the most used and helpful controls is the button. The button control does exactly what it says, it scales to what ever size you want, can display text within it, and has animations set out for rollover and mouse click actions. There are also pre-set states for when the button is disabled and also selected using the tab key.
All the above actions have a default styling ready for use and looks like the below example…
To draw a button, go to the main tool bar and click the 2nd from bottom icon (the one above ‘
Assets‘). The button control should be the default selected, but if not click and hold the mouse on the current selected control and select the button icon…
Now you can click and draw your button on the Design area.
Using the default styling
If you are happy to use the default styling then you can change the size of the button to fit your requirements. You can also change the text within the button by going to the ‘Properties‘ tab and scrolling down to the ‘Common Properties‘ section. Enter the text you want displayed in your button in the ‘Content‘ field. To change the font size or font type, scroll down to the ‘Text‘ section. To change the text color or the tint color of the button, scroll back up to the ‘Brushes‘ section. The ‘Background‘ color changes the tint of the button and the ‘Foreground‘ color changes the text color.
Customizing the button style
If you want to add your own design to the Button control then you need to create a new ‘Style‘. To do this first select the button you have drawn, now you should see that just above the top left of the Design area the button’s name is displayed with an arrow to the right. Click the arrow and select ‘Edit Template‘ and then ‘Edit a Copy‘…
Now a popup will appear asking you to name your new Style. Once you click OK, you will notice that you are automatically taken inside the new Style. Under the ‘Objects and Timeline‘ tab you will now see the assets that make the button control up, you can add, edit or remove these at your will. Under the ‘States‘ tab you will now see several pre-set actions taken for different scenarios, they are…
- Base - This is your buttons default styling
Common States
- Normal - This is your buttons return styling after it has been interacted with
- MouseOver – This is your buttons rollover animation
- Pressed - This is your buttons click animation
- Disabled - This is your buttons style when set to disabled
FocusStates
- Unfocused - This is your buttons styling when not set to focused (Through tabbing)
- Focused - This is your buttons styling when set to focused (Through tabbing)
To edit one of these ‘States‘, select the state and then make your changes to the button assets. You will notice that when you select a State, a red recording light will appear to its left just like when editing a storyboard.
To make changes to the button assets make sure you have ‘Base‘ selected or it will be recording your changes as a Storyboard does. You can read more about how Storyboards work in this tutorial.
