Silverlight is a free plug-ins supported by the NET framework. Compatible across multiple browsers, devices and operating systems to bring a new level of interactivity on the Web works anywhere, in this version is more on improved integration support, multithreading HD quality video using IIS Smooth Streaming, the capability of high-quality audio with Firefox, IE, Google Chrome, Safari, and can be used on Macs and of course Windows.

In particular, Silverlight is a plug-in that cross-platform and cross-browser in a browser that renders the user interface and graphics on a canvas that can be inserted in an HTML page.
Markup that is used to define a Silverlight canvas is called XAML (eXtensible Application Markup Language, or to pronounce the “zammel”)

XAML is an XML-based language similar to HTML in some parts. Like HTML, XAML which determines which elements will be displayed, and determining the layout of the elements therein.
But unlike HTML, XAML is more than just a simple element and layout, using XAML, you can also determine the timing, transformation, animation, and events.

Silverlight offers all the same benefits with other Rich Internet Application, but there are some features that distinguish it from others Application solutions, such as below:
* Offering support cross-platform/cross-browser.
1. cross-platform version of. NET Framework.
2. XAML is text based markup language.
3. Silverlight using familiar technology.
* It is easy to deploy Silverlight runtime for the users of this Rich Internet Application.

Triggers are conditional. They are essentially a way to implement standard if…then logic without writing external code. In other words, a trigger evaluates an attribute and if the current value of that attribute matches the value specified by the trigger, then the style is applied. If the cursor moves over a Button, then change the background to green.

The code adds a TRigger that will fire when the property Button.IsMouseOver is TRue. Two Setter elements define the attributes we wish to change when the condition of the trigger is met. In this case, it changes the foreground of the Button to green and the background to red.

Using a Trigger to modify the appearance of Button elements
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">

TargetType="{x:Type Button}">

Property="Button.IsMouseOver"
Value="true">
Property = "Foreground"
Value="Green"/>
Property = "Background"
Value="Red"/>





Content="My Button" />

Above code will modify the appearance of all Button elements declared in the page. To target only a specific Button, you must reference the style from the Button element. To do this, you must add a key name to the trigger and declare it as the Style attribute of the Button. The resulting code is shown below:

Using a Trigger to modify the appearance of a single Button
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">

x:Key="ButtonTriggers"
TargetType="{x:Type Button}">

Property="Button.IsMouseOver"
Value="true">
Property = "Control.Foreground"
Value="Green"/>
Property = "Control.Background"
Value="Red"/>





Style="{StaticResource ButtonTriggers}"
Content="My Button" />

Above code shows how to declare TRiggers local to an element by defining the TRiggers within the local element’s Resources attribute. As mentioned previously, local resources override global resources, so these resources will be applied to the element in which they are defined, but not to any others.

This flexibility allows you to define conditional styling in a variety of ways, either by targeting a specific class of elements or individual elements. When used in conjunction with templated styles, triggers provide a powerful mechanism for designing rich, interactive user interfaces.

Elements specifying a codebehind handler must declare the Name attribute in order to be referenced in the codebehind class.

C# implementation of event handlers
public partial class MouseEnterMouseLeave
{
void MouseEnterHandler (object sender, MouseEventArgs e)
{
MyButton .Background=Brushes.Red;
MyButton .Content=”Mouse is over me “;
}
void MouseLeaveHandler (object sender, MouseEventArgs e)
{
MyButton .Background=Brushes.White;
MyButton .Content=”Mouse is not over me “;
}
}

