This post is part of a string of posts found here: Learn Blend in a Month.

Silverlight ships with lots of built in controls ready for use with default skins applied. All of these controls are skinable following similar steps found here with the ‘Button’ control.

To access the full list of controls available to you in Blend access the last icon in the main tool bar called ‘Assets‘. This will open up a list of available assets of which one group is labled ‘Controls‘, open up this drop down to see the full list of available controls.

With Blend 3 and the Silverlight SDK installed I have a list of over 100 controls to look through. Here is a list of ten useful controls I have picked out, ideal for beginner users:

CheckBox - Works like standard check boxes

ComboBox - A drop down selection box

DatePicker - A drop down date picker box

HyperlinkButton - A button linking to a web url

ListBox - A scrollable list

RadioButton - Works like standard radio buttons

Rating - 5 Star rating

ScrollViewer - Area to display content within a scrollable area

Slider - A dragable thumb on a linear scale

ToggleButton - An on / off button

To access even more controls go visit the Expression Gallery and CodePlex to see whats available.

This post is part of a string of posts found here: Learn Blend in a Month.

Silverlight has 9 mouse icons built in and ready for use. They are:

  • Arrow - Standard mouse pointer
  • Eraser - Eraser tool similar to most paint applications
  • Hand - Hand icon used most for button roll-overs
  • IBeam - Used to indicate Text entry is required
  • None - Hides the mouse pointer
  • SizeNS - Used to show something can be dragged up/down
  • SizeWE - Used to show something can be dragged left/right
  • Stylus - Used to show a ‘dot’ icon for use with Stylus pens
  • Wait - Shows the Windows loading/thinking animation

See the 9 icons in action below…

The’ how to’ bit

To change the mouse Icon when the user rolls over a button, first make sure you have the button in question selected. Then go to the ‘Properties‘ tab and scroll down to the ‘Common Properties‘ section. Change the drop down next to ‘Cursor‘ to choose which mouse icon will be used. Once the user rolls off the button the mouse icon will revert back to the arrow icon.

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


  • 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.