WP 8.1 in Themetransition (Reorderthemetransition and Panethemetransition)

Review the animation transition effects Themetransition:

Entrancethemetransition-transition effect when jumping between pages (introduced, no longer duplicated)

Contentthemetransition-Transition effect when content changes (introduced, no longer duplicated)

Repositionthemetransition-Transition effect when position is changed (introduced, no longer duplicated)

Popupthemetransition-Transition effect when popup (appears in Popup's blog post, no longer repeats)

Adddeletethemetransition-transition effect when adding items or deleting items (described, no longer duplicates)

Reorderthemetransition-transition effect when reordering elements in a collection (This article describes)

Panethemetransition-transition effect when a large edge-based UI slides in and out (This article describes)

Edgeuithemetransition-transition effect when a small edge-based UI slides in and out (appears in the popup blog post, no longer repeats)

First reorderthemetransition-the transition effect when reordering elements in a collection

just note that ItemsControl.Items.Insert (1, rectangle) is a code that can be

Represents the insertion of the rectangle element into the ItemsControl control's Items collection, where the position is inserted from the second start, and the second position is squeezed to the third

Foreground XAML:

/span>

<page x:class= "Testunion.reorderthemetransitiondemo" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/ Presentation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" using:testunion "xmlns:d=" http: schemas.microsoft.com/expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility        /2006 "mc:ignorable=" D "background=" {ThemeResource Applicationpagebackgroundthemebrush} "> <Grid> <StackPanel> <button x:name= "Btnadd" content= "Add" click= "btnAdd_Click"/> <itemscontr                        OL x:name= "ItemsControl" > <ItemsControl.ItemsPanel> <ItemsPanelTemplate>                                <WrapGrid> <WrapGrid.ChildrenTransitions>                                <TransitionCollection> <ReorderThemeTransition/> </transitioncollectIon> </WrapGrid.ChildrenTransitions> </WrapGrid> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <itemscontrol.ite ms> <rectangle width= "height=" fill= "Red"/> <rectangle width= "30                0 "height=" fill= "Blue"/> <rectangle width= "" "height=" "fill=" Green "/>                        </ItemsControl.Items> <ItemsControl.Template> <ControlTemplate> <border borderbrush= "Coral" borderthickness= "5" > <itemspresenter Hori Zontalalignment= "Center" verticalalignment= "center"/> </Border> </co ntroltemplate> </ItemsControl.Template> </ItemsControl> </stackpanel&gt    ; </grid></pAge> 

Backstage. CS:

Using system;using system.collections.generic;using system.io;using system.linq;using System.runtime.interopservices.windowsruntime;using windows.foundation;using Windows.Foundation.Collections; Using windows.ui;using windows.ui.xaml;using windows.ui.xaml.controls;using Windows.UI.Xaml.Controls.Primitives; Using windows.ui.xaml.data;using windows.ui.xaml.input;using windows.ui.xaml.media;using windows.ui.xaml.navigation;using windows.ui.xaml.shapes;//"Blank page" item template in http://go.microsoft.com/fwlink/?    linkid=390556 on the namespace testunion{////<summary>//////for self or to navigate to a blank page inside the Frame. </summary> public sealed partial class Reorderthemetransitiondemo:page {public Reorderthemetrans Itiondemo () {this.        InitializeComponent ();        }///<summary>///This page will be called when it is displayed in Frame.        </summary>//<param name= "E" > Describes how to access event data for this page. This parameter is typically used for configuration pages. </param> protected override void OnnavigatedtO (NavigationEventArgs e) {} private void btnAdd_Click (object sender, RoutedEventArgs e) {            Rectangle Rectangle = new Rectangle ();            Random random = new random (); Rectangle.            Width = 300; Rectangle.            Height = 50; Rectangle. Fill = new SolidColorBrush (Color.FromArgb (255, (byte) random. Next (0, 255), (byte) random. Next (0, 255), (byte) random.            Next (255)));        ItemsControl.Items.Insert (1, rectangle); }    }}

Run:

The initial interface and Click the Add button once and click the Add button multiple times:

(Before and after the comparison will find the insertion from the second position)

Panethemetransition-transition effect when a large edge-based UI slides in and out of a slide

It is important to note that properties of Panethemetransition and Edgeuithemetransition edge

Edge-----Used to set the UI to slide from the side of the screen into the slide out

For example, edge= "Right" indicates that the UI will slide in from the

As for the horizontaloffset,verticaloffset,islightdismissenabled of the Popup

and how to set it up in the background panethemetransition and Edgeuithemetransition's Edge properties

you can refer to my blog about the popup control specifically: Popup controls in Windows Phone 8.1

Foreground XAML:

<page x:class= "Testunion.panethemetransitiondemo" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/ Presentation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:local=" using:testunion "xmlns:d=" http: schemas.microsoft.com/expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility        /2006 "mc:ignorable=" D "background=" {ThemeResource Applicationpagebackgroundthemebrush} "> <Grid>                <stackpanel orientation= "Vertical" > <popup x:name= "Popup" islightdismissenabled= "True" > <Popup.Child> <!--Large UI slide-in-<border borderbrush= "Coral" Backgrou Nd= "Green" borderthickness= "5" width= "height=" > <textblock text= "This is the content in popup" Font Size= "/> </Border> <!--small UI slide-out <!--<bo Rder borderbrush= "Coral" background= "Green" borderthickness= "5" width= "height=" > <textblock text= "This is the content of the popup" fontsize= "30"/&                    Gt                    </Border>--> </Popup.Child> <Popup.ChildTransitions> <TransitionCollection> <!--default Edge=right--> <!--large UI slide-out transition effect--                        > <panethemetransition edge= "left"/> <!--small UI slide-out transition effect-- <!--<edgeuithemetransition edge= "right"/>--> </transitioncollection&                Gt </Popup.ChildTransitions> </Popup> <button x:name= "Btnshowpane" content= "Show Pane" Clic k= "Btnshowpane_click"/> </StackPanel> </Grid></Page>

Backstage. CS:

Using system;using system.collections.generic;using system.io;using system.linq;using System.runtime.interopservices.windowsruntime;using windows.foundation;using Windows.Foundation.Collections; Using windows.ui.xaml;using windows.ui.xaml.controls;using windows.ui.xaml.controls.primitives;using windows.ui.xaml.data;using windows.ui.xaml.input;using windows.ui.xaml.media;using Windows.UI.Xaml.Navigation;//" Blank page "Item template in http://go.microsoft.com/fwlink/?    linkid=390556 on the namespace testunion{////<summary>//////for self or to navigate to a blank page inside the Frame. </summary> public sealed partial class Panethemetransitiondemo:page {public Panethemetransitiond Emo () {this.        InitializeComponent ();        }///<summary>///This page will be called when it is displayed in Frame.        </summary>//<param name= "E" > Describes how to access event data for this page. This parameter is typically used for configuration pages. </param> protected override void Onnavigatedto (NavigationEventArgs e) {} PRivate void Btnshowpane_click (object sender, RoutedEventArgs e) {if (!popup. IsOpen) {Popup.            IsOpen = true; }        }    }}

Run:

The initial interface and click on the button to display pane:

Or that sentence, can not see the middle transition animation effect, we still write a feeling, so the impression is deep some

Natsumi Sato におもしろい

WP 8.1 in Themetransition (Reorderthemetransition and Panethemetransition)