VisualBasic implementation of event handlers
Partial Public Class MouseEnterMouseLeave
Sub MouseEnterHandler (ByVal sender as Object, ByVal e As MouseEventArgs
MyButton .Background = Brushes.Red
MyButton .Content = “Mouse is over me ”
End Sub
Sub MouseLeaveHandler (ByVal sender As Object, ByVal e as MouseEventArgs
MyButton .Background = Brushes.White
MyButton .Content = “Mouse is not over me ”
End Sub
End Class

XAML declaration of event handlers for Button
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
x :Class="ButtonExample.MouseEnterMouseLeave "
Content="Mouse is not over me "
MouseEnter="MouseEnterHandler "
MouseLeave="MouseLeaveHandler "
Name="MyButton " />

The following events are common to all UIElement-derived elements. Events specific to the element are listed with the element description.

DragEnter
DragLeave
DragOver
Drop
GotFocus
IsVisibleChanged
IsEnableChanged
IsFocusChanged
KeyUp
KeyDown
LayoutUpdated
LostFocus
MouseEnter
MouseLeave
MouseMove
MouseLeftButtonDown
MouseLeftButtonUp
MouseRightButtonDown
MouseRightButtonUp
PreviewDragOver
PreviewDragEnter
PreviewDragLeave
PreviewDrop
PreviewKeyUp
PreviewKeyDown
PreviewMouseLeftButtonDown
PreviewMouseLeftButtonUp
PreviewMouseRightButtonDown
PreviewMouseRightButtonUp
PreviewMouseMove

Bubble
A bottom-up routing strategy. The target element is first notified, then its parent, then its parent, and so on. If the event is marked Handled, then no other event handlers will be invoked. Microsoft suggests marking an event as Handled as soon as you know that there are no further elements along the route because there are performance advantages to keeping the codepath as short as possible.

Direct
The type of routing strategy used by Windows Forms and other Microsoft .NET libraries. Direct routing means that only the event source element is notified. If the event was raised by a Button, then only the Button in question will receive notification. Very few UI events in Avalon use the direct-routing strategy.

Tunnel
Works in the opposite direction as bubble; it starts at the root of the tree and works down, stopping with the target element. Tunneling events are prefixed in Avalon with the word Preview. Generally, there is a corresponding bubble event for each tunnel event. If the tunnel event is named PreviewKeyDown, then the bubble event is called KeyDown. Similarly, if there is a bubble event called KeyUp, then there is likely a tunneling event called PreviewKeyUp.

Because of tunneling and bubbling, parent elements often receive events when the source is one of their child elements. If necessary, the source of the event can be determined programmatically by accessing the Source property of the EventArgs parameter passed to the event handler.

Not all events are routed. The XAML designer will need to know whether they are, because routed events can be used within styles to created triggers; non-routed events cannot. Events are specifically marked as routed or non-routed to assist the XAML designer with trigger creation.

KeyFrame animations use different classes than non-key frame animations, but they are easily recognizable because each one uses the term “KeyFrame” in its name. As with non-key animations, there are KeyFrame animations for almost every primitive data type and some XAML elements.

Creating a KeyFrame animation requires the following steps:
1. Set a Duration for the animation.
2. For each key frame, select its appropriate type, set its value and key time, and add it to the animation’s KeyFrame collection.
3. Associate the animation with an element’s attribute, just as you would for a non-key animation.

Using KeyFrame animations instead of a non-key animation is a good way to illustrate the concept of a KeyFrame. The first step is to understand KeyTime, which is required for each key frame added to the animation’s KeyFrames collection.

A KeyTime specifies when the key frame will end, as illustrated in the following example. It is tempting to view KeyTime as the amount of time the key frame will play, but this is incorrect. That value is determined by when the key frame ends, when the previous key frame ended, and the animation’s duration.

In this XAML fragment, the animation has a Duration of 10 seconds. The first key frame’s KeyTime is set to 0:0:3, which means it will end three seconds into the animation. The second key frame’s KeyTime is set to 0:0:10, which means it will end when the animation ends. Because the previous key frame ends at 3 seconds, and the second key frame is set to end at 10 seconds, the second key frame will play for a total of 7 seconds.

The KeyTime attribute can be specified using other values. It is most commonly specified as a duration, but you can also express the key time as a percentage of the total duration, or you can allow the interpreter to allocate time based on a distribution pattern that either spreads the duration equally over all frames or distributes it across key frames such that the animation will progress at a steady pace.

The possible values for KeyTime are:

KeyTime
This value can be specified as a duration (hours:minutes:seconds) or as a percentage of the total duration, e.g., 20%.

Uniform
This value automatically distributes the duration across all key frames based on how many there are. If the Duration is set to 10 seconds and there are five key frames, each key frame will play for 2 seconds (10/5 = 2). This can result in non-uniform speed because it is based on the number of key frames, not the change in values!

Paced
This value automatically distributes the duration based on the number of key frames and value changes to ensure a smooth, even speed.

Most KeyFrame elements have three distinct types: linear, discrete, and spline . Each uses a different interpolation technique to move from the previous value to the destination value. The interpolation technique used can be determined from the name of the KeyFrame, e.g., SplineDoubleKeyFrame uses a spline interpolation technique, while LinearDoubleKeyFrame uses a linear interpolation technique.