重新想象 Windows 8 Store Apps (21)

191145686

　　[源码下载]




重新想象 Windows 8 Store Apps (21) - 动画: ThemeTransition（过渡效果）　　
作者：webabcd

介绍
重新想象 Windows 8 Store Apps 之 动画

• ThemeTransition 的概述
  
• EntranceThemeTransition - 页面间跳转时的过渡效果
  
• ContentThemeTransition - 内容改变时的过渡效果
  
• RepositionThemeTransition - 位置改变时的过渡效果
  
• PopupThemeTransition - 弹出时的过渡效果
  
• AddDeleteThemeTransition - 添加项或删除项时的过渡效果
  
• ReorderThemeTransition - 对集合中的元素重新排序时的过渡效果
  
• PaneThemeTransition - 基于边缘的较大 UI 滑入和滑出时的过渡效果
  
• EdgeUIThemeTransition - 基于边缘的较小 UI 滑入和滑出时的过渡效果
  

　　
示例
1、过渡效果的概述
Animation/ThemeTransition/Summary.xaml

















　　
2、演示 EntranceThemeTransition
Animation/ThemeTransition/Entrance.xaml












































　　Animation/ThemeTransition/Entrance.xaml.cs



using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Entrance : Page
{
public Entrance()
{
this.InitializeComponent();
}
private void btnGotoFrame1_Click_1(object sender, RoutedEventArgs e)
{
frame.Navigate(typeof(XamlDemo.Controls.Frame.Frame1));
}
private void btnGotoFrame2_Click_1(object sender, RoutedEventArgs e)
{
frame.Navigate(typeof(XamlDemo.Controls.Frame.Frame2));
}
}
}
　　
3、演示 ContentThemeTransition
Animation/ThemeTransition/Content.xaml






































　　Animation/ThemeTransition/Content.xaml.cs



using System;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Content : Page
{
public Content()
{
this.InitializeComponent();
}
// 改变 ContentControl 的内容
private void contentControl_PointerPressed_1(object sender, PointerRoutedEventArgs e)
{
Rectangle rectangle = new Rectangle();
Random random = new Random();
rectangle.Height = 200;
rectangle.Width = 200;
rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));
contentControl.Content = rectangle;
}
// 绑定最新的数据到 ScrollViewer
private void scrollViewer_PointerPressed_1(object sender, PointerRoutedEventArgs e)
{
Random random = new Random();
scrollViewer.DataContext = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));
}
}
}
　　
4、演示 RepositionThemeTransition
Animation/ThemeTransition/Reposition.xaml


















　　Animation/ThemeTransition/Reposition.xaml.cs



using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Reposition : Page
{
public Reposition()
{
this.InitializeComponent();
}
// 改变矩形的位置
private void btnMove_Click_1(object sender, RoutedEventArgs e)
{
if (rectangle.Margin == new Thickness(0))
rectangle.Margin = new Thickness(100);
else
rectangle.Margin = new Thickness(0);
}
}
}
　　
5、演示 PopupThemeTransition
Animation/ThemeTransition/Popup.xaml























　　Animation/ThemeTransition/Popup.xaml.cs



using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Popup : Page
{
public Popup()
{
this.InitializeComponent();
}
// 显示 Popup
private void btnPopup_Click_1(object sender, RoutedEventArgs e)
{
if (!popup.IsOpen)
popup.IsOpen = true;
}
}
}
　　
6、演示 AddDeleteThemeTransition
Animation/ThemeTransition/AddDelete.xaml





































　　Animation/ThemeTransition/AddDelete.xaml.cs



using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class AddDelete : Page
{
public AddDelete()
{
this.InitializeComponent();
}
// 添加项
private void btnAddItem_Click_1(object sender, RoutedEventArgs e)
{
Rectangle rectangle = new Rectangle();
Random random = new Random();
rectangle.Height = 100;
rectangle.Width = 100;
rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));
itemsControl.Items.Add(rectangle);
}
// 删除项
private void btnDeleteItem_Click_1(object sender, RoutedEventArgs e)
{
if (itemsControl.Items.Count > 0)
itemsControl.Items.RemoveAt(itemsControl.Items.Count - 1);
}
}
}
　　
7、演示 ReorderThemeTransition
Animation/ThemeTransition/Reorder.xaml




































　　Animation/ThemeTransition/Reorder.xaml.cs



using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Reorder : Page
{
public Reorder()
{
this.InitializeComponent();
}
// 在集合的位置 2 处添加新的元素，以达到重新排序的效果
private void btnAddItem_Click_1(object sender, RoutedEventArgs e)
{
Rectangle rectangle = new Rectangle();
Random random = new Random();
rectangle.Height = 100;
rectangle.Width = 100;
rectangle.Fill = new SolidColorBrush(Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)));
itemsControl.Items.Insert(2, rectangle);
}
}
}
　　
8、演示 PaneThemeTransition
Animation/ThemeTransition/Pane.xaml























　　Animation/ThemeTransition/Pane.xaml.cs



using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class Pane : Page
{
public Pane()
{
this.InitializeComponent();
}
// 显示 Pane
private void btnShowPane_Click_1(object sender, RoutedEventArgs e)
{
if (!popup.IsOpen)
popup.IsOpen = true;
}
}
}
　　
9、演示 EdgeUIThemeTransition
Animation/ThemeTransition/EdgeUI.xaml























　　Animation/ThemeTransition/EdgeUI.xaml.cs



using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace XamlDemo.Animation.ThemeTransition
{
public sealed partial class EdgeUI : Page
{
public EdgeUI()
{
this.InitializeComponent();
}
// 显示 EdgeUI
private void btnShowEdgeUI_Click_1(object sender, RoutedEventArgs e)
{
if (!popup.IsOpen)
popup.IsOpen = true;
}
}
}
　　
OK
[源码下载]