[Win8] development notes for Windows 8 (12): Use of transition in animation

Create a new project named testtransition to perform experiments.

Drag a button and stackpanel to enter mainpage:

<Page X: class = "testtransition. mainpage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Local =" using: testtransition "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable = "D"> <grid background = "{staticresource applicationpagebackgroundthemebrush}"> <button content = "add component" horizontalalignment = "Left" margin = "800,0, 100 "verticalalignment =" center "Height =" 300 "width =" "fontsize =" 48 "fontfamily =" Microsoft yahei "Click =" button_click_1 "/> <stackpanel X: name = "spanel" horizontalalignment = "Left" Height = "426" margin = "348,112, 348 "verticalalignment =" TOP "width =" "/> </GRID> </Page>

Click this button to add a button to the stackpanel dynamically.

Button btn = new Button();btn.Content = DateTime.Now;spanel.Children.Add(btn);

However, this addition process is too monotonous and abrupt.

So how can we make improvements? You only need to do one thing. Add childrentransition to stackpanel.

  <StackPanel x:Name="spanel" HorizontalAlignment="Left" Height="426" Margin="348,112,0,0"                     VerticalAlignment="Top" Width="348">            <StackPanel.ChildrenTransitions>                <TransitionCollection>                    <AddDeleteThemeTransition>                    </AddDeleteThemeTransition>                </TransitionCollection>            </StackPanel.ChildrenTransitions>        </StackPanel>

Now you can see the animation effect.

Of course, adddeletethemetransition can also be changed to contentthemetransition or entrancethemetransition,

Gradually slide from the right side.

However, these pages appear in children. How do I set the animation effect?

You can add the code to the XAML file.

    <Page.Transitions>        <TransitionCollection>            <EntranceThemeTransition>                            </EntranceThemeTransition>        </TransitionCollection>    </Page.Transitions>