Using a Wii controller, a projector and some LEDs, a colleague and fellow Silverlight blogger of mine, Dean Gifford (RocketPanda.com) builds a home made interactive whiteboard and demos it using interactions from silverlightbuzz.com.

The two examples from this site were my Interactive 3D Cube and my Cup-o-Salt prototype game.

Notice the Metia sponsored sticky tape holding up the Wii control on the ceiling!

The whole exercise costing only a Wii controller (app. £30) and an LED (under £1) means building your own Surface table is not that far from being a reality.

You can even get multi-touch working and pressure sensitive values with a little more work, something that I am sure Dean will be looking at next.

The below example shows off 6 transitional effects using the new pixel shader ability in Silverlight 3. By standard, Blend 3 currently only features 2 pixel shading effects which are Blur and Shadow.

The 6 new effects I show off above are:

  • Directional Blur Effect
  • Pixelate Effect
  • Pinch Effect
  • Ripple Effect
  • Swirl Effect
  • Zoom Blur Effect

You can however add many more effects that have been converted from WPF to Silverlight by following the steps below.

Installing Pixel Shader Effects from the WPF library

First off go to http://www.codeplex.com/wpffx and download the latest release of WPFSLFx 2.0. Un-zip the download to your desktop or a prefered location.

Open up a new Silverlight project and right click on the Solution in Solution Explorer. Select ‘Add’ and then ‘Existing Project’. Now locate the Silverlight Shader Effects project file. This should be: WPFSLFx > SL > SLShaderEffectLibrary > SLShaderEffectLibrary.csproj.user. This should add a new project to your solution.

Now we need to add this new project as a Reference to our project that holds the XAML files, to do this you right click on ‘References’ and then ‘Add Reference…’. In the popup that opens, select the ‘Projects’ tab and select the newly added project, in this case ‘SLShadreEffectLibrary’. Once added you should see the Reference appear in the list as below:

Next we need to add the reference into the C# file of any pages that we want to use the new pixel shaders. So in my example I add ‘using ShaderEffectLibrary;’ to the C# file that accompanies the page MainPage.xaml as seen below (notice I have taken off the SL from the begining of the project name):

Now you can open up Blend 3 and access a whole load of additional pixel shaders. They are located in the same place as the standard Blur and Shadow effects under there own folder.

Grab the files

As always you can grab my example files here.

In the below example I have produced an example of a very quick and easy demo, used to show a client an example of a piece of functionality for their application. Blend 3 also allows us to use Behaviors so that, in the below example, we can add all the functionality in using Blend and not needing to touch Visual Studio or any C#.

In this example I have used behaviors to do the following functionality:

  • Drag using the mouse
  • Change visibility properties
  • Play Storyboards

First off SketchFlow offers us a set of new pre-styled controls, the style is meant to give the impression that the work shown is at Sketch level and therefore allow the user to concentrate on functionality and not get held up on design / look and feel.

SketchFlow offers many more features including the ability to navigate between different pages (or screens) and a new player that allows the user to report feedback through a range of means. For the above example I have switched off the user feedback area to save space, but the example source (available at the bottom of this post) still has it all intact.

The ‘How to’ bit

First off we need to create a SketchFlow Project, to do this simply open up Blend 3 and select ‘New Project’ and then ‘Silverlight 3 SketchFlow Application’, as seen in the image below:

Open up a new SketchFlow document

Open up a new SketchFlow document

Now you have access to many new features, but for now we will concentrate on finding the new SketchFlow styled controls. Click on the ‘Assets’ icon near the bottom of the toolbar to open up all the available assets. In the window that opens, go to the left hand menu and select SketchFlow >> Styles >> SketchStyles. You should now see around 33 different controls / elements available to you in the new SketchStyle styling:

Open up the assets window and find the SketchStyle controls

Open up the assets window and find the SketchStyle controls

For my example I have used the following items from the above list:

  • Rectangle-Sketch
  • ScrollViewer-Sketch
  • Button-Sketch

Once you have got all your elements in place we need to wire them up. This used to involve going into the C#, but thanks to behaviors (new to Blend 3) we can now wire up most basic functionality inside Blend without needing to touch a single line of code!

Follow these simple rules and you will become a master at using Behaviors!

You will need to add a new Behavior element for each action you want to create (Play a storyboard = 1 Bevaior, Change a Visibility value of an object = 1 Behavior). The object that controls the action needs to have the Behavior attached to it (for example a button). Any object can have mulitple Behaviors attached to it.

To attach a Behavior, first open up the ‘Assets’ window again. Now click on ‘Behaviors’ in the left hand menu, this should give you around 13 different types of Behaviors to choose from:

Open up the Assets window and select Behaviors

Open up the Assets window and select Behaviors

In this example I only use 2 types of Behaviors, they are:

  • ChangePropertyAction
  • ControlStoryboardAction

To apply a Behavior, simply drag your desired Behavior from the window shown above onto the object you require to activate the Behavior. You can drag the Behavior onto an object on in the Visual view area or in the Objects and Timeline tab. Once the Behavior has been assigned it will appear below the object it is controlled by. Now select the Behavior in the Objects and Timeline tab and go to the Properties tab, you should be presented with a set of fields asking you what action under what circumatances you want to control.

Repeat the above paragraph for each action you want to create. I used a total of 10 Behaviors to get the example shown in this post working.

Grab the Code

As always you can download the code for this post here.