Kyle Groves and Dave Goulet: eLearning app demonstrates WPF goodness

Download this episode

Download Video

Description

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.

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      jmacdonagh
      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..."?
    • User profile image
      Tyler Brown
      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?
    • User profile image
      AdamKinney

      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.

    • User profile image
      Tyler Brown
      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.
    • User profile image
      AdamKinney
      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.
    • User profile image
      NateDunlap
      I've posted how the "page transitions" effect was created for the 3M demo at

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

    • User profile image
      LightRider

      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.

    • User profile image
      DCMonkey
      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.
    • User profile image
      Hypersw

      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?

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.