日期:2014-05-16 浏览次数:20931 次
新建一个项目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>