Windows 8 Store Apps Learning (21) Animation: Themetransition (Transition effect)

Introduced

Re-imagine the Windows 8 Store Apps Animation

Overview of the Themetransition

Entrancethemetransition-transition effect between page jumps

Contentthemetransition-Transition effects when content changes

Repositionthemetransition-Transition effect when position changes

Popupthemetransition-The transition effect when ejected

Adddeletethemetransition-transition effect when items are added or deleted

Reorderthemetransition-transition effect when reordering elements in a collection

Panethemetransition-transition effects based on the large UI sliding in and out of the edge

Edgeuithemetransition-The transition effect when sliding in and out of a smaller UI based on the edge

Example

1, the transition effect of the overview

Animation/themetransition/summary.xaml

<page x:class= "XamlDemo.Animation.ThemeTransition.Summary" xmlns= "Http://schemas.microsoft.com/winfx/2006/xam L/presentation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" using: XamlDemo.Animation.ThemeTransition "xmlns:d=" http://schemas.microsoft.com/expression/blend/2008 "xmlns:mc=" http ://schemas.openxmlformats.org/markup-compatibility/2006 "mc:ignorable=" D "> <grid Background=" Transparen T "> <stackpanel margin=" 0 0 0 "> <textblock text=" See comments in this XAML "Fontsize=" 14.667
                
                "/> <!--uielement.transitions-Specify UIElement transition animation <Rectangle> <Rectangle.Transitions> <transitioncollection&gt
                            ; <EntranceThemeTransition/> </TransitionCollection> </rectangle.
      Transitions>          </Rectangle>--> <!--panel.childrentransitions- Specifies the transition animation <WrapGrid> <wrapgrid.childrentransitions for the child elements of the Panel
                        > <TransitionCollection> <EntranceThemeTransition/>
                </TransitionCollection> </WrapGrid.ChildrenTransitions> </WrapGrid>--> <!--itemscontrol.itemcontainertransition S-Specifies the ItemsControl of the item container transition animation <ItemsControl> <itemscontrol.i Temcontainertransitions> <TransitionCollection> <entrancet Hemetransition/> </TransitionCollection> </itemscontrol.itemcontai
     Nertransitions>           </ItemsControl>--> <!--contentcontrol.contenttr Ansitions-Specifies ContentControl transition animation <ContentControl> <conten Tcontrol.contenttransitions> <TransitionCollection> <entra Ncethemetransition/> </TransitionCollection> </contentcontrol.cont 
    enttransitions> </ContentControl>--> </StackPanel> </Grid> </Page>

2. Demo Entrancethemetransition

Animation/themetransition/entrance.xaml

<page x:class= "XamlDemo.Animation.ThemeTransition.Entrance" xmlns= "Http://schemas.microsoft.com/winfx/2006/xa Ml/presentation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" using: XamlDemo.Animation.ThemeTransition "xmlns:d=" http://schemas.microsoft.com/expression/blend/2008 "xmlns:mc=" http ://schemas.openxmlformats.org/markup-compatibility/2006 "mc:ignorable=" D "> <grid Background=" Transparen T "> <stackpanel margin=" 0 0 0 "> <!--Entrancethemetra Nsition-Transitions between pages fromhorizontaloffset-the horizontal offset of the initial position Fromverticaloffset-the initial position of the  Vertical offset isstaggeringenabled-When multiple child elements are included, they need to be staggered to render them--> <frame name= "Frame" Width= "height=" horizontalalignment= "left" verticalalignment= "Top" > <frame.contenttransiti Ons> <transitioncollection> <entrancethemetransition isstaggeringenabled= "False"/> </trans itioncollection> </Frame.ContentTransitions> </Frame> <butt On Name= "btnGotoFrame1" content= "Navigate to Frame1" click= "btngotoframe1_click_1" margin= "0 0 0"/> <button Name= "BtnGotoFrame2" content= "Navigate to Frame2" click= "btngotoframe2_click_1" margin= "0 0 0"/> <items Control x:name= "ItemsControl" margin= "0 0 0" > <ItemsControl.ItemsPanel> &l T;itemspaneltemplate> <WrapGrid> <wrapgrid.childrentransit Ions> <TransitionCollection> <entrancethem
                            Etransition isstaggeringenabled= "True"/> </TransitionCollection> </wrapgrId.
                Childrentransitions> </WrapGrid> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.Items> <rectangle Widt
                    H= "height=" fill= "Red"/> <rectangle width= "height=" fill= "Green"/>
                <rectangle width= "height=" fill= "Blue"/> </ItemsControl.Items> <ItemsControl.Template> <ControlTemplate> <border Bord Erbrush= "Orange" borderthickness= "1" > <itemspresenter margin= "verticalalignment=" Cen ter "horizontalalignment=" Center "/> </Border> &LT;/CONTROLTEMPLATE&G
                T </ItemsControl.Template> </ItemsControl> </StackPanel> </gri d&Gt </Page>