Kyle Groves and Dave Goulet: eLearning app demonstrates WPF goodness

Sign in to queue

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

Download

Download this episode

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.