<Page    x:Class="Windows10.Animation.ThemeAnimation.PopInPopOut"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Animation.ThemeAnimation"    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">            <StackPanel.Resources>                <!--                    注：各种 ThemeAnimation 均继承自 Timeline，但是 Timeline 的相关的控制类属性均无效，因为各种控制类属性是由对应的 ThemeAnimation 来决定的                -->                                <!--                    PopInThemeAnimation - 控件出现时的动画                        FromHorizontalOffset - 控件起始位置的水平偏移量                        FromVerticalOffset - 控件起始位置的垂直偏移量                -->                <Storyboard x:Name="storyboardPopIn">                    <PopInThemeAnimation Storyboard.TargetName="border" FromHorizontalOffset="1000" FromVerticalOffset="300" />                </Storyboard>                <!--                    PopOutThemeAnimation - 控件消失时的动画                -->                <Storyboard x:Name="storyboardPopOut">                    <PopOutThemeAnimation Storyboard.TargetName="border" />                </Storyboard>            </StackPanel.Resources>            <Border Name="border" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left">                <Border.Child>                    <TextBlock Text="我是 Border 里的内容" TextAlignment="Center" VerticalAlignment="Center" />                </Border.Child>            </Border>            <Button Name="btnPopIn" Content="PopInThemeAnimation Demo" Click="btnPopIn_Click" Margin="0 30 0 0" />            <Button Name="btnPopOut" Content="PopOutThemeAnimation Demo" Click="btnPopOut_Click" Margin="0 10 0 0" />        </StackPanel>    </Grid></Page>

/* * PopInThemeAnimation - 控件出现时的动画 * PopOutThemeAnimation - 控件消失时的动画 */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class PopInPopOut : Page    {        public PopInPopOut()        {            this.InitializeComponent();        }        private void btnPopIn_Click(object sender, RoutedEventArgs e)        {            storyboardPopIn.Begin();        }        private void btnPopOut_Click(object sender, RoutedEventArgs e)        {            storyboardPopOut.Begin();        }    }}

<Page    x:Class="Windows10.Animation.ThemeAnimation.FadeInFadeOut"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Animation.ThemeAnimation"    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">            <StackPanel.Resources>                <!--                    注：各种 ThemeAnimation 均继承自 Timeline，但是 Timeline 的相关的控制类属性均无效，因为各种控制类属性是由对应的 ThemeAnimation 来决定的                -->                                <!--                    FadeInThemeAnimation - 控件淡入的动画                -->                <Storyboard x:Name="storyboardFadeIn">                    <FadeInThemeAnimation Storyboard.TargetName="border" Duration="00:00:10" />                </Storyboard>                <!--                    FadeOutThemeAnimation - 控件淡出的动画                -->                <Storyboard x:Name="storyboardFadeOut">                    <FadeOutThemeAnimation Storyboard.TargetName="border" Duration="00:00:10" />                </Storyboard>            </StackPanel.Resources>            <Border Name="border" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left">                <Border.Child>                    <TextBlock Text="我是 Border 里的内容" TextAlignment="Center" VerticalAlignment="Center" />                </Border.Child>            </Border>            <Button Name="btnFadeIn" Content="FadeInThemeAnimation Demo" Click="btnFadeIn_Click" Margin="0 10 0 0" />            <Button Name="btnFadeOut" Content="FadeOutThemeAnimation Demo" Click="btnFadeOut_Click" Margin="0 10 0 0" />        </StackPanel>    </Grid></Page>

/* * FadeInThemeAnimation - 控件淡入的动画 * FadeOutThemeAnimation - 控件淡出的动画 */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class FadeInFadeOut : Page    {        public FadeInFadeOut()        {            this.InitializeComponent();        }        private void btnFadeIn_Click(object sender, RoutedEventArgs e)        {            storyboardFadeIn.Begin();        }        private void btnFadeOut_Click(object sender, RoutedEventArgs e)        {            storyboardFadeOut.Begin();        }    }}

