<?xml version="1.0" encoding="utf-8" ?>
<base:LayoutUserControlBase
    x:Class="RodelAgent.UI.Controls.ColorfulBorder"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:base="using:Richasy.WinUI.Share.Base"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:RodelAgent.UI.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <UserControl.Resources>
        <LinearGradientBrush x:Key="ColorfulBrush" StartPoint="0,0" EndPoint="1,1">
            <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Offset="0" Color="#3D91FF" />
                    <GradientStop Offset="0.6" Color="#6CEBE2" />
                    <GradientStop Offset="1" Color="#9270FF" />
                </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </UserControl.Resources>

    <Border
        x:Name="BorderElement"
        BorderBrush="{ThemeResource ColorfulBrush}"
        BorderThickness="{x:Bind BorderThickness, Mode=OneWay}"
        CornerRadius="{x:Bind CornerRadius, Mode=OneWay}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="NormalState" />
                <VisualState x:Name="LoadingState">
                    <Storyboard>
                        <PointAnimationUsingKeyFrames
                            EnableDependentAnimation="True"
                            RepeatBehavior="Forever"
                            Storyboard.TargetName="BorderElement"
                            Storyboard.TargetProperty="(UIElement.BorderBrush).(LinearGradientBrush.StartPoint)">
                            <LinearPointKeyFrame KeyTime="0:0:.1" Value="0,0" />
                            <LinearPointKeyFrame KeyTime="0:0:1" Value="0.45,1" />
                            <LinearPointKeyFrame KeyTime="0:0:2" Value="0,0" />
                        </PointAnimationUsingKeyFrames>
                        <PointAnimationUsingKeyFrames
                            EnableDependentAnimation="True"
                            RepeatBehavior="Forever"
                            Storyboard.TargetName="BorderElement"
                            Storyboard.TargetProperty="(UIElement.BorderBrush).(LinearGradientBrush.EndPoint)">
                            <LinearPointKeyFrame KeyTime="0:0:.1" Value="1,1" />
                            <LinearPointKeyFrame KeyTime="0:0:1" Value="0,0.55" />
                            <LinearPointKeyFrame KeyTime="0:0:2" Value="1,1" />
                        </PointAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>
</base:LayoutUserControlBase>
