HARNESS ADVANCED SUPPORT FOR 2D GRAPHICS, ANIMATION, LAYOUT, HIGH-DEFINITION VIDEO, DATABINDING, NETWORKING AND CONTROLS TO CREATE RICHER EXPERIENCES THAN PREVIOUSLY POSSIBLE.
Building a modern Rich Internet Application requires a set of technologies. First, to create the look of the application, Silverlight provides declarative XAML support for rich 2D graphics; providing an object model that goes all the way down to path data and gradient stops. Any attributes can be animated, and we also supply a set of interpolators for easing which make animation less jarring on the eye.
A dynamic layout system is also essential for an interactive, responsive and high-performance user interface – it allows elements to adapt to the size of their content (e.g. if they are bound to data, or are localized). In addition layout containers provide application developers with readymade controls in which to insert their user interface elements (such as laying out a toolbar and controls within your application), achieving an implementation that closely resembles the idea behind the UI.
Next, the application needs to be able to access and update data from a server. Silverlight makes this easier by proving built in support for several levels of protocols : at the base it supports sockets and a web client interface to simplify file uploading; on top of this web services can be created. You can create a proxy class from web service metadata and use the proxy to communicate with a web service from your silverlight-based application. At a higher level ADO.NET provides a much wider set of services by allowing you to send queries via the URL and receive back result sets directly.
Most user interfaces represent data in some way or form. Data visualization apps often want their data to be separate from the UI components. Furthermore, most websites are data rich and display data coming from web services etc. Often times, this data is live such as stock ticker applications. Data binding provides a way of enabling such apps by providing an easy to use way of connecting data with UI.
Finally, out of the box Silverlight provides a rich set of controls to make it easy to build an application. Improvements to controls include a new TabControl, new features for TextBox such as text wrapping and scrollbar, and DataGrid now has Autosize, Reorder, Sort, performance increases and more. Controls are now in the runtime instead of packaged with the application.
CREATE APPLICATIONS WITH A CUSTOM LOOK AND FEEL THROUGH FLEXIBLE SKINNING OF CONTROLS AND DATA. MANIPULATE PARTS, LAYOUT, STATES AND GRAPHIC PRIMITIVES FOR EVERY CONTROL.
On the web, creating branded user experiences is important. Distinct, consistent, and polished look and feels differentiate sites for users, and help attract and retain customers. A key part of creating this visual design is the look of the controls themselves.
Sometimes you want to customize the appearance of your application beyond what just setting properties allows you to do. For example, you might want the buttons in your application to be shaped differently than the default. When you replace the appearance of an existing control without changing its functionality, you change the control's skin. However, it can be a huge amount of work to rewrite even a simple control like a listbox so that it handles all scenarios such as layout, accessibility, localization.
Silverlight makes it easy to create graphics and then use them to customize controls, such as the look of a scrollbar. Silverlight provides templates for each control that allow designers to reach inside the control and change the layout or look of each part of the control without rewriting any code. For example, a scrollbar is made up of a layout container and a set of parts such as the up and down button and draggable thumb. Parts can be rearranged and their appearance changed to fully customize the control. The example below shows re-skinning the thumb and repeat buttons; and in addition shows how even the layout of controls within the scrollbar can be changed :
In Silverlight, the skin of a control is defined by its ControlTemplate. Because you create a ControlTemplate in XAML, you can change a control's appearance without writing any code. The example below shows the XAML mark-up used to create a button : 
<ControlTemplate>
<Grid>
<Grid x:Name="DownStroke" Opacity="0">
<Rectangle Margin="1,2,1,1" Opacity="0.05" RadiusX="3" RadiusY="3"
Stroke="{TemplateBinding Background}" StrokeThickness="1"/>
<Rectangle Margin="1,1.75,1,1" Opacity="0.05" RadiusX="3" RadiusY="3"
Stroke="{TemplateBinding Background}" StrokeThickness="1"/>
<Rectangle Margin="1,1.5,1,1" Opacity="0.05" RadiusX="3" RadiusY="3"
Stroke="{TemplateBinding Background}" StrokeThickness="1"/>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#A5FFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
</Grid>
<ContentPresenter Margin="4,5,4,4"/>
<Rectangle x:Name="DisabledVisual" IsHitTestVisible="false" Opacity="0"
RadiusX="4" RadiusY="4" Fill="{StaticResource DisabledBrush}"/>
</Grid>
</ControlTemplate>
You can expose control properties to designers. You can use TemplateBinding to connect properties on shapes or other elements in your control to the properties on the control itself. This provides a built in mechanism to easily encapsulate together properties – in the button example above you can connect the background color of shapes inside your button to the background property on the control itself Silverlight also supports the Visual State Manager.
This allow states to be triggered inside of control templates so that you can specify how your control responds to events such as pressed or mouse over. The example below shows how a gradient with a button is animated in its mouse over state :
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)
[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="{StaticResource
MouseOverLinearBevelDarkEndColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
In addition, you can use a style to set properties once and apply the style to multiple controls, which gives the controls a uniform appearance. When you apply a style to a control, you can still set properties locally on the control, and the property value that is set locally take precedence over the property value set on the style. For example, suppose you want most of the buttons in your application to be red and the font to be 16 pt, but there is one button that needs to be green, but still have 16 pt font. You can create a style that sets the Background property to red and the FontSize property to 16 pt and apply the style to each button.
In the example below EasyJet was able to combine custom controls for their map with re-skinned controls such as a slider, button, calendar and listbox. Notice hot the controls reflect the brand and utilize its key orange color :
EasyJet (www.easyjet.co.uk), a large UK airline, has used Silverlight to build a smooth interface to help users to explore destinations in detail. It integrates with Microsoft Virtual Earth, so developers can layer the location-relevant data on top of the Virtual Earth map images. Customers who have set dates and destinations in mind can book quickly and easily by using a simple menu. A customer who is less sure of their destination can specify the dates that they’d like to travel and their preferred departure location. The map will then identify all the locations they can travel to within those dates and display fares in real time.
Paul Curtis, Head of Application Architecture for easyJet, says “Users can quickly compare where they can go on a given date and how much it will cost, without having to submit multiple searches”. The interface overlays prices—the least expensive return fares available—which are revealed at each of the destination points. Curtis explains: “Using Silverlight, we can incorporate a sliding bar at the left side of the screen, which helps the user to set their budget for that trip. Moving the slider up or down reveals or hides destinations according to their cost criteria. All the information is offered in a single seemless interface, whereas standard websites can only do this by constantly re-loading web pages”
DELIVER CUTTING EDGE USER EXPERIENCES, LEVERAGING THE POWER OF MODERN HARDWARE THROUGH MULTI-THREADING, HARDWARE ACCELERATION, AND MULTI-CORE SUPPORT TO DELIVER THE HIGHEST PERFORMANCE ON THE WEB.
Using multiple threads of execution is one of the most powerful ways to keep your application responsive to the user and at the same time make use of the processor in between or even during user events. You can segment threads of your code to run separately so that they don’t block.
Silverlight uses hardware acceleration in several ways. First, Silverlight takes advantage of multi-core for rendering and media playback. Therefore, your Silverlight-based applications will perform faster on multi-core systems. The scanline algorithm which turns vector graphics into pixels to render to the screen is able to be parallelized across the available processor cores in your machine. This means that some of the most labor intensive work in your application can automatically exploit the users CPU without requiring additional coding.
Second, Silverlight uses the Graphics Processor to perform the blit of the pixels to the video memory. Again, this drastically improves performance, particularly in full screen video scenarios where almost the entire screen must be updated for each frame.
