<UserControl x:Class="MahApps.Metro.Controls.RevealImage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             x:Name="revealImage"
             d:DesignHeight="300"
             d:DesignWidth="300"
             mc:Ignorable="d">

    <UserControl.Resources>
        <Storyboard x:Key="OnMouseEnter1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="0" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OnMouseLeave1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="grid">
            <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}" />
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="grid">
            <BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}" />
        </EventTrigger>
    </UserControl.Triggers>

    <Grid x:Name="grid" MouseEnter="GridMouseEnter">
        <Image Margin="0"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"
               Source="{Binding ElementName=revealImage, Path=Image}"
               Stretch="Fill" />
        <Border x:Name="border"
                BorderBrush="White"
                BorderThickness="2"
                Opacity="0">
            <Rectangle Margin="0"
                       Stroke="Black"
                       StrokeThickness="0">
                <Rectangle.Fill>
                    <RadialGradientBrush Center="0.25,0.25" GradientOrigin="0.25,0.25" Opacity="0.615">
                        <GradientStop Offset="1" Color="Black" />
                        <GradientStop Color="#FF8D8D8D" />
                    </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Border>
        <TextBlock x:Name="textBlock"
                   Margin="5"
                   VerticalAlignment="Bottom"
                   FontFamily="Segoe WP SemiLight"
                   Foreground="White"
                   Opacity="0"
                   TextWrapping="Wrap" />
    </Grid>
</UserControl>
