[Win8]Windows8開發筆記（十二）：動畫中Transition的使用

建立一個項目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>