The Last Silverlight Post – Coming Out of the Closet

The intended audience of the book 'Hacking Silverlight' was primarily the seasoned professional Silverlight developer who has one or more Web 2.0 projects under their belt. Designed to help that developer connect with the larger Silverlight community and get access to all the knowledge and resources available to you. If that is you, this article can help you take your ‘understanding’ of Silverlight skills to the next level and not in what you can do but in what happened to Silverlight. If you need to learn Silverlight you need to start somewhere else. My blog was never meant for the beginner and often just a way for me to vent when I ran into this problem or the other. With that in mind this article is about what I wanted in a Silverlight to be and is designed then to help me deal what happened and maybe where things are going.

As Microsoft describes it, "Microsoft® Silverlight™ is a cross-browser, cross-platform and cross-device browser plug-in that helps companies design, develop and deliver applications and experiences on the Web. A free download that installs in seconds, Silverlight enables a new class of rich, secure and scalable cross-platform experiences. Silverlight offers a flexible programming model that supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications."

At the time of writing, the combination of browsers and OS's and devices that support either Silverlight or its open source counterpart Moonlight, was at one point expanding month-by month, so any list I published here would have quickly gone stale. For current information, see the Wikipedia "Microsoft Silverlight" entry for a current and comprehensive matrix. What excited me about the Silverlight story though is not the broad reach, or all the incremental improvements over older technologies or even the awesome job the Silverlight Dev team did building it; what I want you to get is where Silverlight really shines, in the collaboration story provided by the underlying architecture that allows designers and developers to come together to get more done, more quickly, as a tightly integrated team. (Feel the designer/developer love!) Let's acknowledge it: Integrating development and design teams has in the past been hard work. So Silverlight ushers in a new day, and it is my pleasure to share with you some of the good things I've discovered about designer/developer collaboration in this new day.

In many ways this cycle is still with us, certainly Silverlight is still around, WPF is still around and further Windows 8 with its winRT is coming down the track like a steam engine but more about that later.

Now if this were a beginner Silverlight article we'd do what all beginner texts have done since Brian Kernighan did it for the C Programming Language; we'd present "Hello World" in Silverlight. But we aren't beginners here and this isn’t about learning Silverlight…so how about a slice of real life instead…about Silverlight MVVM… this is really where Silverlight shined in it’s ability that even now going head to head with HTML5 out does HTML5 in every area save Microsoft is trying to kill it.

Once upon a time I went to a meeting (true story), and the subject of that meeting was a new project, and the coolness that we were going to use Silverlight ok at the time it was still WPF/e. We were so excited! Discussions broke out between pockets of participants; over this design, or that design and the comps we were getting from a partner on how the design ought to be…
And then the bomb dropped.

PM: "We have eight days to deliver the product."

[Dead Silence.]

Someone asks: "Do we have to use Silverlight?"

PM: "Um…Yes."

[Long Cold Silence.]

Someone Else (with a hint of desperation): "Really?"

PM: "Um… that would be yes."

[Another Really Long Silence.]

Another Someone Else: "So you realize that Silverlight is not even RTM and we only have three resources that have a clue about Silverlight?"

Lead: "We don't even have a solid design, and we are not sure we can even do all this fancy work. This would take months in [heretofore un-named technology that still is better in then HTML5 in its UX goodness] and we actually have experience doing that."

PM: "Yes, we know, but they are offering $$$ [and he named a Really Big Number] if we do, and if we don't we lose lots of business."

Lead: "Really? $$$? [And he questioned the Really Big Number.]"

[Short silence as everyone looked around at each other.]

There was a sudden recognition that we might be able to pull this off if we could work together…nicely.

Fast forward eight days: The office has the feel of a tomb. The aroma of unwashed bodies and stale pizza permeates the air. The exhausted bodies of spent team members are strewn over assorted pieces of office furniture, while others that could double for the living dead stroked keyboards under pale monitors. The silence is broken only by the soft staccato of key strokes. But for half-grown beards, time seems to have stood still.

[A knock breaks the silence.]

"Hello, anyone home? TV crew here…We're ready to do interviews for the launch today. Hello!"

[More knocking…]

Dazed faces turn to look at each other, realization slowly dawning that, eight days later, we are still here.

Someone: Is anyone gonna to let 'em in?

[blank expressions…]

Someone Else: "Who's gonna do the demo?"