<Page    x:Class="Windows10.Animation.ThemeAnimation.PointerDownPointerUp"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Animation.ThemeAnimation"    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">            <StackPanel.Resources>                <!--                    注：各种 ThemeAnimation 均继承自 Timeline，但是 Timeline 的相关的控制类属性均无效，因为各种控制类属性是由对应的 ThemeAnimation 来决定的                -->                                <!--                    PointerDownThemeAnimation - 鼠标（手指）在控件上按下时的动画                -->                <Storyboard x:Name="storyboardPointerDown">                    <PointerDownThemeAnimation Storyboard.TargetName="border" />                </Storyboard>                <!--                    PointerUpThemeAnimation - 鼠标（手指）在控件上抬起时的动画                -->                <Storyboard x:Name="storyboardPointerUp">                    <PointerUpThemeAnimation Storyboard.TargetName="border" />                </Storyboard>            </StackPanel.Resources>            <Border Name="border" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left">                <Border.Child>                    <TextBlock Text="我是 Border 里的内容" TextAlignment="Center" VerticalAlignment="Center" />                </Border.Child>            </Border>            <Button Name="btnPointerDown" Content="PointerDownThemeAnimation Demo" Click="btnPointerDown_Click" Margin="0 10 0 0" />            <Button Name="btnPointerUp" Content="PointerUpThemeAnimation Demo" Click="btnPointerUp_Click" Margin="0 10 0 0" />        </StackPanel>    </Grid></Page>

/* * PointerDownThemeAnimation - 鼠标（手指）在控件上按下时的动画 * PointerUpThemeAnimation - 鼠标（手指）在控件上抬起时的动画 */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class PointerDownPointerUp : Page    {        public PointerDownPointerUp()        {            this.InitializeComponent();        }        private void btnPointerDown_Click(object sender, RoutedEventArgs e)        {            storyboardPointerDown.Begin();        }        private void btnPointerUp_Click(object sender, RoutedEventArgs e)        {            storyboardPointerUp.Begin();        }    }}

<Page    x:Class="Windows10.Animation.ThemeAnimation.SwipeHintSwipeBack"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Animation.ThemeAnimation"    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">            <StackPanel.Resources>                <!--                    注：各种 ThemeAnimation 均继承自 Timeline，但是 Timeline 的相关的控制类属性均无效，因为各种控制类属性是由对应的 ThemeAnimation 来决定的                -->                                <!--                    SwipeHintThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后会做响应时）                        ToHorizontalOffset, ToVerticalOffset - 控件需要到达的偏移量                -->                <Storyboard x:Name="storyboardSwipeHint">                    <SwipeHintThemeAnimation Storyboard.TargetName="border" ToHorizontalOffset="100" ToVerticalOffset="100" />                </Storyboard>                <!--                    SwipeBackThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后不需要做任何响应时）                        FromHorizontalOffset, FromVerticalOffset - 控件从此偏移量返回原位                -->                <Storyboard x:Name="storyboardSwipeBack">                    <SwipeBackThemeAnimation Storyboard.TargetName="border" FromHorizontalOffset="100" FromVerticalOffset="100" />                </Storyboard>            </StackPanel.Resources>            <Border Name="border" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left">                <Border.Child>                    <TextBlock Text="我是 Border 里的内容" TextAlignment="Center" VerticalAlignment="Center" />                </Border.Child>            </Border>            <Button Name="btnSwipeHint" Content="SwipeHintThemeAnimation Demo" Click="btnSwipeHint_Click" Margin="0 10 0 0" />            <Button Name="btnSwipeBack" Content="SwipeBackThemeAnimation Demo" Click="btnSwipeBack_Click" Margin="0 10 0 0" />        </StackPanel>    </Grid></Page>

/* * SwipeHintThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后会做响应时） * SwipeBackThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后不需要做任何响应时） */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class SwipeHintSwipeBack : Page    {        public SwipeHintSwipeBack()        {            this.InitializeComponent();        }        private void btnSwipeHint_Click(object sender, RoutedEventArgs e)        {            storyboardSwipeHint.Begin();        }        private void btnSwipeBack_Click(object sender, RoutedEventArgs e)        {            storyboardSwipeBack.Begin();        }    }}

