drumkit-old/DrumKit/UI/DrumPlayUI.xaml

<UserControl
    x:Class="DrumKit.DrumPlayUI"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DrumKit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Name="grid" Background="Transparent"
          PointerPressed="Grid_PointerPressed">

        <VisualStateManager.VisualStateGroups>
            
            <VisualStateGroup x:Name="DrumGroups">
                
                <VisualState x:Name="DrumNormal">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="imagePressed"
                                         Storyboard.TargetProperty="Opacity"
                                         BeginTime="0:0:0.1" Duration="0:0:0.7" To="0" >
                            <DoubleAnimation.EasingFunction>
                                <SineEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>

                        <DoubleAnimation Storyboard.TargetName="image"
                                         Storyboard.TargetProperty="Opacity"
                                         Duration="0:0:0.3" To="1" >
                            <DoubleAnimation.EasingFunction>
                                <SineEase EasingMode="EaseIn" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </VisualState>
                
                <VisualState x:Name="DrumHit">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="imagePressed"
                                         Storyboard.TargetProperty="Opacity"
                                         Duration="0" To="1" />
                        <DoubleAnimation Storyboard.TargetName="image"
                                         Storyboard.TargetProperty="Opacity"
                                         Duration="0" To=".3" />
                    </Storyboard>
                </VisualState>
                
                
            </VisualStateGroup>
            
        </VisualStateManager.VisualStateGroups>
        
        <Image Name="image" IsHitTestVisible="False"
               HorizontalAlignment="Stretch" 
               VerticalAlignment="Stretch" />

        <Image Name="imagePressed" IsHitTestVisible="False"
               HorizontalAlignment="Stretch" 
               VerticalAlignment="Stretch" 
               Opacity="0" />

    </Grid>
</UserControl>