A few hours later…

THE CROWD GOES WILD! *insert cheering and roaring of the crowd*

Granted the team was composed of very senior developers and designers, but as I recall it the team accomplished in eight days what previously would have had taken that team up to six months, and for the most part, the team learned the new toolset from scratch during the project. Granted this story has grown some in the telling, but the central point remains, the Silverlight toolset created conditions that made delivering to an otherwise impossible schedule, possible.

For me, this was the dawn of a 'new' way for designers and developers to work together. Generally, the user centric cross discipline approach worked and we have implemented it across the business at the time. Moreover, the team of designers and developers lived happily ever after in perfect harmony, broken only by the occasional keyboard hurled over the cubicle wall and a whisper of a mild profanity muttered under the breath.

That was part of the Silverlight 1 launch.

… It has been a long road since then, blogging, article writing, pod casts, writing books, public speaking and even some TV, I’ve loved it and really Silverlight helped me come into my own as a UX professional. So what changed and why is Silverlight going away? Really it’s a lot about Market perception stuff. Silverlight is still around and it’s still the best cross platform method for building desktop apps and high end experiences but when it comes down to it Microsoft pulled the rug out from under this technology before it even hit its peak. This isn’t even a new story either, many times companies have killed tech before it could come into its own and in this case I think a bit un necessary but as sad in what Microsoft did to Silverlight by its PR and support changes the best parts of Silverlight are still with us.

I can’t say that what happened was planned but it played out all very well. Microsoft used to have this cool developer conference called PDC; it was the “bomb” if you were a professional dev. They screwed it up one year due to a location issue and had it in Seattle on the Microsoft campus and generally killed the conference (now it’s called BUILD and it’s all better because it has a new name?!).

So what happened on or around the last PDC before it was called BUILD that killed Silverlight? It is not that this one thing did it but it started here, basically there was a top Microsoft executive that said that the company was going to focus on HTML5 and native app development for the future of windows meaning Windows 8 and it snow balled. Now already there was a huge group of Silverlight haters out there and this started a firestorm of Silverlight negativity. Customers were scared, social media was all a buzz and Microsoft tried to turn it around with the Silverlight 5 fire starter but it was too little too late. Over a year later Silverlight 5 finally has been released and I know there was talk of Silverlight 6 but nothing has come of it to my knowledge. Even though Microsoft tried to turn it around the course of the past year again and again they just kept also re-affirmed the abandonment of this technology except in Windows Phone. We in the industry even stopped calling it Silverlight in hopes of giving it more life. Microsoft fueled the flam in the fact that Microsoft broke most of the team up and announced no plugin support for Windows 8 Metro IE10 and went to far as to even move execs’ around like the gu which instead of being over tools, visual studio and Silverlight is not off in cloud land...
Revenge of the C++ programmer? Maybe,

In any case with those announcements at PDC and then BUILD 2011 being so poorly dealt with it virtually killed all new Silverlight work and even most of the user groups. Only one Silverlight group I know of still meats and we will see how that goes. Most of the professionals have distanced themselves from it. Even me where instead of saying I’m a Silverlight MVP, I’m not a ‘Microsoft MVP’

So where has all the Silverlight goodness gone? And what was so good about it? Well then XAML team was broken up and mostly part of blend and visual studio and windows and windows phone. There is still a small Silverlight team working on shipping Silverlight 5 which is in public beta. Now the whole cool story about designer developer relationship is still there with Windows 8 metro which in many ways promises to be cool and the next darling those tools are being pushed towards HTML5 tooling with in truth is sorely needed.

So truth be told, yes, Silverlight was not able to achieve its dream due to Apple blocking plug-ins on iPad and iPhone but it did compete and in any ways was better the flash in terms of tooling and time to market ROI stuff with the same UI. And Yes Silverlight is not dead as it is the basis for Windows Phone 7 and further the whole XAML story is part of the winRT or Metro for Windows 8 so in a way you might say ‘Silverlight is Dead’ but long live XAML. We will see I’m excited for Windows 8 but much less trusting of Microsoft then I was before. With that I will continue to support Silverlight everywhere for coolness sake (and you never know maybe I’m wrong and it will be the next big thing…) and it is still a great solution for things like lob apps but you’ll see my blogging going on http://www.vnext.org/ moving forward save short posts pointing back to vnext.org or {Interact} Seattle.

