Styling and Skinning Controls

Customize the Look by Setting Properties and Building Templates

Controls in Silverlight are considered “lookless” because you can completely redefine the skin, or Template, of a Control and keep all of the functionality. Templates are an important concept that is reused throughout Silverlight and provides a flexible framework.

In this tutorial we explore what it means to simply Style a Button compared to creating and designing a new Control Template.

Tools Time Downloads
Expression Blend Silverlight 30 minutes
30 minutes
Word (.docx) Word
Acrobat (.pdf) PDF

01 Start a New Project

Open Blend and go to File > New Project. Select Silverlight 3 Application + Website as your project type and name the project BasicSkinning. After hitting OK, the new Project will be created for you and MainPage will be open on the Artboard.

02 Add and Style a Button

Select the Button Tool from the left tool bar and draw a Button on the Grid. With Button selected, the Property panel displays the properties you can change to customize or “Style” the look of the Button. Change the Background to purple, the BorderBrush to use Green colors as GradientStops, Foreground to Blue, BorderThickness to 6,1,6,1, FontFamily to Times New Roman and the FontSize to 18pt.

03 Look at what you’ve done

Hit F5 to Run the Project and mouseover and click the Button. By setting properties on the Button you’ve changed the Style of the Button, but it is still basically the same interactive rectangle. In addition, not all properties of the Style are directly accessible. There is no way to change the color of the blue mouseover Rectangle. To do this you need to modify the template or “Skin” the Button.

04 Enter the Template

Add another Button to the Grid and change the Background to red. Right-click the Button and select Edit Template > Edit a Copy. Keep the defaults on the Create Style Resource popup and hit OK. Now you are in Template editing mode. You can tell this by the breadcrumb menu reading [Button] > (palette icon) > Template at the top of the Artboard. Additionally, the Object panel is displaying the objects that make up the Template.

05 Find the Binding

Using the Object panel, find and select Grid > Background > Grid. On the Properties panel you will see that the small white square next to Background is now yellow and there is Yellow Border around the Color Editor. This indicates that Brush is bound to a property of the Button Control. Click the small yellow square and mouseover TemplateBinding. There you will find the list of bindable properties exposed by the Button and find Background as the selected property.

06 Reuse the Binding

Using the Object panel, find and select Grid > Background > Grid > BackgroundAnimation. This is the Border Control that becomes visible when you mouseover and click the Button. Looking at the Background Brush, we’ve located that mouseover blue color we couldn’t change earlier. Click the small white square next to Background and select TemplateBinding > Background. Run the Project and now when you mouseover and click the Button it will become bright red and not blue.

07 Explore Visual States

Last step, we had to Run the app to see the mouseover change in action. Luckily there’s a way to preview and define the changes during designtime in Blend. Open the States panel and click through the different States to see the Button change. Select the MouseOver State and notice the red record icons displayed. The red border around the Artboard lets you know, changes made here will occur when the MouseOver State becomes active. In the Objects panel, the red circle icons identify elements that change in this State. The Opacity of BackgroundAnimation in the Base State is 0% and set to 100% in the MouseOver State.

08 Rotate the Content

With the MouseOver State active, select contentPresenter. This is a ContentPresenter Control that renders content based on its own Template. This way you could easily insert an image along with your text without having to build a custom Button. For this tutorial we’ll stick with the default TextBlock for now. Rotate contentPresenter 90 degrees. Run the Project and now when you mouseover the text will rotate and return to normal when you mouseoff.

09 Add Transition Time

Now let’s make the rotation take some time. In the States panel above the Normal State, change the Default transition time from 0 to 0.5. Now run the Project and when you mouseover the text will rotate linearly for 0.5 seconds until it reaches the 90 degree rotation.

10 Add a Custom Transition

Last step, we defined the Default transition which implies we can define custom transitions between certain States. Click the “Add transition” arrow icon on the MouseOver State bar and select MouseOver > Normal. Change the time on the new Transition from 0.5 to 1 second. Click the “Easing function” icon next to the time. From the Easing Function popup, select an obvious one like Elastic In. Run the Project and now when your mouse runs off the button you will see a bouncy custom surprise.

» Next Step

Continuing down the path of Templates, let's look at Styling and working with Design-Time Data

To continue learning about Styling and Skinning read this Styling objects article on the Expression Community site.

blog comments powered by Disqus