﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="Auto" Width="Auto">
	<UserControl>
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="LayoutStates">
				<VisualState x:Name="VisualStateOne">
					<Storyboard>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemPresenterOne">
							<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
							<EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="0"/>
							<EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1"/>
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="VisualStateTwo">
					<Storyboard>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemPresenterTwo">
							<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
							<EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="0"/>
							<EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1"/>
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
		<Grid>
			<ContentPresenter x:Name="ItemPresenterOne" Opacity="0"/>
			<ContentPresenter x:Name="ItemPresenterTwo" Opacity="0"/>
			<Canvas>
				<Canvas.Resources>
					<ControlTemplate x:Key="SelectionHandle" TargetType="Thumb">
						<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
							<Ellipse x:Name="selCirlce" Fill="White" StrokeThickness="2"/>
              <Ellipse StrokeThickness="2" Stroke="{StaticResource ReaderAccentBrush}" Margin="2"/>
							<Rectangle Height="3" Width="2" Fill="{StaticResource ReaderAccentBrush}" VerticalAlignment="Top" HorizontalAlignment="Center"/>
            </Grid>
					</ControlTemplate>

					<Storyboard x:Name="selHandleFlyBackSB">
						<!-- Shrink -->
						<DoubleAnimation Storyboard.TargetName="AnimSelHandle" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" />
						<DoubleAnimation Storyboard.TargetName="AnimSelHandle" Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" />

						<!-- Flyback -->
						<DoubleAnimation x:Name="selHandleFlyLeftAnim" Duration="0:0:0.1" Storyboard.TargetName="AnimSelHandle" Storyboard.TargetProperty="(Canvas.Left)" />
						<DoubleAnimation x:Name="selHandleFlyTopAnim" Duration="0:0:0.1" Storyboard.TargetName="AnimSelHandle" Storyboard.TargetProperty="(Canvas.Top)" />

						<!-- Invisible -->
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimSelHandle" Storyboard.TargetProperty="Visibility">
							<DiscreteObjectKeyFrame KeyTime="0:0:0.2">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>

					<Storyboard x:Name="selHandleGrowSB">
						<ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimSelHandle" Storyboard.TargetProperty="Visibility">
							<DiscreteObjectKeyFrame KeyTime="0:0:0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>

				</Canvas.Resources>
				<Thumb x:Name="AnimSelHandle" Template="{StaticResource SelectionHandle}" Width="20" Height="20" RenderTransformOrigin=".5,.5" Visibility="Collapsed" >
					<Thumb.RenderTransform>
						<ScaleTransform />
					</Thumb.RenderTransform>
				</Thumb>
			</Canvas>
		</Grid>
	</UserControl>
</UserControl>
