Animation: Tạo Anomation Hiệu ứng FadeOutThemeAnimation FadeInThemeAnimation trên Windows Store Apps (C #)

BlankPage4.xaml

Windows Store 2017

<Page
    x:Class="Theory1.BlankPage4"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Theory1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard x:Name="story1">
            <FadeInThemeAnimation TargetName="MyRectangle"  SpeedRatio="2000"></FadeInThemeAnimation>
            <!--<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:3"></DoubleAnimation>-->
        </Storyboard>
        <Storyboard x:Name="story2">
            <FadeOutThemeAnimation TargetName="MyRectangle" Duration="2000"></FadeOutThemeAnimation>
        </Storyboard>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="btnFadeIn" Content="Fade In" HorizontalAlignment="Left" Margin="398,131,0,0" VerticalAlignment="Top" Click="btnFadeIn_Click"/>
        <Button x:Name="btnFadeOut" Content="Fade Out" HorizontalAlignment="Left" Margin="257,131,0,0" VerticalAlignment="Top" Click="btnFadeOut_Click" d:LayoutOverrides="HorizontalAlignment"/>
        <Rectangle x:Name="MyRectangle" Fill="#FF058491" HorizontalAlignment="Left" Height="287" Margin="160,235,0,0" Stroke="Black" VerticalAlignment="Top" Width="457" d:LayoutOverrides="HorizontalAlignment"/>

    </Grid>
</Page>

BlankPage4.xaml.cs

Windows Store 2017

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace Theory1
{

    public sealed partial class BlankPage4 : Page
    {
        public BlankPage4()
        {
            this.InitializeComponent();
        }

        private void btnFadeOut_Click(object sender, RoutedEventArgs e)
        {
            story2.Begin();
        }

        private void btnFadeIn_Click(object sender, RoutedEventArgs e)
        {
            story1.Begin();
        }
    }
}

RUN DEMO