WP 8.1中ThemeTransition(ReorderThemeTransition和PaneThemeTransition)

来源：互联网发布：js map参数编辑：程序博客网时间：2024/04/23 19:05

回顾下动画过渡效果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的按钮：

还是那句话，截图看不了中间过渡动画效果，大家还是自行写一下感受下，这样印象才深一些

実に　おもしろい

0 0