Today I had a little bit of spare time so I started to play around with WPF/E and Cocoa (OSX programming language). After a morning reading about Cocoa (need to spend more time with that) I decided to spend the afternoon with WPF/E. This is the first time I have tried to do WPF and XAML animation so it was very new to me.
View the sample here http://www.benhall.me.uk/helloworldwpfe/
First things first:
Using Beta 1 of Blend
First CTP of WPF/E
XP SP2, Visual Studio 2005 with Templates installed
To start with I created a new project using the VS templates. Note, if you have VS SP1 installed then you may have some problems with the samples. John Rayner has a guide on the templates. http://blogs.conchango.com/johnrayner/archive/2006/12/05/WPF_2F00_E_3A00_-Setting-up-your-workstation.aspx
The sample creates a html page, javascript and a xaml button. On mouse events, the button changes colour and on click it displays an alert. For my hello world, I wanted to extend this a little bit.
First thing I did was copy the XAML into Blend, however this doesn’t work as Blend does not yet support creation of WPF/E XAML. Instead, I created a new project in Blend and built my button up using that. Blend is cool, very drag and drop and you can click the interaction, set when stuff will happen and using the timeline you can say where you want stuff to be at certain times in the animation and blend works out the movement for you. Very cool.
After I created the XAML I had to modify it to work with WPF/E. Mike Harsh replied to my post on the forums on how this should be done. http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=986587&SiteID=1
Just to quote it here:
“For the Expression issue, current CTP of Blend does not yet support the “WPF/E” XAML namespace (http://schemas.microsoft.com/client/2007). However, the “WPF/E” runtime supports but the WPF and “WPF/E” namespaces. To open the plugin.xaml file from the “WPF/E” template in Blend, just change the XAML schema to http://schemas.microsoft.com/winfx/2006/xaml/presentation“.
For coping animations from Blend to “WPF/E”, you’ll need to take these steps:
– Copy the Canvas.Triggers block to the “WPF/E” XAML file
– Remove the Storyboard attribute from the BeginStroyboard tag
– Copy the Storyboard block from the resources section of the Blend XAML and paste it into the “WPF/E” BeginStoryboard tag.
– Change the x:Key attribute to x:Name
This will give you an animation that works in “WPF/E”. This workflow is not ideal, but keep in mind that the current CTP of Blend isn’t yet optimized to output “WPF/E” friendly XAML.
The next thing you’ll want to do is change this animation to start when some other event is triggered. To do this, change the BeginTime of the Storyboard to be “1”. This maps to one day. Then, in your eventhandler, get a reference to the Storyboard by calling findName(““) and then calling the begin method on the Storyboard.”
After following this, and also removing the RoutedEvent tag, it worked!! Because I removed the Event handler it doesn’t work when I moved my mouse over like it should. To solve this, we need to jump into javascript. At the top of the canvas there is the Loaded=”javascript:root_Loaded” statement, together with in the HTML we now have full access to the world of javascript.
In the loaded event, we setup the event handlers so we can access all the events in javascript.
function root_Loaded(sender, args) {
var button = sender.findName(“button”);
button.mouseEnter = “javascript:handleMouseEnter”
button.mouseLeave = “javascript:handleMouseLeave”
button.mouseLeftButtonUp = “javascript:handleMouseUp”
button.mouseLeftButtonDown = “javascript:handleMouseDown”
}
An example of this is when the mouse enters the button, and the code is executed.
function handleMouseEnter(sender, eventArgs) {
var gradientStop1 = sender.findName(“gradientStop1”);
var gradientStop2 = sender.findName(“gradientStop2”);
gradientStop1.offset = 1;
gradientStop2.offset = .403;
var wpf = document.getElementById(“wpfeControl1”);
var o = wpf.FindName(“sbMouseClick1”);
o.begin();
}
First get access to the WPF control
var wpf = document.getElementById(“wpfeControl1”);
Then it get access to the storyboard we created in XAML.
var o = wpf.FindName(“sbMouseClick1”);
Then we can call methods on the storyboard such as begin and stop.
o.begin();
This then links everything together allowing for animations and completing my hello world application.
I think this covers most of the issues I had with getting a Hello World application created.
Sample is online at : http://www.benhall.me.uk/helloworldwpfe/
Code at: http://www.benhall.me.uk/helloworldwpfe.zip This also includes the original xaml created by blend so you can compare how I changed it.
NOTE: When I uploaded the sample onto my hosting, I was/am having problems with caching of the XAML, in IE7 I used the Developer Toolbar to disable caching and clear the cache for my domain but still didn’t seem to work. Working locally it was fine. Just something to be aware of.
I hope this helps you, any questions post a comment and I will get back to you. Any other comments as well.