~Love, the last Silverlight mvp…

Achieving Digital Zen in Retail at MIX11

Vote for my session at mix11:

Abstract:

The road to Digital Zen in building cohesive, immersive experiences in retail from the web to touch walls in the real world can be long. This session is about the long road to designing building and implementing real world experiences that go from the web to brick and mortar using real world examples including the Nike Touch wall and the Microsoft Retail store and more using technologies like WPF/Silverlight. The session will touch on design elements including topic on and off screen from hardware, software, sensors and mobile devices like Phone 7.

Vote here: http://live.visitmix.com/OpenCall/Vote/Session/87

and don't mind the cats...

Achieving Digital Zen in Retail

"My “thing” is more or less about embracing the digital space, integrated experience, and fluid emotional connections with a target demographic. I want to hear “wow that’s cool!” That’s when I know it’s a success. That was our goal with the on-demand software kiosk my team at Wirestone and I created for the new Bellevue Microsoft retail store.



Microsoft’s developer centric approach (“Developer, developer, developer!”) has put the experience with Microsoft tools at least a decade ahead of everyone else. Now we need to look beyond the developer centric approach and more and more focus on a user centric approach.

..."

Read the rest and watch the video here:

http://blogs.msdn.com/b/mvpawardprogram/archive/2011/01/04/achieving-digital-zen-in-retail.aspx

Windows Phone 7 Socket Support...

or not...

if you have a dev account and or otherwise unlock your phone you can run unmanaged code... again Jeremiah does a wonderful hack with source using sockets on phone 7... don't worry this is another hack that won't get through the phone 7 market place vetting process but its fun to play with. check out Jeremiah's project here with source code:


http://groups.google.com/group/wpf-disciples/browse_thread/thread/e8f14483a41e6b0d

Why Use the MVVM Pattern with Silverlight Applications?

The probability of hearing or reading about the title question of this article if you are either a Silverlight or WPF developer is substantial. However, there are significant problems when searching for a proper answer to this question.

To begin with, there are numerous and varied ways in implementing methodologies like MVVM, most of which are used based on personal preference. To a novice trying to educate themselves, this leads to disparity in information. Complicating this factor is that many of the articles or videos that attempt to describe the MVVM pattern also include components of other architectural patterns. This adds unnecessary complexity to understanding the MVVM pattern because of the inconsistencies in the pattern being described. In this article, I will elucidate only the MVVM pattern - nothing more, nothing less.

First of all, let me answer the title question succinctly. Silverlight (XAML) and the Model-View-ViewModel (MVVM) architecture evolved together, thereby affecting each other. In effect, this means that inherent in Silverlight's framework elements and CLR objects are the mechanisms to implement MVVM's loose coupling and separation of concerns. I will go into greater detail on the specific classes and objects in .NET that are primarily involved in hooking everything up further on in this article.

The loose coupling and separation of concerns translates to the ability of large developer teams to work independently on different parts, bringing the pieces together at runtime utilizing classes or object interfaces (as opposed to user interfaces). Another enormous benefit of this is that not only can multiple developers work on different parts of the application simultaneously, designers - for the first time in the history of .NET development - and developers can work on the same code at the same time. Having designers "speaking the same language" as developers solves the longstanding dilemma of a developer taking what the designer gives them and having to rewrite everything to work with the applications. Furthermore, designers - for the first time also - can see what they are doing with data driven controls in the design view in Expression Blend. It's evident that the workflow between professional graphic designers and application developers has been monumentally improved.

Let me back up a bit and give an overview of what MVVM is and does for those of you who aren't familiar with it. MVVM, as architecture, is the mature, successful version of what n-tier attempted to accomplish: quarantine the user interface from the program logic and data. Where Model-View-Controller (MVC) may sufficiently accomplish this goal for ASP.NET applications, MVVM is a refined evolution custom-fit for Silverlight.

There have been intermediate patterns between n-tier and MVVM, all with the same goal, but none of them truly accomplishing the objective until the advent of MVVM and XAML. XAML, being an extension of XML, is inherently tool-able, resulting in the ease of building visual and other editors for those who use it.

