wp8.1 Study8: Page transition and Theme animations (Page transition and Theme animations)_html/css_WEB-ITnose

1. There are animations (Animation) in WP8.1:

Page navigation (default is rotating Turnstile), PointerDown/up (default is tilting), page rotation, MenuFlyout Appear and wait

2. Page transition (Page transition)

1. The default animation is Turnstile.

2. In addition to the default animation, we can also use ContinuumNavigationTransitionInfo, Stagger, Slide and other similar transitions.

3. Override the default transition/animation

(1) In the control, we can do this, the XAML code is as follows:

<!--如在控件ListView中--!><ListView x:Name="groupListView"                       ItemsSource="{Binding AllGroups}"                      SelectionChanged="lstGroups_SelectionChanged"                       ItemTemplate="{StaticResource RecipeGroupDataTemplate}"                       CommonNavigationTransitionInfo.IsStaggerElement="True"/><!--如在控件TextBlock中--!><TextBlock Text="{Binding Title}"  Grid.Column="1" Grid.Row="0"                            Style="{StaticResource ListViewItemTextBlockStyle}" Margin="10,0,0,0"                           ContinuumNavigationTransitionInfo.IsExitElement="True"/>

<!--GridView--!><Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">        <Grid.ChildrenTransitions>            <TransitionCollection>                <EntranceThemeTransition/>            </TransitionCollection>        </Grid.ChildrenTransitions>        <Grid.RowDefinitions>            <RowDefinition Height="140"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>

(Note: EntranceThemeTransition can be applied when the content of the page is loaded for the first time, and then be rendered, so that the first content rendering can provide a different visual.)

(2), change the default transition screen of the page

<Page.Transitions>        <TransitionCollection>            <NavigationThemeTransition>                <NavigationThemeTransition.DefaultNavigationTransitionInfo>                    <SlideNavigationTransitionInfo />                </NavigationThemeTransition.DefaultNavigationTransitionInfo>            </NavigationThemeTransition>        </TransitionCollection>    </Page.Transitions>

3. Summary:

1. Theme transition can be applied A single XAML element with UIElement.Transitions attribute or can be applied to a transition attribute with a specific theme, such as ContentControl.ContentTransitions

2. Noteworthy transitions: AddDeleteThemeTransition, EntranceThemeTransition, PopupThemeTransition, ReorderThemeTransition, RepositionThemeTransition., etc. More