<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">
    
    <Style TargetType="controls:Loading">
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:Loading">
                    <Border x:Name="RootGrid" Background="{TemplateBinding Background}"
                            Visibility="Collapsed" Opacity="0"
                            BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="LoadingIn">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames 
                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                                            Storyboard.TargetName="ContentGrid">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="40">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames 
                                            Storyboard.TargetProperty="Opacity" 
                                            Storyboard.TargetName="RootGrid">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="RootGrid"
                                            Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="LoadingOut">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames 
                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                                            Storyboard.TargetName="ContentGrid">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="40">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames 
                                            Storyboard.TargetProperty="Opacity" 
                                            Storyboard.TargetName="RootGrid">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <QuadraticEase EasingMode="EaseInOut"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="RootGrid"
                                            Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentGrid" x:DeferLoadStrategy="Lazy" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <ContentPresenter.RenderTransform>
                                <CompositeTransform></CompositeTransform>
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
</ResourceDictionary>

