<UserControl
    x:Class="SilentPiano.Octave"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SilentPiano"
    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">
    
    <UserControl.Resources>
        <ControlTemplate x:Key="whiteKey" TargetType="local:Key">
            <Grid Width="80">
                <Polygon Points="2 0, 78 0, 78 320, 02 320">
                    <Polygon.Fill>
                        <SolidColorBrush x:Name="brush" Color="White" />
                    </Polygon.Fill>
                </Polygon>

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="brush" 
                                                              Storyboard.TargetProperty="Color">
                                    <DiscreteColorKeyFrame KeyTime="0" Value="Red" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>
        
        <ControlTemplate x:Key="blackKey" TargetType="local:Key">
            <Grid>
                <Polygon Points="0 0, 40 0, 40 220, 0 220">
                    <Polygon.Fill>
                        <SolidColorBrush x:Name="brush" Color="Black" />
                    </Polygon.Fill>
                </Polygon>

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="brush" 
                                                              Storyboard.TargetProperty="Color">
                                    <DiscreteColorKeyFrame KeyTime="0" Value="Red" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>
    </UserControl.Resources>
    
    <Grid>
        <StackPanel Orientation="Horizontal">
            <local:Key Template="{StaticResource whiteKey}" />
            <local:Key Template="{StaticResource whiteKey}" />
            <local:Key Template="{StaticResource whiteKey}" />
            <local:Key Template="{StaticResource whiteKey}" />
            <local:Key Template="{StaticResource whiteKey}" />
            <local:Key Template="{StaticResource whiteKey}" />
            <local:Key Template="{StaticResource whiteKey}" />
            <local:Key x:Name="lastKey"
                       Template="{StaticResource whiteKey}"
                       Visibility="Collapsed" />
        </StackPanel>
        <Canvas>
            <local:Key Template="{StaticResource blackKey}"
                       Canvas.Left="60" Canvas.Top="0" />
            <local:Key Template="{StaticResource blackKey}"
                       Canvas.Left="140" Canvas.Top="0" />
            <local:Key Template="{StaticResource blackKey}"
                       Canvas.Left="300" Canvas.Top="0" />
            <local:Key Template="{StaticResource blackKey}"
                       Canvas.Left="380" Canvas.Top="0" />
            <local:Key Template="{StaticResource blackKey}"
                       Canvas.Left="460" Canvas.Top="0" />
        </Canvas>
    </Grid>
</UserControl>
