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

Source: Internet
Author: User
Tags xmlns

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.