Skinning is a way to completely replace the look of your control. In order to do that, you have to define new template and set it to the Control.Template property.

Building your own template allows you to make the control look and feel in the way you like. You might add new elements or remove the existing, you can also edit the visual states and transitions.

In the example the button shape is changed. All animations are removed for simplicity.

 1: <UserControl.Resources>

 2:     <Style x:Key="myButtonTemplate" TargetType="Button">

 3:         <Setter Property="Template">

 4:             <Setter.Value>

 5:                 <ControlTemplate TargetType="Button">

 6:                     <Grid>

 7:                         <Path Margin="2"  x:Name="BackgroundGradient" Stretch="Fill" Stroke="#FF94C2D8" 

 8:                               StrokeThickness="2" Opacity="1"

 9:                               Data="M44,-135 L137,-136 L163.00137,-114.43846 L138.14738,-98.33696 L40.513062,-96.888382 L65.010727,-116.44418 z" >

 10:                               

 11:                             <Path.Fill>

 12:                                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 13:                                     <GradientStop Color="#FFA3AEB9" Offset="0"/>

 14:                                     <GradientStop Color="#FF8399A9" Offset="0.375"/>

 15:                                     <GradientStop Color="#FF718597" Offset="0.375"/>

 16:                                     <GradientStop Color="#FF617584" Offset="1"/>

 17:                                 </LinearGradientBrush>

 18:                             </Path.Fill>

 19:                         </Path>

 20:                         <ContentPresenter

 21:                             x:Name="contentPresenter"

 22:                             Content="{TemplateBinding Content}"

 23:                             ContentTemplate="{TemplateBinding ContentTemplate}"

 24:                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

 25:                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

 26:                             Margin="{TemplateBinding Padding}"/>

 27:                     </Grid>

 28:                 </ControlTemplate>

 29:             </Setter.Value>

 30:         </Setter>

 31:     </Style>

 32: </UserControl.Resources>

That's it!

Styling control is a very easy way to tweak the minor visual characteristic of the control such as foreground and background colors, the font style and size, padding, etc. Usually the styles are stored as resources which allows you to reuse them whenever you want.

The Style has TargetType specifying the type of the object the style can be applied to and a key used to identify the style. The Style contains numerous Setters, which describe the values which you want to set to specific properties.

To apply style to a control simply specify the Style property of the control to point to the static resource with a specific key name.

 1: <Grid>

 2:     <Grid.Resources>

 3:         <Style TargetType="Button" x:Key="myButtonStyle">

 4:             <Setter Property="Width" Value="100" />

 5:             <Setter Property="Height" Value="25" />

 6:             <Setter Property="Foreground" Value="#FF87091F"/>

 7:             <Setter Property="Padding" Value="2"/>

 8:             <Setter Property="BorderThickness" Value="4"/>

 9:             <Setter Property="FontWeight" Value="Bold" />

 10:             <Setter Property="FontFamily" Value="Portable User Interface" />

 11:         </Style>

 12:     </Grid.Resources>

 13:     <Button Content="Click Me!" Style="{StaticResource myButtonStyle}">

 14:     </Button>        

 15: </Grid>

 That's it!

Since the Silverlight 1.1 was released I and my colleagues started using it in a commercial business applications for some small tasks, where the benefits were obvious. Even the fact the Expression Blend crashes and the lack of controls at that time didn't stop us. We were impressed of the tempo of the improvement and we expected to see reliable and ready for business use platform when the final is released.

So, now the final is a fact, but is it really ready for real-world business application?

Shortly - no. Not yet.

There are several reasons for my "No".

To add scrollbars to ItemsControl you have to modify the control template and to add ScrollViewer for the ItemsPresenter.

Xaml

<ItemsControl >
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>

This article is compatible with the latest version of Silverlight.

Introduction

In the first article I showed you how to animate ListBox items in Silverlight. Then, to make all the animation the way I wanted, I used some code and hardcoded names of the Storyboards for each state. From Silverlight 2 on and the cool new VisualStateManager the task for adding animation and other effects for each state becomes easier. Other than that – we can add animations even for the transitions from one state to another.

In this article I’ll make the same animations like in the previous one but this time using VisualStateManager and styles.

This article is compatible with the latest version of Silverlight.

While digging into templating and styling of Silverlight controls, I came into a situation where the event for MouseLeftButtonDown was not triggered when I click on the control. I created a sample project and in the Page.xaml I added the following:

 As you can see from the xaml, I have a StackPanel and an event handler for MouseLeftButtonDown event.

This article is compatible with the latest version of Silverlight.

Introduction

When we talk about rich internet application and have in mind that we can use Silverlight, we are able to make really good-looking applications full of animation and other effects.

Here, I will demonstrate how to apply some animations on the ListBox items when loading, selecting and unselecting them. You can also check the second part of this article - Animating ListBox Items - the VisualStateManager.

Download source code

Overview

ListBox control comes with the Silverlight 2 and it is used to display items and allow the user to select one or more of them.

This article is written for Silverlight 1.1.

Update: Check the next part Creating a simple Voting control in Silverlight

Update: We found an issue in the Voting control. When you click on the filled vote bar you actually give 2 votes because the mouse up event is handled by the two canvases that displays the vote. We've fix that so now you can download the fixed version.

Overview