Kyle Groves and Dave Goulet: eLearning app demonstrates WPF goodness

preview
Posted by scobleizer // Fri, Oct 14, 2005 5:02 AM

This eLearning video features Kyle Groves and Dave Goulet from LogicBay demoing a prototype they built for 3M. The very cool thing about the app is the browser integration: it is probably the most sophisticated in browser Avalon app created to date. It also features Arik Cohen from the Avalon (er, Windows Presentation Foundation, aka WPF) team showing off WPF/E: a port of the elearning application to a smart phone. Gnarly!

Karsten Januszewski was the camera guy and interviewer.

Tags: , , ,

Video Length: 00:11:24 Replies: 9 // Views: 36,161
  jmacdonagh
 
 
  Fri, Oct 14 2005 1:55 PM
2 Questions:

1) How did you achieve the transistion between pages? From what I can gather, you  are using a Navigation window with the background gradient built in. Whenever a new page is navigated to, you fade the old one out and fade the new one in?

2) The WPF/E application that was shown seemed to be completely different than the client application. If it was completely different XAML and C# code, why was it said "this is the same XAML..."?

  Tyler Brown
  Bullets change governments far surer than votes.
 
  Fri, Oct 14 2005 3:57 PM
I'm also interested in how the fade animation was acheived between pages. Perhaps a brush the size of the page was drawn iwth a white background property, which then had its opacity property animated from 0 to 1 and then back to 0 with a new page load in between?


  AdamKinney
  on10.net
 
  Sat, Oct 15 2005 1:04 AM

jmacdonagh wrote:

1) How did you achieve the transistion between pages? From what I can gather, you  are using a Navigation window with the background gradient built in. Whenever a new page is navigated to, you fade the old one out and fade the new one in?


Tyler Brown wrote:
I'm also interested in how the fade animation was acheived between pages. Perhaps a brush the size of the page was drawn iwth a white background property, which then had its opacity property animated from 0 to 1 and then back to 0 with a new page load in between?


The first application shown was a WPF application running in the browser.  Any element which inherits from UIElement has an opacity property which can be animated.  In this case, it looks like the animation was triggered by the button click.

jmacdonagh wrote:

2) The WPF/E application that was shown seemed to be completely different than the client application. If it was completely different XAML and C# code, why was it said "this is the same XAML..."?


As mentioned above the first application was a WPF app, using the full blown WPF platform.  The second one was running on a preview WPF/E platform, so once you realize that its not suprising that they look different.

Plus both platforms will use XAML, but the preview application they showed at the PDC was an application running inside of an ActiveX control using XAML and JavaScript.Which is cool and lends itself to the "everywhere" concept.

Please remember, WPF/E is still in the planning stage.  I'm just relaying information given at the session.  But that's one of the great things about PDC, we get to show off our ideas and get feedback from everyone.



  Tyler Brown
  Bullets change governments far surer than votes.
 
  Sat, Oct 15 2005 1:08 AM
With regards to animating the opacity property. Would you be able to have two pages, Page 1 and Page 2, where Page 1 is currently displayed on the screen. When the user clicks the 'next page' button, would you be able to have the opacity of Page 1 animate from 1 to 0 while simultaneously animating the opacity of Page 2 from 0 to 1 at the same rate? The effect would kind of be a morph into the second page.

Just a quick un-educated question. I haven't looked at what the Page element inherits from, so this could very well not be possible. Sorry, I'd do the research tonight, but its 1:00AM and I have to write two midterms tomorrow.


  AdamKinney
  on10.net
 
  Sat, Oct 15 2005 1:15 AM
It didn't look like a NavigationWindow to me as there was no chrome on the top with Back and Forward buttons.  But sure you can run more than one animation at a time.  Here's a cool demo from the Sparkle video, you can see the adjacent radio buttons animating at the same time.

  NateDunlap
 
 
  Mon, Oct 17 2005 3:33 PM
I've posted how the "page transitions" effect was created for the 3M demo at

http://www.designerslove.net/2005/10/page-transitions.html



  LightRider
  I find it kinda funny, I find it kinda sad
 
  Mon, Oct 17 2005 8:28 PM

Great demos, but I'm kind of worried that contractors can be certified by getting "training" solely by PDA, websites, etc. I think hands on training and instruction are useful in some cases.



  DCMonkey
 
 
  Tue, Oct 18 2005 5:39 PM
AdamKinney wrote:
It didn't look like a NavigationWindow to me as there was no chrome on the top with Back and Forward buttons.  But sure you can run more than one animation at a time.  Here's a cool demo from the Sparkle video, you can see the adjacent radio buttons animating at the same time.


I was under the impression that post-beta1 WBA (what exactly do we call Avalon Express now?) apps now use the existing browser chrome for navigation.

  Hypersw
 
 
  Wed, Oct 26 2005 7:56 PM

My guess is that IE6 has the back-forward chrome, and IE7 has not (as it provides interfaces for manipulating its own back/forward buttons, so no use of creating own ones). Right?