CompositeHomeScreen

CompositeHomeScreen is a mockup of the iPhone home screen created using Windows.UI.Composition API

CompositeHomeScreen Demystified

This project mainly contains a HomeScreen page which hosts the Menu and the subsequent child pages. The main constituents of the HomeScreen page can be see in the image below.

In the layout,

• MenuGrid hosts the icons
• CompositionGrid is where the visuals are created and animated
• ContentFrame is where the Page, corresponding to the icon clicked by the user, is loaded.

Animation is triggered by two events -

• When the user clicks on any of the icons displayed in the MenuGrid
  • The MenuGrid scales up and fades out.
  • A white rectangular visual (having the same size as the icon) is created and placed in the CompositionGrid at the selected icon's location. It is then scaled up and faded in to fit the size of the MenuGrid.
  • The ContentGrid also scales up and fades in to fit the size of the MenuGrid.
  • Once the animation completes, the ContentFrame navigates to the appropriate content page. (Note: There is a flag _loadContentDuringAnimation which when set to true will navigate to the content page as soon as the animation starts. If set to false, it will navigate to the content page only after the animation batch completes)
• When the user presses the Home button (at the bottom)
  • The ContentGrid scales down and fades out.
  • The white rectangular visual also scales down and fades out.
  • The MenuGrid scales down and fades in
  • Once the animation completes, the white rectangular visual is removed from the CompositionGrid

ScopedBatchHelper

In this example, I have used the ScopedBatchHelper class of the CompositionExpressionToolkit (another project of mine). ScopedBatchHelper helps you to batch together & begin a set of animations and also define action(s) to be performed once the animation batch completes. It internally subscribes to the Completed event of the CompositionScopedBatch before beginnning the animation and once the batch completes, it performs the post-action (if defined) and unsubscribes from the Completed event.
This way, the user needs to focus on defining just the action and post actions while being spared from the trouble of subscribing (and unsubscribing) from the CompositionScopedBatch.Completed event.