<Page    x:Class="Windows10.Animation.ThemeAnimation.Reposition"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Animation.ThemeAnimation"    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">            <StackPanel.Resources>                <!--                    注：各种 ThemeAnimation 均继承自 Timeline，但是 Timeline 的相关的控制类属性均无效，因为各种控制类属性是由对应的 ThemeAnimation 来决定的                -->                                <!--                    RepositionThemeAnimation - 控件重新定位时的动画                        FromHorizontalOffset, FromVerticalOffset - 控件从此偏移量的位置重新定位到新的位置                -->                <Storyboard x:Name="storyboardReposition">                    <RepositionThemeAnimation Storyboard.TargetName="border" FromHorizontalOffset="1000" FromVerticalOffset="300" />                </Storyboard>            </StackPanel.Resources>            <Border Name="border" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left">                <Border.Child>                    <TextBlock Text="我是 Border 里的内容" TextAlignment="Center" VerticalAlignment="Center" />                </Border.Child>            </Border>            <Button Name="btnReposition" Content="RepositionThemeAnimation Demo" Click="btnReposition_Click" Margin="0 10 0 0" />        </StackPanel>    </Grid></Page>

/* * RepositionThemeAnimation - 控件重新定位时的动画 */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class Reposition : Page    {        public Reposition()        {            this.InitializeComponent();        }        private void btnReposition_Click(object sender, RoutedEventArgs e)        {            storyboardReposition.Begin();        }    }}

<Page    x:Class="Windows10.Animation.ThemeAnimation.SplitOpenSplitClose"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Animation.ThemeAnimation"    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">            <StackPanel.Resources>                <!--                    注：各种 ThemeAnimation 均继承自 Timeline，但是 Timeline 的相关的控制类属性均无效，因为各种控制类属性是由对应的 ThemeAnimation 来决定的                -->                                <!--                    SplitOpenThemeAnimation - 打开“拆分”控件的动画                        打开 OpenedTargetName（OpenedTargetName 的内容是 ContentTargetName），关闭 ClosedTargetName                                    具体的用法参见 ComboBox 的 ControlTemplate                -->                <Storyboard x:Name="storyboardSplitOpen">                    <SplitOpenThemeAnimation                         OpenedTargetName="border"                         ContentTargetName="textBlock"                         ClosedTargetName="rectangle"                        ContentTranslationDirection="Left"                        ContentTranslationOffset="200"                          OffsetFromCenter="0"                        OpenedLength="1"                        ClosedLength="0" />                </Storyboard>                <!--                    SplitCloseThemeAnimation - 关闭“拆分”控件的动画                        关闭 OpenedTargetName（OpenedTargetName 的内容是 ContentTargetName），打开 ClosedTargetName                                    具体的用法参见 ComboBox 的 ControlTemplate                -->                <Storyboard x:Name="storyboardSplitClose">                    <SplitCloseThemeAnimation                        OpenedTargetName="border"                         ContentTargetName="textBlock"                         ClosedTargetName="rectangle"                        ContentTranslationDirection="Left"                        ContentTranslationOffset="200"                          OffsetFromCenter="0"                        OpenedLength="1"                        ClosedLength="0" />                </Storyboard>            </StackPanel.Resources>            <Rectangle Name="rectangle" Width="400" Height="100" Fill="Orange" HorizontalAlignment="Left" />            <Border Name="border" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left" />            <Button Name="btnSplitOpen" Content="SplitOpenThemeAnimation Demo" Click="btnSplitOpen_Click" Margin="0 10 0 0" />            <Button Name="btnSplitClose" Content="SplitCloseThemeAnimation Demo" Click="btnSplitClose_Click" Margin="0 10 0 0" />        </StackPanel>    </Grid></Page>

