Styling Controls in Silverlight 2.0

by Don Burnett

Styling your controls so they fit within the confines of the page is important to keeping your overall design's integrity. It's very easy to do this in WPF, and now it's just as easy to do this in Silverlight 2.0 with Blend 2.5.. Let's look at how we can manage all of this.

The easiest way is to create a "GLOBAL STYLE" for a user control.. Let's look at this really quickly..

 

First I'll create a Silverlight 2 project..

My project is a simple one, now I'll drag a button and a radio button control onto the design surface..

Now I'll open my app.xaml file, It will look something like this...

The purpose of this tutorial is not to do a complete style change, but to show you how and where to do it, so for this demo I am just going to change a few setter properties..

Here I have created a button style that I have named "MyButtonStyle" and set the font wrapping and fontsize in the button. I could have easily defined color animation, any number of things including a full template..

Now I save my project.. Then returning to our page.xaml file I select the button to which I am applying this global style to..

I select my button  that I have made then go to the buttons properties and click under miscellaneous on the "style" property tick

Then from the pop-up style context menu that appears

I select MyButtonStyle which I have defined.. And I am done, I have defined a global property for this button user control and it immediately changes the values in my project. Of course you can define more than one style, set the style according to a data set that you have databound. This makes creating applications with user personalization settings very easy.

Anyway, that's how you can do a simple global style change and apply it to a custom control.

 

Technorati Tags: Silverlight 2.0,Global Style,Blend 2.5,User Controls