If a new Silverlight developer were to dive into a new project without knowing better, they might attempt to put all logic into the codebehind of the MainPage.xaml.cs, as typically has been done in ASP.NET pages. Not only would this lead to difficult testing scenarios, but this methodology doesn't lend itself to long-term maintainability or extensibility. Testing code built like this needs a user interface (UI) to run and a human to debug, which adds to the complexity of finding errors. On the other hand, by using the MVVM architecture, only the "ViewModel" (which will be explained in the next couple of paragraphs) need be tested and verified before ever being bound to the UI.

Properly using MVVM, there is much less codebehind in MainPage.xaml. This is simply pure UI. Each entity in MVVM has its unique tasks, and they do them extremely well with complete separation. MVVM is an acronym for Model-View-ViewModel; let's elaborate on the functionalities of each entity.

At the uppermost level we have the "View". Ideally, the view consists only of the XAML UI and related UI logic. These are the Silverlight screens that are presented to the user. The View's responsibilities are to present data to end users and collect data from end users, period.
At the lowest level we have the "Model". This represents the entities that live on the server as well as the objects that are responsible for interacting with the data stores the application uses along with data persistence. Data interaction in Silverlight can be anything from RIA Services to web services or raw XML. Any CLR-object can be the binding source.

In between these two entities is the "ViewModel". This entity's responsibilities are numerous, but can be summarized as aggregating data that will be bound to the View, retrieved from the Model. This includes methods and states. Since Silverlight doesn't databind to methods, just properties and dependency properties, most of our data logic needs to be in property setters and getters in this ViewModel.

As previously promised, now I'll explain the specific objects in the .NET Framework that are involved in making MVVM and Silverlight work together. The binding mechanism in Silverlight links the View and ViewModel through primarily dependency properties and data context. Each framework element in the View (controls, UI elements, etc.) has a dependency property. These properties can be bound to instances of exposed public properties in the ViewModel. The ViewModel can update the View via the INotifyPropertyChanged interface in the ViewModel base, which is used to discover if the value of the properties have changed by raising the OnPropertyChanged event. This is a two-way conversation that extracts all of the data and logic from the View, but doesn't alter the UI's normal functionalities.

Lastly, I'd like to describe one last tremendous benefit of utilizing this pattern. Because all the logic is in the ViewModel, this entity can be copied from a Silverlight application and inserted into a WPF or Surface application, for instance. This cross-platform extensibility greatly increases return on investment (ROI) for companies that target multiple platforms.

- By Kim Schmidt, Guest Author from the Silverlight Group

LayoutTransform RenderTransform Size Resize Sizing Xaml Hack and black magic...

ok, so this is just really making me tired all over. about every size months or so I run into this problem but really after solving it I nicely forget until it hits me in the face again. So amoung the zillion projects I'm working on I volunteered to help on any projects that have something for me. Fabio and Curtis are working on this cool project I can't talk about as such but here is this layout thing that came up in working on this control that needed fixed.

The issue is basically this. You have a control that is a set size and it has some element that is or needs to be layed out outside that control box's size. since its a custom control and its top element is a grid any thing laying out can only be the width of the grid. Event when rendered outside the control box using a translate transform etc. the last time this issue came up I remember there was also a rotate transform taht took me probably a day to figure out what was even going on but between Fabio, Curtis and I there wasn't to much wasted cycles on it but after going back and forth I did a number of tests to just to see what actually worked.

keep in mind that the control is a set size and the root element is a grid.

That being the case, here are the methods I tried to get something larger then the control box size layed out outside the box.

method 1: putting element in popup (wpf only trick, well sort of, you can do something like this in sl but its an even more aweful hack) works but lots of control issues... with behavior not the least of which is the element might still be there if the view is switched... this is a bad plan...

method 2: just trying to use a translatetransform to put it outside the box... no soup for you as your element is croped to the size of the control box (root element grid)... another bad plan...

method 3: chuncking the element into parts and transform it all into place... this works but is a silly hack... due to how messy the xaml gets... to me this is really a bad plan too unless something else didn't work.

method 4: put the element into a canvas and then transform it out... really? this works... feels like a hack but the xaml is very clean... #tiredallover

method 5: use negative margins... this really is against my inner designer or rather the xaml mess I've seen it cause is mind numbing. But alas used spairing this this is a clean xaml solution. Just bad on principal because it leads to abstract layouts that are difficult to visually decompose and mape to the xaml.

method 6: use a layout transform and then a render transform to size it down to smaller then the control box and then the layout transform to get it back to size and outside the control box...
...