/* * SplitOpenThemeAnimation - 打开“拆分”控件的动画 * SplitCloseThemeAnimation - 关闭“拆分”控件的动画 */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class SplitOpenSplitClose : Page    {        public SplitOpenSplitClose()        {            this.InitializeComponent();        }        private void btnSplitOpen_Click(object sender, RoutedEventArgs e)        {            TextBlock textBlock = new TextBlock();            textBlock.Name = "textBlock";            textBlock.Text = "我是 Border 里的内容";            textBlock.TextAlignment = TextAlignment.Center;            textBlock.VerticalAlignment = VerticalAlignment.Center;            border.Child = textBlock;            storyboardSplitOpen.Begin();        }        private void btnSplitClose_Click(object sender, RoutedEventArgs e)        {            storyboardSplitClose.Begin();        }    }}

<Page    x:Class="Windows10.Animation.ThemeAnimation.DrillInDrillOut"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Animation.ThemeAnimation"    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">            <StackPanel.Resources>                <!--                    注：各种 ThemeAnimation 均继承自 Timeline，但是 Timeline 的相关的控制类属性均无效，因为各种控制类属性是由对应的 ThemeAnimation 来决定的                -->                <!--                    DrillInThemeAnimation - 有层次关系的，从上级到下级的导航动画（master 到 details）                        EntranceTarget, EntranceTargetName - 需要动画显示的元素（details）                        ExitTarget, ExitTargetName - 需要动画消失的元素（master）                -->                <Storyboard x:Name="storyboardDrillIn">                    <DrillInThemeAnimation EntranceTargetName="borderDetails" ExitTargetName="borderMaster" />                </Storyboard>                <!--                    DrillOutThemeAnimation - 有层次关系的，从下级到上级的导航动画（details 到 master）                        EntranceTarget, EntranceTargetName - 需要动画显示的元素（master）                        ExitTarget, ExitTargetName - 需要动画消失的元素（details）                -->                <Storyboard x:Name="storyboardDrillOut">                    <DrillOutThemeAnimation EntranceTarget="{x:Bind borderMaster}" ExitTarget="{x:Bind borderDetails}" />                </Storyboard>            </StackPanel.Resources>            <Border Name="borderMaster" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left">                <Border.Child>                    <TextBlock Text="Master" TextAlignment="Center" VerticalAlignment="Center" />                </Border.Child>            </Border>            <Border Name="borderDetails" BorderThickness="5" BorderBrush="Red" Background="Blue" CornerRadius="10" Width="400" Height="100" HorizontalAlignment="Left" Margin="10 5 0 0">                <Border.Child>                    <TextBlock Text="Details" TextAlignment="Center" VerticalAlignment="Center" />                </Border.Child>            </Border>            <Button Name="btnDrillIn" Content="DrillInThemeAnimation Demo" Click="btnDrillIn_Click" Margin="0 30 0 0" />            <Button Name="btnDrillOut" Content="DrillOutThemeAnimation Demo" Click="btnDrillOut_Click" Margin="0 10 0 0" />        </StackPanel>    </Grid></Page>

/* * DrillInThemeAnimation - 有层次关系的，从上级到下级的导航动画（master 到 details） * DrillOutThemeAnimation - 有层次关系的，从下级到上级的导航动画（details 到 master） */using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;namespace Windows10.Animation.ThemeAnimation{    public sealed partial class DrillInDrillOut : Page    {        public DrillInDrillOut()        {            this.InitializeComponent();        }        private void btnDrillIn_Click(object sender, RoutedEventArgs e)        {            storyboardDrillIn.Begin();        }        private void btnDrillOut_Click(object sender, RoutedEventArgs e)        {            storyboardDrillOut.Begin();        }    }}

<Page    x:Class="Windows10.Animation.ThemeAnimation.DragItemDragOverDropTargetItem"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:Windows10.Animation.ThemeAnimation"    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 LineHeight="22">                <Run>顾名思义的 DragItemThemeAnimation, DragOverThemeAnimation, DropTargetItemThemeAnimation</Run>                <LineBreak />                <Run>具体的用法参见 GridViewItem 或 ListViewItem 的 ControlTemplate（另外，关于 GridViewItem 或 ListViewItem 的拖动项的说明，请参见控件部分的对应的示例代码）</Run>            </TextBlock>        </StackPanel>    </Grid></Page>