Kyle Groves and Dave Goulet: eLearning app demonstrates WPF goodness

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..."?

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?

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.

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.

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've posted how the "page transitions" effect was created for the 3M demo at

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

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.

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.

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?