<UserControl
	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"
    xmlns:self="clr-namespace:NumberFlickerLibrary"
   	xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    x:Name="userControl"
	mc:Ignorable="d"
	x:Class="NumberFlickerLibrary.NumberFlicker"
	d:DesignWidth="480" d:DesignHeight="800">

    <Border x:Name="LayoutRoot" Background="White" Height="110" Width="110" CornerRadius="15" >
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ButtonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.1" To="UpClick"/>
                    <VisualTransition GeneratedDuration="0:0:0.1" To="DownClick"/>
                    <VisualTransition From="UpClick" GeneratedDuration="0:0:0.1" To="UpRelease"/>
                    <VisualTransition From="DownClick" GeneratedDuration="0:0:0.1" To="DownRelease"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="UpClick">
                    <Storyboard AutoReverse="True">
                        <ColorAnimation Duration="0" To="#1802BC1F" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="upBorder" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="DownClick">
                    <Storyboard AutoReverse="False">
                        <ColorAnimation Duration="0" To="#19FF0000" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="downBorder" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="UpRelease"/>
                <VisualState x:Name="DownRelease"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid Margin="43,31,43,30" d:LayoutOverrides="Height">
            <TextBlock x:Name="numberTextBlock" TextWrapping="Wrap" Text="{Binding NumberValue, ElementName=userControl}" FontSize="64" FontFamily="Segoe WP" Margin="-30,-39,-30,-30" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" />
            <Border BorderBrush="Black" BorderThickness="1" Margin="-38,-26,-38,0" CornerRadius="15" RenderTransformOrigin="-0.077,-0.33" Height="47" VerticalAlignment="Top" Background="#4C02BC1F" x:Name="upBorder" MouseLeftButtonUp="upBorder_MouseLeftButtonUp" Width="100">
                <Custom:Interaction.Triggers>
                    <Custom:EventTrigger EventName="MouseLeftButtonDown" SourceName="upBorder">
                        <ic:GoToStateAction StateName="UpClick"/>
                    </Custom:EventTrigger>
                    <Custom:EventTrigger EventName="MouseLeftButtonUp" SourceName="upBorder">
                        <ic:GoToStateAction StateName="UpRelease"/>
                    </Custom:EventTrigger>
                    <Custom:EventTrigger EventName="MouseLeave">
                        <ic:GoToStateAction StateName="UpRelease"/>
                    </Custom:EventTrigger>
                </Custom:Interaction.Triggers>
                <Path Data="M40,34 L50,42 L60,34 L40,34" Fill="#4C1FFF00" Height="8.5" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Stroke="#4C000000" HorizontalAlignment="Center" Width="11.594" RenderTransformOrigin="0.5,0.5" Margin="0,3.3,0,0">
                    <Path.RenderTransform>
                        <CompositeTransform Rotation="180"/>
                    </Path.RenderTransform>
                </Path>
            </Border>
            <Border BorderBrush="Black" BorderThickness="1" Margin="-38,0,-38,-25" CornerRadius="15" RenderTransformOrigin="-0.077,-0.33" Height="46" VerticalAlignment="Bottom" Background="#4CFF0000" x:Name="downBorder" MouseLeftButtonUp="downBorder_MouseLeftButtonUp" Width="100" d:LayoutOverrides="VerticalAlignment, GridBox">
                <Custom:Interaction.Triggers>
                    <Custom:EventTrigger EventName="MouseLeftButtonDown" SourceName="downBorder">
                        <ic:GoToStateAction StateName="DownClick"/>
                    </Custom:EventTrigger>
                    <Custom:EventTrigger EventName="MouseLeftButtonUp" SourceName="downBorder">
                        <ic:GoToStateAction StateName="DownRelease"/>
                    </Custom:EventTrigger>
                    <Custom:EventTrigger EventName="MouseLeave">
                        <ic:GoToStateAction StateName="DownRelease"/>
                    </Custom:EventTrigger>
                </Custom:Interaction.Triggers>
                <Path Data="M40,34 L50,42 L60,34 L40,34" Fill="#4CFF0000" Height="8.5" Margin="43.121,0,43.285,3.3" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Bottom" Stroke="#4C000000" HorizontalAlignment="Center"/>
            </Border>
        </Grid>
    </Border>
</UserControl>