碼上快樂

相關內容    簡體    繁體

背水一戰 Windows 10 (16) - 動畫: ThemeAnimation（主題動畫）

本文轉載自   查看原文   2016-06-13 13:11   1561    UWP

[源碼下載]


背水一戰 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
[源碼下載]


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 背水一戰 Windows 10 (14) - 動畫: 線性動畫, 關鍵幀動畫 背水一戰 Windows 10 (17) - 動畫: ThemeTransition（過渡效果） 背水一戰 Windows 10 (42) - 控件（導航類）: Frame 動畫 背水一戰 Windows 10 (10) - 資源: StaticResource, ThemeResource 背水一戰 Windows 10 (4) - UI: 多窗口 背水一戰 Windows 10 (80) - 本地化 背水一戰 Windows 10 (12) - 繪圖: Shape, Path 背水一戰 Windows 10 (8) - 控件 UI: StateTrigger 背水一戰 Windows 10 (5) - UI: 標題欄 背水一戰 Windows 10 (13) - 繪圖: Stroke, Brush
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM