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

When styling up a control, Expression Blend allows you to apply that style to other controls. This firstly allows file sizes to be kept  down as the style is only written in the XAML once. Secondly this allows you to retain consistency across multiple controls set to the same style, when making changes to one, all controls set to that style will update automatically.

Below is an example of four standard button controls.

Now I am going to apply a visual style to the first button. You can read more about applying a style to the button control in this previous post. See how our first button is now visually unique compared to the other three.

Now to apply the same style to the following three buttons is really easy. To apply a style, we right click the button we want to change and select ‘Edit Template‘ and then ‘Apply Resource‘. We now see a list to choose from of styles we have created that are available for that control.

We can repeat this process to each of the buttons to apply this style to all four buttons.

Notice that the style applies to the contents inside the control. The Button control has a ‘Content Presenter‘ inside the control that uses Data Binding (we will touch on Data Binding later in this tutorial series) to pull through the text content, styling and color from the controls top level. By keeping this ‘Content Presenter‘ inside the styling we can keep the text on each button unique.

We can also make our style unrestricted to a fixed size, this allows us to use the same style for different sized buttons as shown below.

Styles can be applied to all control inside Silverlight.

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

The launch of Silverlight 3 brought with it the introduction of Behaviors. Behaviors are pieces of functionality that can be applied to objects within Expression Blend without the need for knowing any code at all.

Expression Blend has the following Behaviors ready for use:

• ChangePropertyAction - Change an objects property
• ControlStoryboardAction - Tell a storyboard to play/pause / stop
• FluidMoveBehavior - Changes an objects easing
• GoToStateAction - Changes an objects state
• HyperlinkAction - Calls a hyperlink
• MouseDragElementBehavior - Allows an item to be dragged
• PlaySoundAction - Plays an audio element
• RemoveElementAction - removes an object from the stage

To apply a Behavior, first click on the last icon in the main tool bar called ‘Assets‘, then drag your chosen Behavior onto the object you want to activate the Behavior.

Once your Behavior has been placed you will see it indented below that object in the ‘Object and Timeline‘ tab. To set the properties, click on the Behavior and go to the ‘Properties‘ tab. You will see two sections, the ‘Trigger‘ section allows you to set the source target and the event trigger type (mouse enter, mouse click etc). The ‘Common Properties‘ section allows you to set what happens when the Behavior is played.

In this previous post we used the ‘ControlStoryboardAction‘ to start an animation off automatically when the page is loaded.

To find additional Behaviors to use check out the Expression Gallery and CodePlex.

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.