Skinning and Styling Silverlight Controls

 

To change a look of Silverlight controls the way that you want it to, you can style it by modifying default template of the control. Silverlight controls have XAML based templates that can easily be changed and saved as new template. You can change the look for entire control without writing any line of code in C#. It can be done completely in XAML. However if you want to do minor modifications to the look of control such as change background color or default font you can do it directly in XAML without need to change default template of the control.

For example we can simple change foreground color of text for TabItem control by setting foreground property directly in XAML of that control without need for changing template for that control :

<my:TabItem Header="Buy or earn chips" Foreground="#FF6A1D38">    <Grid>    </Grid></my:TabItem>

This article will show you how to build custom template for Silverlight 3 TabControl.

Easiest way to modify default template for control is to that in Expression Blend. In Expression Blend menus called Objects and Timeline locate your control for witch you want to modify template, right click on it and choose Edit Template –> Edit a Copy . After that Expression Blend will ask you where to save copy of template in UserControl.Resources or in Application.Resources. For this example I will save all templates in Application.Resources in App.xaml file.

After that you will get a copy of template for TabControl. In this case we have few objects in the template: TemplateTop, TemplateBottom, TemplateLeft, TemplateRight. The objects in the template that are referenced by the code are called parts. We can view the parts in the Parts panel when you are editing a control template in Expression Blend.

Via Skinning and Styling Silverlight Controls