[源码下载]

背水一战 Windows 10 (16) - 动画: ThemeAnimation（主题动画）

作者：webabcd

介绍
背水一战 Windows 10 之 动画

  • PopInThemeAnimation - 控件出现时的动画
  • PopOutThemeAnimation - 控件消失时的动画
  • FadeInThemeAnimation - 控件淡入的动画
  • FadeOutThemeAnimation - 控件淡出的动画
  • PointerDownThemeAnimation - 鼠标（手指）在控件上按下时的动画
  • PointerUpThemeAnimation - 鼠标（手指）在控件上抬起时的动画
  • SwipeHintThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后会做响应时）
  • SwipeBackThemeAnimation - 控件的 Swipe 动画（当你的控件在收到 Swipe 后不需要做任何响应时）
  • RepositionThemeAnimation - 控件重新定位时的动画
  • SplitOpenThemeAnimation - 打开“拆分”控件的动画
  • SplitCloseThemeAnimation - 关闭“拆分”控件的动画
  • DrillInThemeAnimation - 有层次关系的，从上级到下级的导航动画（master 到 details）
  • DrillOutThemeAnimation - 有层次关系的，从下级到上级的导航动画（details 到 master）
  • DragItemThemeAnimation, DragOverThemeAnimation, DropTargetItemThemeAnimation - 顾名思义的一些动画效果，用于集合类的控件

示例
1、演示主题动画之 PopInThemeAnimation, PopOutThemeAnimation
Animation/ThemeAnimation/PopInPopOut.xaml

<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>

Animation/ThemeAnimation/PopInPopOut.xaml.cs