this works... I don't even wnat to know why... I actually do know but really this is just well it makes me cringe but the xaml is fairly clean but its totally a hack... don't do this just for sanities sack but really it works... f... here is an example:

<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="2.88" ScaleY="2.88"/>
<TranslateTransform X="210"/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.LayoutTransform>
<ScaleTransform ScaleX=".5" ScaleY=".5"/>
</Grid.LayoutTransform>

I went with the canvas trick as the xaml is the most clean.

Talking about Immersive Retail Prototype at MIX 10

Here is a quick video that Pixel8 (Craig Shoemaker) did showing the TouchTag Prototype Hardware and Arduino controller and sensor I have been working on.

http://community.infragistics.com/ux/media/p/225460.aspx

http://channel9.msdn.com/posts/Psychlist1972/Pete-at-MIX10-David-Kelley-on-the-Prototype-WPF-and-Silverlight-Retail-Experience/?FlagType=Rating&FlagState=1#Page=1

Me on Windows 7 Touch (and I mention Silverlight Hack)

At the MPV Summit 2010 I was asked to talk a little bit about Windows 7 touch and so I talk abit about this touch tag Kiosk technology and our experience at Wirestone working with Windows 7 Touch, WPF and Silverlight. Anyway its pretty cool:

http://www.vimeo.com/10357419

Getting Developers and Designers to play nice... and MIX

For those of you that don't know MIX is the most important Microsoft related conference of the year. Also MIX has decided to have an open call this year for speakers... and the Public gets to vote... in an effort to get my sessions to the top of the list I'm emailing everyone in my contact list to ask your help in voting for my sessions... :)

Here are the steps:


1. Click http://visitmix.com/opencallvote/Entry?entryId=BREAKI077

2. Click ‘add to ballot’

3. Click ‘Submit Your Ballot’

If you have more time start here:

1. http://tinyurl.com/ye9uzwz

and then add all 3 sessions and vote them

Please and Thank you. and feel free to get all your friends to vote too…

For those of you that want more information here are the abstracts... normally you just send them to the people organizing a show but this year they are making everyone vote... :( or maybe this is a good thing... I guess it depends on if I get selected... ;)

Here are the 3 topics:

Title: Breaking Down Walls – The Story of Getting designers and developers working together in an Agency Environment

Abstract: Breaking Down Walls is about the wall between designers and developers in the typical design shop. Getting everyone to cross over, communicate and build better UX is where we are going and where many of the best Interactive Design firms are already. When designers and developers learn to communicate, and work together they really start to be able to make the best use of the tools they have from Adobe to Expression to Visual Studio, all these tools can be used in an open collaborative environment like never before. Learn to make magic here or at least learn how it has been done at Wirestone and other agencies that have done it successfully.

Title: Multi Dos and Don’t touches –Multi Touch Development from the trenches

Abstract: David talks about his experience in the retail space with real world multi-touch applications from touch kiosks to Surface and Silverlight. David will talk about the customer experience and how user centered design and multi-touch work in the retail world with ‘live’ customers as well as the perspective of designers, developers, IA and others regarding multi-touch. From stories about developers touching too much and about good ideas gone amuck David gets it all out on the table.

Title: Hacking Silverlight 4

Abstract: From MVVM for Tard’s to hosting Silverlight in WPF and getting around silly security sandbox’s, this session is about pushing the limits of Silverlight and making things easier to do. With a ‘It shouldn’t be that hard’ attitude to development some of the best work in Silverlight can sometimes be a bit of a hack and this session will talk about some of the most useful hacks. From using external hosts, the DOM bridge and even flash; Silverlight can do just about anything given half a chance or a few hacks.

again that link is http://tinyurl.com/ye9uzwz please vote for me :)

Silverlight Hosting in WPF

Ok so we know this has been done. Yawn, and it can be done any number of ways from hacking it in a browser control but actually doing it in WPF without the browser control can be a huge pain. Here is a little trick that helps you do just that without all the jumping around.

Jeremiah, (this programmer extraordinaire with apparently WAY to much time on his hands) wrote this little codeplex project that is a 'WPF Panel' that hosts Silverlight. http://silverlightviewport.codeplex.com/

pretty slick, if you dive into the code it is kind of complicated but to use it is straight forward enough. If you download the project and run it you can see it in his test application running a xap in Window1.xaml.

