回顾下动画过渡效果ThemeTransition有哪些:
EntranceThemeTransition - 页面间跳转时的过渡效果(已介绍,不再重复了)
ContentThemeTransition - 内容改变时的过渡效果(已介绍,不再重复了)
RepositionThemeTransition - 位置改变时的过渡效果(已介绍,不再重复了)
PopupThemeTransition - 弹出时的过渡效果(在Popup那一篇博客中出现过,不再重复了)
AddDeleteThemeTransition - 添加项或删除项时的过渡效果(已介绍,不再重复了)
ReorderThemeTransition - 对集合中的元素重新排序时的过渡效果(本篇介绍)
PaneThemeTransition - 基于边缘的较大 UI 滑入和滑出时的过渡效果(本篇介绍)
EdgeUIThemeTransition - 基于边缘的较小 UI 滑入和滑出时的过渡效果(在Popup那一篇博客中出现过,不再重复了)
先是ReorderThemeTransition - 对集合中的元素重新排序时的过渡效果
贴代码之前只要注意itemsControl.Items.Insert(1, rectangle)这句代码即可
表示向ItemsControl控件Items集合中插入Rectangle元素,而位置是从第二个开始插入,原来第二个位置的挤到第三
XAML:
<Page
x:Class="TestUnion.ReorderThemeTransitionDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestUnion"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<StackPanel>
<Button x:Name="btnAdd" Content="添加" Click="btnAdd_Click" />
<ItemsControl x:Name="itemsControl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid>
<WrapGrid.ChildrenTransitions>
<TransitionCollection>
<ReorderThemeTransition/>
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Items>
<Rectangle Width="300" Height="50" Fill="Red"/>
<Rectangle Width="300" Height="50" Fill="Blue"/>
<Rectangle Width="300" Height="50" Fill="Green"/>
</ItemsControl.Items>
<ItemsControl.Template>
<ControlTemplate>
<Border BorderBrush="Coral" BorderThickness="5">
<ItemsPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</StackPanel>
</Grid>
</Page>
.cs:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Shapes;
// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍
namespace TestUnion
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class ReorderThemeTransitionDemo : Page
{
public ReorderThemeTransitionDemo()
{
this.InitializeComponent();
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
Rectangle rectangle = new Rectangle();
Random random = new Random();
rectangle.Width = 300;
rectangle.Height = 50;
rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(255)));
itemsControl.Items.Insert(1, rectangle);
}
}
}
运行截图:
初始界面以及点击一次添加按钮,点击多次添加按钮:
(前后对比会发现从第二个位置开始插入的)
再是PaneThemeTransition - 基于边缘的较大 UI 滑入和滑出时的过渡效果
需要注意的是PaneThemeTransition和EdgeUIThemeTransition的属性Edge
Edge ----- 用来设置UI从屏幕那一边滑入滑出
例如Edge="right",则说明UI会从屏幕右侧滑入
至于Popup的HorizontalOffset,VerticalOffset,IsLightDismissEnabled
以及如何在后台设置PaneThemeTransition和EdgeUIThemeTransition的Edge属性
可以参照我的专门关于Popup控件的那篇篇博客:Windows Phone 8.1中的Popup控件
XAML:
<Page
x:Class="TestUnion.PaneThemeTransitionDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestUnion"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<StackPanel Orientation="Vertical">
<Popup x:Name="popup" IsLightDismissEnabled="True">
<Popup.Child>
<!--大UI滑入滑出-->
<Border BorderBrush="Coral" Background="Green" BorderThickness="5" Width="400" Height="500">
<TextBlock Text="这是Popup里面的内容" FontSize="30"/>
</Border>
<!--小UI滑入滑出-->
<!--<Border BorderBrush="Coral" Background="Green" BorderThickness="5" Width="350" Height="100">
<TextBlock Text="这是Popup里面的内容" FontSize="30"/>
</Border>-->
</Popup.Child>
<Popup.ChildTransitions>
<TransitionCollection>
<!--默认Edge=right-->
<!--大UI滑入滑出过渡效果-->
<PaneThemeTransition Edge="Left" />
<!--小UI滑入滑出过渡效果-->
<!--<EdgeUIThemeTransition Edge="Right" />-->
</TransitionCollection>
</Popup.ChildTransitions>
</Popup>
<Button x:Name="btnShowPane" Content="显示Pane" Click="btnShowPane_Click"/>
</StackPanel>
</Grid>
</Page>
.cs:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍
namespace TestUnion
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class PaneThemeTransitionDemo : Page
{
public PaneThemeTransitionDemo()
{
this.InitializeComponent();
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。
/// 此参数通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void btnShowPane_Click(object sender, RoutedEventArgs e)
{
if(!popup.IsOpen)
{
popup.IsOpen = true;
}
}
}
}
运行截图:
初始界面和点击显示Pane的按钮:
还是那句话,截图看不了中间过渡动画效果,大家还是自行写一下感受下,这样印象才深一些
実に おもしろい