In the example below I show 6 ‘out of the box’ Silverlight Sliders (with my ‘Black’ styling added), each one is linked to a different value associated with a ScrollViewer. This is all done with Data Binding inside Expression Blend with no work carried out in the C# code behind file.

Data Binding allows us ‘designers’ to hook up actions between two different objects, in this case a slider control and a scrollViewer control.

Not all elements of an object can be controlled using Data Binding, but there are plenty that can be so overall the technique is very powerful.

The ‘How to’ bit

First off, in the above example I create 6 sliders and 1 ScrollViewer. So your Objects and Timeline list should look similar to this:

List of items in Blend

List of items in Blend

Next we need to select our ScrollViewer and look at the Properties window:

View the Properties window

View the Properties window

Notice that the items with a yellow outline indicate a value that is already linked using Data Binding. To edit a value that has been Data Binded or to set up a new one, we need to click on the small square icon, oftern to the right of a value (also highlighted yellow on existing Data Binded objects):

Click on the small square icon to the right of a value

Click on the small square icon to the right of a value

In the menu that appears you will see if Data Binding is available, if so, click Data Binding to open up the appropriate window:

Click on Data Binding from the menu

Click on Data Binding from the menu

To assign one of our sliders to the chosen value, make sure the middle tab is selected ‘Element Property’ and select the neccesary Slider control from the list on the left. Now we need to choose what value of the Slider needs to be linked, which in this case is ‘Value’. ‘Value’ is the position of the slider tab on the slider.

Once a slider has been Data Binded, we can change the properties of that slider to set the Minimum value, Maximum Value and its start position, all from the Common Properties tab under the Properties window.

You can now build the project and see that dragging the slider now effects the value that was assigned to it, with absolutely zero code needed!

Grab the Source

As always, grab the source here

In the below example I use the new projection properties in Silverlight 3 to produce a realistic 3D shadow upon a sphere based on the mouse position on screen.

In my previous 3 posts I played with the projection property as the primary effect. In this example I wanted to show how the projection property can be used as a more subtle effect, in this case a shadow based on the users mouse position. To view the previous 3 posts on projection please view the links below:

Controlling Projection in Silverlight 3

Using projection to build a 3D carousel in Silverlight 3

Creating a 3D cube with images in Silverlight 3

The ‘how to’ bit

There are two effects that I create in the above example. The first is the lighting and the second is the shadow.

The first step is to run an event everytime the mouse is moved. Then to create the lighting effect, I first take the mouse position value and I use a small equation to give me a value that I can apply to a radial gradient’s ‘GradientOrigin‘ value. To control this i place an x:Name in the XAML called “lightAngle“:

<RadialGradientBrush x:Name=”LightAngle” GradientOrigin=”0.258,0.253″>

To create the shadow effect I use the  new projection properties given to us in Silverlight 3. I have drawn an ellipse with a radial gradient fill that goes from black to transparency. I then use the projection values in Blend to make the ellipse look like it is the shadow of the orignial red ball graphic. To animate the shadow I first take the mouse position value and use a series of equations to convert the values to apply to the projection globalOffest values of  LocalOffsetX and LocalOffsetY.

The tricky bit

To get the shadow to lie in the correct position we need to tell the LocalOffsetX value to point in the opposite direction to the mouse position. To do this we have to reverse the original value taken from the mouse. We can do this using the following equation:

Mouse X position = A

A = (A – (A * 2)) + 1

or in my example (where Mouse X = pt.X)

pt.X -= (pt.X * 2);

pt.X += 1;

Grab the code

As always you can grab the source here.

In the below example I have used the new Projection properties in Silverlight 3 to create a3D cube that has a different image on each face.

The ‘how to’ bit

You can read more about using the new Projection properties in my 2 previous posts here:

Controlling Projection in Silverlight 3
Using projection to build a 3D carousel in Silverlight 3

I use the same process with the 3D cube to control the movement dependant on the mouse position. To get the cube to work correctly I have had to use all three dimensions (X, Y and Z) of the projection properties. The more complicated the shape the harder it is to get all angles to move together. In the above example I have had to manipulate 12 projection values to get the cube to move correctly.

Moving forward

This example is still a fairly simple example of interaction, there is no reason that the images could not be updated dynamically or video be used instead. Also each image face could have it’s own navigation interface to spin to the next face.

Grab the code

As always you can grab the code for the example in this post here.