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.

EditTemplate

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.

TemplatePart

Via Skinning and Styling Silverlight Controls

A 10 parts Expression Blend 3 Tutorial for Silverlight

This series of articles were written by Adam Kinney

1. Drawing an emoticon in Expression Blend
First steps in getting to know the tools and workspace in Blend

2. Element Transformations
Learn to use Scale, Rotate, Skew and 2.5D Transformations

3. Get Started with Animation
A Quick Overview on Creating Time-Based Animations

4. Playing Video with the MediaElement
Using the flexible MediaElement control as a reusable Surface

5. Arranging Pictures to Learn Layout
Use the Grid, StackPanel, ScrollableViewer and Border to position Images

6. A Look at Text in Silverlight
Learn about Displaying Text, Font Properties and Embedding Fonts

7. Import an Adobe Photoshop File into Blend
Convert the assets from a Photoshop file into Interactive Controls

8. Styling and Skinning Controls
Customize the Look by Setting Properties and Building Templates

9. Styling and working with Design-Time Data
Explore how Templates and Bindings are used to display dynamic data

10. Giving Behaviors a Test Drive
A brief overview and walkthrough of the Behaviors included with Blend

 

 

Silverlight Alpha 1.1 and C# in Orcas Beta 1

 

This post describes how a C# developer can set up and run a Silverlight project in Visual Studio Orcas. 

Here are all the pieces you need:

A First Silverlight Project

More…

Charlie Calvert’s Community Blog : Silverlight and C# in Orcas Beta 1

 

del.icio.us Tags: , ,