日期:2014-05-16 浏览次数:21087 次
新建一个项目TestTransition用来做实验。
拖动一个按钮和StackPanel进入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="添加组件" HorizontalAlignment="Left" Margin="800,0,0,0" 
                VerticalAlignment="Center" Height="100" Width="300" FontSize="48" FontFamily="Microsoft YaHei" Click="Button_Click_1"/>
        <StackPanel x:Name="spanel" HorizontalAlignment="Left" Height="426" Margin="348,112,0,0" 
                    VerticalAlignment="Top" Width="348"/>
    </Grid>
</Page>
我们先来点击这个按钮实现动态往StackPanel里面添加Button。
Button btn = new Button(); btn.Content = DateTime.Now; spanel.Children.Add(btn);但是这样的添加过程太单调了,略显突兀。
那么我们如何做改进呢?只需要做一件事即可,在StackPanel中添加ChildrenTransition。
  <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>当然,AddDeleteThemeTransition也可以换成ContentThemeTransition或者EntranceThemeTransition,
逐渐从右侧滑着出现。
但是这些是Children出现的页面,如何设置自己出现的动画效果呢?
可以在xaml文件中加入一下代码即可“
    <Page.Transitions>
        <TransitionCollection>
            <EntranceThemeTransition>
                
            </EntranceThemeTransition>
        </TransitionCollection>
    </Page.Transitions>