&lt;slvp:SilverlightViewportElement BaseUrl="http://silverlight.net/"
Source="http://silverlight.net/clientBin/showcasenav/ShowcaseNav.xap"
ViewportSize="550,550"
RenderFps="40"
x:Name="slViewport">
&lt;slvp:SilverlightViewportElement.Effect>
&lt;DropShadowEffect BlurRadius="50" />
&lt;/slvp:SilverlightViewportElement.Effect>
&lt;slvp:SilverlightViewportElement.LayoutTransform>
&lt;RotateTransform Angle="10" />
&lt;/slvp:SilverlightViewportElement.LayoutTransform>
&lt;/slvp:SilverlightViewportElement>

you'll notice this is all the standard WPF fare but lets look at the properties on the main panel itself. First is our base url that tells the control the domain in which the xap or silverlight application lives. Next we have the 'Source' which points to our xap file. We then set a view port size as 'ViewportSize' and then the last one we will mention is 'RenderFps' which is the 'speed' that the Silverlight is 'rendered' into your panel. In effect your app now runs in the WPF app. Nice and clean as long as you don't look at the source for the panel which is more a work of art... :)

64bit Surface Hack

Not strickly speaking Silverlight but in setting up my new laptop to run the Surface SDK in 64bits I had to get special mojo to get it working so I can run my Simon demo (plus some work related stuff) from Silverlight to WPF to Surface. I did a bit of googling er I mean 'binging' and found some of the posts lacking mostly the orca link. Anyway Ariel sent me the link to this post: that had all the magic juice to make it work. if your trying to get this running on your box in 64bits these steps working for me.

http://www.theruntime.com/blogs/brianpeek/archive/2009/03/10/install-the-surface-sdk-on-windows-7-andor-x64.aspx

Azure Simon

Davide Zordan posted a version of Silverlight Simon up in the cloud at http://azuretestapp.cloudapp.net

Davide had also added multi touch support to the WPF version. You can check out the code on the codeplex project http://Simon.codeplex.com/

MediaElement for Sound effects

In doing Silverlight Simon and friends and then trying to port the uber tile from Silverlight to WPF I found that for doing quick short sounds there was a limit in Silverlight and WPF to the preformance and bahavior you can expect. WPF's 'MediaElement' is just horride but even in Silverlight if I try to use the same media element to play 2 short 2 second clips with in 1 second you will get issues. I must say though the Silverlight team has done a bang up job on the media element. It is orders of magnitude better then the one in WPF.

