zoukankan      html  css  js  c++  java
  • 动画: ThemeAnimation(主题动画)

    背水一战 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>
    
                <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>
    复制代码

    Animation/ThemeAnimation/PointerDownPointerUp.xaml.cs

    复制代码
    /*
     * 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();
            }
        }
    }
    复制代码


    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>
  • 相关阅读:
    第一个独立开发的游戏 怪斯特:零 已经上线APP STORE!
    Cocos2d 利用继承Draw方法制作可显示三维数据(宠物三维等)的三角形显示面板
    java 实现 多态的 三要素
    mysql 基础语法掌握~ This is just the beginning.
    rem ~~ 你懂了吗?
    两个css之间的切换
    JavaScript高级程序设计(第3版)
    保持底部~~永远在底部
    文字要对齐!!!
    改变this不要怕!!!
  • 原文地址:https://www.cnblogs.com/ansen312/p/5913473.html
Copyright © 2011-2022 走看看