背水一戰 Windows 10 之 動畫: ThemeTransition 的概述, EntranceThemeTransition - 頁面間跳轉時的過渡效果, ContentThemeTransition - 內容改變時的過渡效果, RepositionThemeTransition - 位置改... ...
背水一戰 Windows 10 (17) - 動畫: ThemeTransition(過渡效果)
作者:webabcd
介紹
背水一戰 Windows 10 之 動畫
- ThemeTransition 的概述
- EntranceThemeTransition - 頁面間跳轉時的過渡效果
- ContentThemeTransition - 內容改變時的過渡效果
- RepositionThemeTransition - 位置改變時的過渡效果
- PopupThemeTransition - 彈出時的過渡效果
- AddDeleteThemeTransition - 添加項或刪除項時的過渡效果
- ReorderThemeTransition - 對集合中的元素重新排序時的過渡效果
- PaneThemeTransition - 基於邊緣的較大 UI 滑入和滑出時的過渡效果
- EdgeUIThemeTransition - 基於邊緣的較小 UI 滑入和滑出時的過渡
示例
1、過渡效果的概述
Animation/ThemeTransition/Summary.xaml
<Page x:Class="Windows10.Animation.ThemeTransition.Summary" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Animation.ThemeTransition" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <TextBlock Text="請參見本 xaml 中的註釋" /> <!-- UIElement.Transitions - 指定 UIElement 的過渡動畫 <Rectangle> <Rectangle.Transitions> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </Rectangle.Transitions> </Rectangle> --> <!-- Panel.ChildrenTransitions - 指定 Panel 的子元素們的過渡動畫 <WrapGrid> <WrapGrid.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </WrapGrid.ChildrenTransitions> </WrapGrid> --> <!-- ItemsControl.ItemContainerTransitions - 指定 ItemsControl 的項容器的過渡動畫 <ItemsControl> <ItemsControl.ItemContainerTransitions> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </ItemsControl.ItemContainerTransitions> </ItemsControl> --> <!-- ContentControl.ContentTransitions - 指定 ContentControl 的過渡動畫 <ContentControl> <ContentControl.ContentTransitions> <TransitionCollection> <EntranceThemeTransition/> </TransitionCollection> </ContentControl.ContentTransitions> </ContentControl> --> </StackPanel> </Grid> </Page>
2、演示 EntranceThemeTransition
Animation/ThemeTransition/Entrance.xaml
<Page x:Class="Windows10.Animation.ThemeTransition.Entrance" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Animation.ThemeTransition" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <!-- EntranceThemeTransition - 頁面間跳轉時的過渡效果 FromHorizontalOffset - 初始位置的水平偏移量 FromVerticalOffset - 初始位置的垂直偏移量 IsStaggeringEnabled - 當包含多個子元素時,是否需要錯開呈現它們 --> <Frame Name="frame" Width="400" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top"> <Frame.ContentTransitions> <TransitionCollection> <EntranceThemeTransition IsStaggeringEnabled="False" /> </TransitionCollection> </Frame.ContentTransitions> </Frame> <Button Name="btnGotoFrame1" Content="導航至 Frame1" Click="btnGotoFrame1_Click" Margin="0 10 0 0" /> <Button Name="btnGotoFrame2" Content="導航至 Frame2" Click="btnGotoFrame2_Click" Margin="0 10 0 0" /> <ItemsControl x:Name="itemsControl" Margin="0 10 0 0"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapGrid> <WrapGrid.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition IsStaggeringEnabled="True" /> </TransitionCollection> </WrapGrid.ChildrenTransitions> </WrapGrid> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.Items> <Rectangle Width="100" Height="100" Fill="Red" /> <Rectangle Width="100" Height="100" Fill="Green" /> <Rectangle Width="100" Height="100" Fill="Blue" /> </ItemsControl.Items> <ItemsControl.Template> <ControlTemplate> <Border BorderBrush="Orange" BorderThickness="1"> <ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> </ControlTemplate> </ItemsControl.Template> </ItemsControl> </StackPanel> </Grid> </Page>
Animation/ThemeTransition/Entrance.xaml.cs
using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.Animation.ThemeTransition { public sealed partial class Entrance : Page { public Entrance() { this.InitializeComponent(); } private void btnGotoFrame1_Click(object sender, RoutedEventArgs e) { frame.Navigate(typeof(Frame1)); } private void btnGotoFrame2_Click(object sender, RoutedEventArgs e) { frame.Navigate(typeof(Frame2)); } } }
Animation/ThemeTransition/Frame1.xaml
<Page x:Class="Windows10.Animation.ThemeTransition.Frame1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Animation.ThemeTransition" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <TextBlock Name="lblMsg" Text="我是 Frame1" /> </StackPanel> </Grid> </Page>
Animation/ThemeTransition/Frame2.xaml
<Page x:Class="Windows10.Animation.ThemeTransition.Frame2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Animation.ThemeTransition" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <TextBlock Name="lblMsg" Text="我是 Frame2" /> </StackPanel> </Grid> </Page>
3、演示 ContentThemeTransition
Animation/ThemeTransition/Content.xaml
<Page x:Class="Windows10.Animation.ThemeTransition.Content" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Animation.ThemeTransition" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <!-- ContentThemeTransition - 內容改變時的過渡效果 FromHorizontalOffset - 初始位置的水平偏移量 FromVerticalOffset - 初始位置的垂直偏移量 --> <ContentControl Name="contentControl" PointerPressed="contentControl_PointerPressed"> <ContentControl.ContentTransitions> <TransitionCollection> <ContentThemeTransition /> </TransitionCollection> </ContentControl.ContentTransitions> <ContentControl.Content> <Rectangle Height="200" Width="200" Fill="Orange" /> </ContentControl.Content> </ContentControl> <!-- 如果要在 ScrollViewer 或其他繼承了 ContentControl 的控制項中應用 ContentThemeTransition 的話,應該用如下方式 --> <ScrollViewer Name="scrollViewer" Margin="0 10 0 0" PointerPressed="scrollViewer_PointerPressed"> <ContentControl Content="{Binding}"> <ContentControl.ContentTemplate> <DataTemplate> <StackPanel Orientation="Vertical"> <Rectangle Height="200" Width="200" Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" /> </StackPanel> </DataTemplate> </ContentControl.ContentTemplate> <ContentControl.ContentTransitions> <TransitionCollection> <ContentThemeTransition/> </TransitionCollection> </ContentControl.ContentTransitions> </ContentControl> </ScrollViewer> </StackPanel> </Grid> </Page>
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 Windows10.Animation.ThemeTransition { public sealed partial class Content : Page { public Content() { this.InitializeComponent(); } // 改變 ContentControl 的內容 private void contentControl_PointerPressed(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(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
<Page x:Class="Windows10.Animation.ThemeTransition.Reposition" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Animation.ThemeTransition" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <Button Name="btnMove" Content="移動 rectangle" Click="btnMove_Click" Margin="0 0 0 10" /> <!-- RepositionThemeTransition - 位置改變時的過渡效果 --> <Rectangle Name="rectangle" Width="400" Height="100" Fill="Orange" HorizontalAlignment="Left"> <Rectangle.Transitions> <TransitionCollection> <RepositionThemeTransition /> </TransitionCollection> </Rectangle.Transitions> </Rectangle> </StackPanel> </Grid> </Page>
Animation/ThemeTransition/Reposition.xaml.cs
using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.Animation.ThemeTransition { public sealed partial class Reposition : Page { public Reposition() { this.InitializeComponent(); } // 改變矩形的位置 private void btnMove_Click(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
<Page x:Class="Windows10.Animation.ThemeTransition.Popup" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Animation.ThemeTransition" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <!-- PopupThemeTransition - 彈出時的過渡效果 FromHorizontalOffset - 初始位置的水平偏移量 FromVerticalOffset - 初始位置的垂直偏移量 --> <Popup Name="popup" HorizontalOffset="200" VerticalOffset="10" IsLightDismissEnabled="True"> <Popup.Child> <Border BorderBrush="Red" BorderThickness="1" Background="Blue" Width="200" Height="200"> <TextBlock Text="我是 Popup" HorizontalAlignment="Center" /> </Border> </Popup.Child> <Popup.ChildTransitions> <TransitionCollection> <PopupThemeTransition /> </TransitionCollection> </Popup.ChildTransitions> </Popup> <Button Name="btnPopup" Content="彈出 Popup" Click="btnPopup_Click" Margin="0 10 0 0" /> </StackPanel> </Grid> </Page>
Animation/ThemeTransition/Popup.xaml.cs
using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.Animation.ThemeTransition { public sealed partial class Popup : Page { public Popup() { this.InitializeComponent(); } // 顯示 Popup private void btnPopup_Click(object sender, RoutedEventArgs e) { if (!popup.IsOpen) popup.IsOpen = true; } } }
6、演示 AddDeleteThemeTransition
Animation/ThemeTransition/AddDelete.xaml
<Page x:Class="Windows10.Animation.ThemeTransition.AddDelete" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Animation.ThemeTransition" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <Button x:Name="btnAddItem" Content="Add Item" Click="btnAddItem_Click"/> <Button x:Name="btnDeleteItem" Content="Delete Item" Click="btnDeleteItem_Click" Margin="0 10 0 0" /> <!-- AddDeleteThemeTransition - 添加項或刪除項時的過渡效果 --> <ItemsControl x:Name="itemsControl" Margin="0 10 0 0"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapGrid> <WrapGrid.ChildrenTransitions> <TransitionCollection> <AddDeleteThemeTransition /> </TransitionCollection> </WrapGrid.ChildrenTransitions> </WrapGrid> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.Items> <Rectangle Width="100" Height="100" Fill="Red" /> <Rectangle Width="100" Height="100" Fill="Green" /> <Rectangle Width="100" Height="100" Fill="Blue" /> </ItemsControl.Items> <ItemsControl.Template> <ControlTemplate> <Border BorderBrush="Orange" BorderThickness="1"> <ItemsPresenter Margin="10" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> </ControlTemplate> </ItemsControl.Template> </ItemsControl> </StackPanel> </Grid> </Page>
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 Windows10.Animation.ThemeTransition { public sealed partial class AddDelete : Page { public AddDelete() { this.InitializeComponent(); } // 添加項 private void btnAddItem_Click(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(object sender, RoutedEventArgs e) { if (itemsControl.Items.Count > 0) itemsControl.Items.RemoveAt(itemsControl.Items.Count - 1); } } }
7、演示 ReorderThemeTransition
Animation/ThemeTransition/Reorder.xaml
<Page x:Class="Windows10.Animation.ThemeTransition.Reorder" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Animation.ThemeTransition" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <Button x:Name="btnAddItem" Content="Add Item" Click="btnAddItem_Click" /> <!-- ReorderThemeTransition - 對集合中的元素重新排序時的過渡效果 --> <ItemsControl x:Name="itemsControl" Margin="0 10 0 0"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapGrid> <WrapGrid.ChildrenTransitions> <TransitionCollection> <ReorderThemeTransition /> </TransitionCollection> </WrapGrid.ChildrenTransitions> </WrapGrid> </ItemsPanelTemplate> </ItemsControl.ItemsPanel<