So we have shown you some pictures of the Aston Martin Keynote at Mix08 and a link to the video but how did we actually do the work...while we don't want to give all our secrets away here are some behind the scenes details...

This blog follows a section of the development of the Aston Martin silverlight presentation for Mix08. The content assumes prior knowledge of Windows Presentation Foundation and its xml mark up called XAML.
This blog will briefly detail how we made a custom template for the slider control. The custom template changed the visuals of the slider and added additional functionality to allow the Aston Martin car to rotate while showing a number of features of interest.

Figure 1 shows how the slider renders out of the box. The silverlight slider has the same basic functionality found in all GUI sliders. The control allows minimum and maximum values of the slider to be defined; dragging the thumb of the slider changes the value of the slide within it set bounds.
In the case of the Aston Martin project the value of the slider represented the frame number of a rotating car animation, so dragging the slider changed the frame index and therefore animated the car.

Figure 1: Visual of the standard Slider Control

The slider has the following default template shown in Figure 5, basically the template is made of a grid with two nested grids within it which allow the slider to define a different layout for the two orientation modes horizontal and vertical. Concentrating on the horizontal layout, the layout consists of a 3 column grid. The first column contains an invisible repeat button within it to automatically decrease the value, while the third column contains an invisible repeat button to automatically increase the value of the slider. The middle column contains a thumb control which can be dragged along the track of the slider which spans all the columns behind the other controls. When the thumb is dragged the slider changes the width of the first column, moving the thumb along the track.

Figure 2: Built in Template for Slider Control

This template can be found in the source code of the controls or by using Lutz Roeder's Reflector to save the resource (generic.xaml) from the assembly the slider is contained in.
The goal of the custom template is to

1. Change the visual of the track Layer
2. Change the thumb visual.
3. Add additional controls to move with the thumb, which show features of the car of sections of the sliders track, while communicating a picture and description for each feature associated the frame number, which is the slider value.

Changing the track layer is easily done with a simple rectangle with gradient alpha colours and the aid of Expression Blend.

Figure 3: Custom Track XAML

Basically this effect is created by defining four gradient stops allowing the middle 60% of the track to be a solid colour while the ends of track gradually fade out by altering the alpha mask from 100% to 0%

Equally the thumb can be given a custom template to be more visually appealing.

Figure 5: Built in Thumb Template

Figure 6: Thumb using a custom template

To add additional controls which move with the thumb an additional row is added to the control template and the additional controls are added to the middle column of the first row. Additionally another row can be added to the template to add a text block control spanning 3 columns and aligned centrally to describe any feature the slider should reveal.

To make things simple we can add an image to the middle column of the first row. When the slider is dragged, the slider value is changed; depending of the value of the slider different images can be displayed. In order to achieve this, the custom control overrides the OnValueChanged method. The On ApplyTemplate method can also be overridden to allow references to the image and textblock control to be found the template.

The basic XAML and code can be seen in Figure 8 and Figure 7. The final silder visual can be seen in Figure 9

Figure 7: Custom Slider Code

Figure 8: Custom Slider XAML

Figure 9: Final Slider Custom Visual

Conclusions:
The sliverlight control template framework is very powerful and is incomparable to prior web technologies, it allows full customisation of a controls visuals while retaining its functionality. It is a completely different world from working with technologies such a combination of asp.net and javascript.

If you want to know more about the Aston Martin project or our work with Silverlight 2.0 then all you need to do is get in touch.