Project Description
Composite Surface/WPF/Silverlight 3/Silverlight 3 OOB project for fun and for demo-ing going from Silverlight to WPF and the use or resources in both kinds of projects and then again going from WPF to Surface allowing users to show the differences between all 3.5 environments.

Silverlight Simon has been ported to Windows Phone 7 and is available free in the market place at: http://social.zune.net/redirect?type=phoneApp&id=65c23c5b-73e9-df11-9264-00237de2db9e

this requires the WPF toolkit and Silverlight 3 installed. and uses http://code.msdn.microsoft.com/WindowsTouch in the WPF Simon for Multitouch support care of Davide Zordan. The multitouch library is governed by http://code.msdn.microsoft.com/WindowsTouch/Project/License.aspx

Want to just play the game? Select one of the links just below the warning.

WARNING: To view the Silverlight 3 version, you must have Silverlight 3 runtime or no silverlight software installed at all. If you have a prior version of Silverlight runtime installed, you will be redirected to install Silverlight 2 which will load Silverlight 3 properly. If you have Silverlight 2 installed, you may need to uninstall it entirely before attempting to install the Silverlight 3 runtime - or - go to the official Silverlight 3 website and install the Silverlight 3 runtime directly from there - Silverlight 2 and Silverlight 3 can run concurrently on one system successfully. To run or work with Azure Simon you will need the Azure SDK http://www.microsoft.com/azure/default.mspx.

Silverlight 3 version: http://www.hackingsilverlight.net/Simon.html
Azure Version: http://azuretestapp.cloudapp.net/
Silverlight 2 version: http://www.facingblend.com/SimonInSilverlight/index.html

you can get Silverlight 3 installed for testing and dev purposes at:

http://silverlight.net/getstarted/silverlight3/default.aspx

Currently there are 2 changes you need todo to move the 'Simon' user control from the Silverlight world to the WPF version. To try it, remove the Simon control from the WPF solution. Copy the Silverlight Simon user control from the Simon project to the WPF. in the code behind remove the #define Silverlight from the top of the file. in the XAML change the VSM name space to:

xmlns:vsm="clr-namespace:System.Windows;assembly=WPFToolkit"

rememeber you will need to make sure the WPF tool kit is installed or the vsm stuff will not work since WPF doesn't have a VSM yet.

Also note that come code can be used straight up for example the FX class can as long as the generic.xaml is updated with the VSM PresentControlTitle

Demoable Features

There are features that Simon can be used to demo or teach.

-Silverlight to WPF composite developement
-Silverlight Out of Browser (OOB)
-WPF Chromeless Window
-Surface Developement
-Basic Silverlight 3 Developement
-Designer Developer Workflow
-Basic WPF/Surface Developement
-Control Template Sytling in Blend

Simon Inspiration

Ariel Leroux was initially inspired to create simon primarily as an icon which was XAML based to represent a section of her site called "The ToyBox". When it was seen by David Kelley, he instantly decided that it needed to be done larger, and made to come alive and they both worked together to make that happen.

Having had one of the electronic versions as a kid they both thought it would be fun to make the Silverlight version for doing demos and to showcase different Silverlight features. Ariel did the initial comp in Silverlight using Expression Blend 2. David made the first version work in a pre-release version of Silverlight 3 and Ariel ported it back to Silverlight 2. It was then released in both versions and posted to codeplex for everyone to use and have fun with.

For those who haven't seen the old toy from the 70's take a look at http://www.granneman.com/images/miltonBradleySimon.jpg
There is a very similarly looking application for the Mac called Extreme Simon which can be found at: http://www.digitalrendezvous.net/2006/05/25/simon-says/.

Anyway we hope you have fun with Simon and feel free to ping us with comments and questions or ideas for adding to Simon but remember any ideas might get used... :)


WPF/Silverlight Differences
  • VSM namespace (see above note)
  • calling animations see difference in following block:

#if Silverlight
PrefsBtnPressed.Begin();
#else
Storyboard foobar = TopSimonGrid.FindResource("PrefsBtnPressedKey") as Storyboard;
foobar.Begin();
#endif
  • Media Element AutoPlay on the media element is not supported in WPF however WPF supports LoadedBehavior this is how Simon deals with this issue:

#if !Silverlight
SimonSounds.LoadedBehavior = MediaState.Manual;
#else
SimonSounds.AutoPlay = true;
#endif
  • remember to use keys on resources that you would use as named values in WPF specifically animations.

also note that I might have done something specifically knowing I was going to have it in Silverlight and WPF that I may have forgotten about by the time I did this. I did so a post at the time at: http://hackingsilverlight.blogspot.com/2009/05/converting-silverlight-apps-to-wpf.html

but some of the points from that conversion process/post besides the above include: no 2.5 SL3 stuff works in WPF. although WPF has real 3d.

WPF/Surface Simon Differences

Going from WPF to Surface turns out to be a bit more in the line of code changes expecially in XAML then going from Silverlight to WPF. WPF Simon will run straight up in/on Surface the problem is all the click events are castrated by the Surface Framework as Suface focus's on 'Contacts'. In order these are the kinds of changes I had to make to make 'Surface Simon' playable.

First we couldn't just reference WPF Simon to make the chagnes we needed so I had to copy the code base. Then started with converting the 'Simon' user control to a 'Surface User control' something to the effect of:

<s:SurfaceUserControl x:Class="Simon.Simon"
xmlns:s="http://schemas.microsoft.com/surface/2008"

and in the code behind:


using Microsoft.Surface.Presentation.Controls;
using Microsoft.Surface.Presentation;

and

public partial class Simon : SurfaceUserControl

then next thing I needed todo was swap out the button controls with surface button controls so I could get the contact events like this:

<s:SurfaceButton x:Name="ScoresBtn" Click="ScoresBtnClick" ContactUp="ScoresBtnContactUp" Style="{StaticResource ScoresBtnStyle}" Height="41" Width="34" Content="" Canvas.Left="98.407" Canvas.Top="-6" />

note I could leave the click even there and the new 'ContactUp' event basically just calls the click event like this:


private void NewBtn_ContactUp(object sender, Microsoft.Surface.Presentation.ContactEventArgs e)
{
NewBtn_Click(sender, null);
}

from here I still have the 4 game pad buttons which were not 'buttons' in the first place and there is no Surface Canvas so I had to use a static helper class to assign contact events and handlers to them like this:


Contacts.AddContactUpHandler(GreenBtn, GreenBtn_ContactUp);

now granted I could have used this approach all along and have only one place and I can probably make a WPF Version that would run in Surface and WPF but this is what I did on this cut. The big thing is to show the difference between the rich multi touch environent of surface vs straight WPF. Keep in mind that Surface is in fact a subset of WPF.

Note: the current 'Surface' Simon has been even further altered to run in a scatterview so the code there is different some what then shown above in the Simon control itself.

Last edited Dec 15, 2010 at 3:07 PM by DavidKelley, version 31