13、PersonalityAnimations

1、PopIn animation:

     这个示例很简单,就是利用 PopOutThemeAnimation 动画实现 Grid 对象的淡入效果:

// 实现动画效果的 Grid 对象
  <Grid Background="blue" Height="200" Width="200" x:Name="PopInGrid">
                    <Grid.Resources>
                        <Storyboard x:Name="PopInStoryboard">
                            <PopInThemeAnimation  Storyboard.TargetName="PopInGrid" 
                                                                  FromHorizontalOffset="500"/>
                        </Storyboard>
                        <Storyboard x:Name="PopOutStoryboard">
                            <PopOutThemeAnimation  Storyboard.TargetName="PopInGrid"/>
                        </Storyboard>
                    </Grid.Resources>
                </Grid>

xaml 页面放置量按钮,触发 Grid 显示、消失事件：

 <Button x:Name="PopOut" Content="Click to run 'Pop Out'animation" 
                    Margin="0,0,10,0" Click="PopOutClick"/>

 <Button x:Name="PopIn" Content="Click to run 'Pop In' animation"
                    Margin="0,0,10,0" Click="PopInClick"/>
            

对应的 C# 页面的按钮事件:

        private void PopInClick(object sender, RoutedEventArgs e)
        {
            PopInStoryboard.Begin();            
        }

        private void PopOutClick(object sender, RoutedEventArgs e)
        {
            PopOutStoryboard.Begin();
        }

2、Content transition animation ：

     本示例展示的是,左侧一个 ListView  控件，显示左右的数据列表，右侧一个 ScrollViewer 中放置一个 ContentControl 对象用来显示左侧列表的选中项。 在显示 详细项的时候，ContentControl 是使用从右侧滑入的效果。

        关键是给 ContentControl 的 ContentTransitions 添加:

<ContentControl.ContentTransitions>
            <TransitionCollection>
                    <ContentThemeTransition/>
             </TransitionCollection>
</ContentControl.ContentTransitions>

 页面的 xaml :

左侧列表:

  <ListView x:Name="ItemListView" Width="Auto" Height="Auto"
                              ItemTemplate="{StaticResource MessageListImageTemplate}"
                              BorderThickness="0" 
                            VerticalAlignment="Stretch" HorizontalAlignment="Left"
                       
                              ScrollViewer.VerticalScrollBarVisibility="Auto"
                              ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>

右侧详细内容: 

 <ScrollViewer VerticalScrollBarVisibility="Auto">
              
     // 绑定到上面 ItemListView 控件的选中项
           <ContentControl Content="{Binding SelectedItem, ElementName=ItemListView}"   >
                        <ContentControl.ContentTemplate>
                            <DataTemplate>
                                <StackPanel x:Name="ContentPanelDetail" HorizontalAlignment="Stretch" 
                                                      Orientation="Vertical" Margin="10,0,0,0">
                                    <StackPanel x:Name="HeaderElements"  Orientation="Horizontal">
                                        <Border x:Name="ImageBorder"  Margin="3,0,0,0" HorizontalAlignment="Left" >
                                            <Image x:Name="Image" Height="232" Width="240" Source="{Binding Image}" Stretch="UniformToFill"/>
                                        </Border>
                                        <StackPanel x:Name="HeaderStackPanel" Orientation="Vertical" VerticalAlignment="Center" Width="300" 
                                                                       HorizontalAlignment="Left" Margin="10,0,0,0">
                                            <TextBlock Text="{Binding Title}" MaxHeight="80"  TextTrimming="WordEllipsis" 
                                                             HorizontalAlignment="Left" Style="{StaticResource LargeContentFontStyle}" Margin="0" />
                                            <TextBlock Text="{Binding Subtitle}" HorizontalAlignment="Left" VerticalAlignment="Top"  
                                                             TextTrimming="WordEllipsis" Style="{StaticResource SmallContentFontStyle}" Margin="0"/>
                                        </StackPanel>
                                    </StackPanel>
                                    <StackPanel Orientation="Vertical">
                                        <TextBlock x:Name="DetailTextBlock" Width="500" Text="{Binding Content}" HorizontalAlignment="Left" 
                                                      Margin="0,18,40,0" Style="{StaticResource ReadingFontStyle}"  Height="Auto" TextWrapping="Wrap"/>
                                    </StackPanel>
                                </StackPanel>
                            </DataTemplate>
                        </ContentControl.ContentTemplate>
                        <ContentControl.ContentTransitions>
                            <TransitionCollection>
                                <ContentThemeTransition/>
                            </TransitionCollection>
                        </ContentControl.ContentTransitions>
                    </ContentControl>
    </ScrollViewer>

在相应页面的 C# 页面的 "构造函数" 中添加数据源 (数据源和文章 12、ListViewInteraction  底部的一样,都是 MessageData:

  MessageData messageData= new MessageData();
   ItemListView.ItemsSource = messageData.Collection;