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

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

 

 

Getting Started with Behaviors in Expression Blend 3

 

Step by  step walkthrough using Behaviors

Pete Blois’s MIX Session Video 

& his MIX Behavior Pack

Triggers:

• KeyTrigger
• TimerTrigger
• MouseGestureTrigger
• StateChanged

Actions:

• ShowMessageBox
• GoToState action
• GoToNextState
• GoToPreviousState
• ListBoxAddOne
• ListBoxRemoveOne
• ListBoxRemoveThisItem

Creating your own custom Silverlight Media Player using Expression Media Encoder & Blend

Show how to reuse the code generated by Expression Media Encoder and then create your own “custom” Silverlight Media Player!

Via cheating at creating a silverlight media player

Download Screencast

Microsoft® Expression®

Expression Blend 2 September Preview

Microsoft® Expression®

VS2008 Beta 2 WPF Designer Cider Features

Part 1: Cider Beta 2 : Feature walkthrough

Part 2: Cider Beta 2 : Styling a WPF application with Blend and Cider

 

  

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:

• Orcas Beta 1
• Silverlight 1.1 Alpha for Windows
• Silverlight Tools Alpha for Visual Studio
• Expression Blend 2 Free Trial
• You will also find it helpful to download the Silverlight SDK as it contains useful documentation and examples.

A First Silverlight Project

More…

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

 

del.icio.us Tags: Silverlight, VS2008, Expression