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 Background="Transparent">

        <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>


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

            <Image Name="image" IsHitTestVisible="False"
                   HorizontalAlignment="Stretch" 
                   VerticalAlignment="Stretch" />

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


        <TextBlock Name="textKeyShadow"
                   Text="{Binding ElementName=textKey, Path=Text}"
                   Style="{StaticResource TitleTextStyle}"
                   Foreground="Black"
                   IsHitTestVisible="False"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Center"
                   Margin="2,0,0,13"
                   Opacity="0.6" />
        
        <TextBlock Name="textKey" 
                IsHitTestVisible="False"
                Style="{StaticResource TitleTextStyle}"
                VerticalAlignment="Bottom"
                HorizontalAlignment="Center"
                Margin="0,0,0,14"
                Opacity="0.8" />
        
    </Grid>
</UserControl>