/*

 * 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();

        }

    }

}

2、演示主题动画之 FadeInThemeAnimation, FadeOutThemeAnimation
Animation/ThemeAnimation/FadeInFadeOut.xaml

<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>

Animation/ThemeAnimation/FadeInFadeOut.xaml.cs

/*

 * 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();

        }

    }

}

3、演示主题动画之 PointerDownThemeAnimation, PointerUpThemeAnimation
Animation/ThemeAnimation/PointerDownPointerUp.xaml

<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>

            <!--

                调用 PointerDownThemeAnimation 的 Begin() 方法就是按下时的动画，再调用 PointerDownThemeAnimation 的 Stop() 方法就是抬起时的动画

                所以一般来说，只要使用 PointerDownThemeAnimation 的 Begin() 和 Stop() 即可，而不再需要 PointerUpThemeAnimation

            -->

            <Button Name="btnPointerDownBegin" Content="PointerDownThemeAnimation Begin Demo" Click="btnPointerDownBegin_Click" Margin="0 10 0 0" />

            <Button Name="btnPointerDownStop" Content="PointerDownThemeAnimation Stop Demo" Click="btnPointerDownStop_Click" Margin="0 10 0 0" />

        </StackPanel>

    </Grid>

</Page>

Animation/ThemeAnimation/PointerDownPointerUp.xaml.cs

/*

 * PointerDownThemeAnimation - 鼠标（手指）在控件上按下时的动画

 * PointerUpThemeAnimation - 鼠标（手指）在控件上抬起时的动画

 *

 *

 * 注：

 * 调用 PointerDownThemeAnimation 的 Begin() 方法就是按下时的动画，再调用 PointerDownThemeAnimation 的 Stop() 方法就是抬起时的动画

 * 所以一般来说，只要使用 PointerDownThemeAnimation 的 Begin() 和 Stop() 即可，而不再需要 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 btnPointerDownBegin_Click(object sender, RoutedEventArgs e)

        {

            storyboardPointerDown.Begin();

        }

        private void btnPointerDownStop_Click(object sender, RoutedEventArgs e)

        {

            storyboardPointerDown.Stop();

        }

    }

}

4、演示主题动画之 SwipeHintThemeAnimation, SwipeBackThemeAnimation
Animation/ThemeAnimation/SwipeHintSwipeBack.xaml

<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>

Animation/ThemeAnimation/SwipeHintSwipeBack.xaml.cs

/*

 * 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();

        }

    }

}

5、演示主题动画之 RepositionThemeAnimation
Animation/ThemeAnimation/Reposition.xaml

<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>

Animation/ThemeAnimation/Reposition.xaml.cs

/*

 * 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();

        }

    }

}

6、演示主题动画之 SplitOpenThemeAnimation, SplitCloseThemeAnimation
Animation/ThemeAnimation/SplitOpenSplitClose.xaml

<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>

Animation/ThemeAnimation/SplitOpenSplitClose.xaml.cs

/*

 * 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();

        }

    }

}

7、演示主题动画之 DrillInThemeAnimation, DrillOutThemeAnimation
Animation/ThemeAnimation/DrillInDrillOut.xaml

<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>

Animation/ThemeAnimation/DrillInDrillOut.xaml.cs

/*

 * 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();

        }

    }

}

8、演示主题动画之 DragItemThemeAnimation, DragOverThemeAnimation, DropTargetItemThemeAnimation
Animation/ThemeAnimation/DragItemDragOverDropTargetItem.xaml

<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>

OK
[源码下载]

背水一战 Windows 10 (16) - 动画: ThemeAnimation（主题动画）的更多相关文章

  1. 背水一战 Windows 10 (17) - 动画: ThemeTransition（过渡效果）

    [源码下载] 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果) 作者:webabcd 介绍背水一战 Windows 10 之 动画 ThemeTrans ...

  2. 背水一战 Windows 10 (15) - 动画: 缓动动画

    [源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...

  3. 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画

    [源码下载] 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 线性动画 - ColorAnimatio ...

  4. 背水一战 Windows 10 (42) - 控件（导航类）: Frame 动画

    [源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 动画 示例An ...

  5. 背水一战 Windows 10 (29) - 控件（文本类）: RichTextBlock, RichTextBlockOverflow, RichEditBox

    [源码下载] 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox 作者:webabcd ...

  6. 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null

    [源码下载] 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null 作者:webabcd 介绍背水一战 Windows 10 之 XAML ...

  7. 背水一战 Windows 10 (4) - UI: 多窗口

    [源码下载] 背水一战 Windows 10 (4) - UI: 多窗口 作者:webabcd 介绍背水一战 Windows 10 之 UI 多窗口 示例1.自定义帮助类,用于简化 Secondary ...

  8. 背水一战 Windows 10 (111) - 通知（Tile）: secondary tile 模板之图片, secondary tile 模板之分组

    [源码下载] 背水一战 Windows 10 (111) - 通知(Tile): secondary tile 模板之图片, secondary tile 模板之分组 作者:webabcd 介绍背水一 ...

  9. 背水一战 Windows 10 (78) - 自定义控件: 基础知识, 依赖属性, 附加属性

    [源码下载] 背水一战 Windows 10 (78) - 自定义控件: 基础知识, 依赖属性, 附加属性 作者:webabcd 介绍背水一战 Windows 10 之 控件(自定义控件) 自定义控件 ...

随机推荐

  1. [.net 面向对象程序设计进阶] (11) 序列化(Serialization)(三) 通过接口 IXmlSerializable 实现XML序列化 及 通用XML类

    [.net 面向对象程序设计进阶] (11) 序列化(Serialization)(三) 通过接口 IXmlSerializable 实现XML序列化 及 通用XML类 本节导读:本节主要介绍通过序列 ...

  2. JavaScript面试时候的坑洼沟洄——表达式与运算符

    上篇博客JavaScript面试时候的坑洼沟洄--数据类型总结了一下JavaScript数据类型几转换的相关知识,很多朋友可能和我一样,买了书后对数据类型啊.运算符啊.语句啊都是扫两眼或直接略过的,自 ...

  3. JS实战 · 表格行颜色间隔显示，并在鼠标指定行上高亮显示

    思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...

  4. 在互联网公司参与拍卖是一种怎样的感觉？part 1

    拍卖在中国是不太流行的一件事,为什么呢?说不太出.当初在外国火的不得了的ebay在交易时采用的就是拍卖出价的模式,但进入中国后这种方式就是玩不转,不得以后来也变成了跟淘宝一样的一口价方式. 话说现在每 ...

  5. Android开发学习之路-Android6.0运行时权限

    在Android6.0以后开始,对于部分敏感的“危险”权限,需要在应用运行时向用户申请,只有用户允许的情况下这个权限才会被授予给应用.这对于用户来说,无疑是一个提升安全性的做法.那么对于开发者,应该怎 ...

  6. SQL Server中的窗口函数

    简介     SQL Server 2012之后对窗口函数进行了极大的加强,但对于很多开发人员来说,对窗口函数却不甚了解,导致了这样强大的功能被浪费,因此本篇文章主要谈一谈SQL Server中窗口函 ...

  7. jQuery源码分析系列：Callback深入

    关于Callbacks http://www.cnblogs.com/aaronjs/p/3342344.html $.Callbacks()的内部提供了jQuery的$.ajax() 和 $.Def ...

  8. [转]PHP的执行流程,PHP扩展加载过程

    原文:http://www.imsiren.com/archives/535 为了以后能开发PHP扩展..就一定要了解PHP的执行顺序..这篇文章就是为C开发PHP扩展做铺垫. web环境 我们假设为 ...

  9. VS2015 Enterprise 安装之惊险及收获

    前言 园子早早的就有人安装了VS 2015,自己也按捺不住了,也要赶快尝尝鲜!结果在其安装过程中一个小小的问题却困扰了我一天,这其中多亏了dudu耐心的解答才得以顺利完成,如果你也遇见这个问题,看过这 ...

  10. scikit-learn 逻辑回归类库使用小结

    之前在逻辑回归原理小结这篇文章中,对逻辑回归的原理做了小结.这里接着对scikit-learn中逻辑回归类库的我的使用经验做一个总结.重点讲述调参中要注意的事项. 1. 概述 在scikit-lear ...