As part of pulling bits out of the crossfader codebase to post on codeplex I built a new 'MediaElement' class (see http://Crossfader.codeplex.com/) that solves this problem with sound in Silverlight and WPF and makes my life just that much easier for building composite apps.

So Karim suggested something called channel support to solve this and in this control I implemented it. Basically what happens is that the usercontrol called 'MediaElement' creates a collection of MediaElements that it then can have events and flags for for tracking state and each of these is a 'channel'. When you call SetSource the control looks for the first available channel to assigns the source. this actually creates like a quing mechinism that allows me to rapidly play sound effects without loosing one or having to wait for the control to have its mediaelement in a ready state and I don't need to have an army of media elements.

Also in WPF and Silverlight the usage can be then the same where I call SetSource and pass in a local uri path like this:


Target1.SetSource(http://localhost:52076/tone3.mp3);

or

Target1.SetSource("tone3.mp3");

in this case make sure the item is a local 'resource' in the xap with the control. In any case check out on the crossfader codeplex project or the HackingSilverlight library.

More Simon the Saga

in this latest chapter of simon I have been trying to get 'Simon' to run in a scatterview control on surface to be more 'Surfacy'? [Sir - fa - see]? (new word?) In any case the code from Silverlight Simon to Surface Simon had to have even more hacks... Finally had to convert all the game pads to buttons, hack out the control template and create new event handlers for all 4 buttons. but alas Surface Simon is not available for Download off of codeplex at: http://Simon.codeplex.com/

Also to get around the sound issue with WPF... which I must say the fact that the media element is so lame in WPF as opposed to Silverlight is very very sad. Anyway I changed the PlaySound method of Simon to look like this:


#if Silverlight
Uri MediaItem = new Uri(SoundFile, UriKind.RelativeOrAbsolute);
SimonSounds.Source = MediaItem;
SimonSounds.AutoPlay = true;
SimonSounds.Play();
#else
MediaPlayer mplayer = new MediaPlayer();
mplayer.Open(new Uri(SoundFile, UriKind.Relative));
mplayer.Play();
#endif

you'll note the use of precompiler specifiers and that we are not using the Xaml based media element in the WPF/Surface versions any more...

From Silverlight to WPF to Surface... the Saga...

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 NewBtnContactUp(object sender, Microsoft.Surface.Presentation.ContactEventArgs e)
{
NewBtn_Click(sender, null);
}

Silverlight Simon/WPF Simon on codeplex

I posted the solution for Silverlight Simon and WPF simon up on codeplex:

http://simon.codeplex.com/

this is a great solution for showing the conversion from WPF and Silverlight, using precompiler specifiers and other small differences between Silverlight and WPF elements.

WPF Blendables controls

a new drop of the WPF blendables control was released. not strickly silverlight but still cool.

http://blendables.com/blogs/blendables/archive/2009/05/07/new-blendables-versions-now-available.aspx

WPF Simon

here are links to download WPF Simon (the WPF version of Silverlight Simon)

http://www.hackingsilverlight.net/Downloads/WpfSimonInstaller.msi
or just the zip

http://www.hackingsilverlight.net/Downloads/WPFSimon.zip

Converting Silverlight Apps to WPF

Using Ariel's Simon design I built this game called Silverlight Simon. Jobi suggested making it a WPF app and then a surface version. I got it working and will do a post on it later but strictly speaking here this is how I overcame some of the issues going from a Silverlight user control to WPF.

The first thing I found out when I moved my code into Xaml was a number of things that WPF doesn't do that you can do in Silverlight.

1. there is NO VSM... at all.
2. there is no autoplay on media element.
3. no 2.5D (ie, all the plane projection stuff)
4. and all my animation calls to story boards didn't work.

When I first ported the code over I knew the VSM and 2.5d was not going to work so I started with ripping that out. the first thing that then poped up was all my animations calls. For example say I have a click event and I'm doing something like [animationname].Begin();

well that doesn't work as all my animations are 'resources' I played with this for a while and with some Dr. WPF medicine I found that I basically had to change all my animation issues to something like this:


Storyboard foobar = TopSimonGrid.FindResource("PrefsBtnPressedKey") as Storyboard;
foobar.Begin();

from their I got my animations working. I then removed my auto play on the media element and it would compile. but as soon as an event tried to fire a sound I got another error. I ended up having to add
LoadedBehavior="Manual"

that way my sound method started working. At this point you could play the game if you could get past the fact that all the styles that used the VSM looked like crap. I know there was this codeplex project called WPF Toolkit ( http://www.codeplex.com/wpf ) which included a prototype VSM (Visual State Manager). I pulled it down and tried it out. The only hard part was figuring out the right name space to get my vsm: working. as it turns out it is where you would expect if it was part of WPF kind of:

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

With this mojo going on everything worked but my flip fx control. I couldn't find that any one get industrous enough to build the 2.5d stuff for WPF so I took the old animations from the SL2 fx control but put them in the vsm flip animations generic xaml so that it would use that instead of the 2.5d. I then had to change the content presentor to have the transforms needed and then poof like magic Silverlight simon worked like a champ.

For something extra I ripped out the WPF window chrome so Simon sits on the desktop and I found that my drop shadow on Simon was know on my desktop.

for those that are interested ripping out the chrome which is way easier then it used to be I had to add this to the window tag:

WindowStyle="None" ResizeMode="NoResize" AllowsTransparency="True" Background="Transparent"

from there you can pretty much do what you want.

ok ok ok, here is a little update. for Simon the above works fine... but for my uber tile project a few more issues came up... starting with dependency property registration sanity check....

So it is not so much a difference other then that the code that shouldn't work does in Silverlight 3 but blows up properly in WPF. take a look at this code:

public readonly DependencyProperty BackLink2TitleProperty = DependencyProperty.Register("BackLink2Title", typeof(string), typeof(MediaPlayer), new PropertyMetadata(new PropertyChangedCallback(OnBackLink2TitlePropertyChanged)));

in the named registration value you can't have two of these with the same value. Silverlight will currently over look that little indiscretion. WPF... not so much :)

Facebook and Microsoft demos facebook API's

something cool from facebook and microsoft

http://team.silverlight.net/announcements/microsoft-previews-great-wpf-and-silverlight-apps-with-facebook-openstreams-api/