[Win8]Windows8开发笔记（十二）：动画中Transition的使用-优快云博客

本文介绍如何在 WPF 应用程序中使用过渡动画效果为 StackPanel 中添加的控件提供平滑的视觉体验。通过添加 ChildrenTransitions 和 Page.Transitions 属性，可以轻松实现各种预定义的过渡动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建一个项目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>