<UserControl RequestedTheme="Default">
	<Grid
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:vsm="using:Windows.UI.Xaml"
		x:Name="ZoomBox"
                x:Uid="Layout">
		<Grid.Resources>
			<ResourceDictionary>
				<ResourceDictionary.ThemeDictionaries>
					<ResourceDictionary x:Key="Default">
						<!-- Default theme resources -->
						<SolidColorBrush x:Key="ReaderPageLabelBackgroundBrush" Color="#89000000"/>
						<SolidColorBrush x:Key="ReaderPageLabelStrokeBrush" Color="#FFD24726"/>
						<SolidColorBrush x:Key="ReaderPageLabelForegroundBrush" Color="#FFFFFFFF"/>
					</ResourceDictionary>
					<ResourceDictionary x:Key="HighContrast">
						<!-- High Contrast theme resources -->
						<SolidColorBrush x:Key="ReaderPageLabelBackgroundBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
						<SolidColorBrush x:Key="ReaderPageLabelStrokeBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
						<SolidColorBrush x:Key="ReaderPageLabelForegroundBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
					</ResourceDictionary>
				</ResourceDictionary.ThemeDictionaries>
			</ResourceDictionary>
			<Style x:Key="ZoomBoxStyle" TargetType="TextBox">
				<Setter Property="Template">
					<Setter.Value>
						<ControlTemplate TargetType="TextBox">
							<Grid x:Name="grid" Width="40" Height="40">
								<Ellipse x:Name="BackgroundEllipse" HorizontalAlignment="Left" Height="40" Fill="{ThemeResource ReaderPageLabelStrokeBrush}" Stroke="{ThemeResource ReaderPageLabelStrokeBrush}" StrokeThickness="2" VerticalAlignment="Top" Width="40"/>
								<Viewbox x:Name="viewbox" Width="30" Height="30" ScrollViewer.VerticalScrollBarVisibility="Disabled">
									<ScrollViewer x:Name="ContentElement" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled"
										HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0,3" MinWidth="20" MinHeight="20" FontSize="14.667" Foreground="{ThemeResource ReaderPageLabelForegroundBrush}"/>
								</Viewbox>
							</Grid>
						</ControlTemplate>
					</Setter.Value>
				</Setter>
			</Style>
		</Grid.Resources>
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="ShowHideStates">
				<VisualState x:Name="LabelShow">
					<Storyboard>
						<FadeInThemeAnimation TargetName="ZoomText" />
					</Storyboard>
				</VisualState>
				<VisualState x:Name="LabelHide">
					<Storyboard>
						<DoubleAnimation Storyboard.TargetName="ZoomText" Storyboard.TargetProperty="Opacity" BeginTime="0:0:1" To="0" Duration="0"/>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="FinalLabelShowAndHide">
					<Storyboard>
						<DoubleAnimation Storyboard.TargetName="ZoomText" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
		<TextBox x:Uid="ZoomText" x:Name="ZoomText" Style="{StaticResource ZoomBoxStyle}" IsReadOnly="True" Margin="28,20,28,0" IsTabStop="False" IsHitTestVisible="False" HorizontalAlignment="Left" VerticalAlignment="Top" />
	</Grid>
</UserControl>
