<!--
	Copyright (c) Microsoft. All rights reserved.
-->

<UserControl x:Class="MOX.FontSizeSlider"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:vsm='using:Windows.UI.Xaml'
	xmlns:mox="using:MOX"
	IsTabStop="false"
	>
	<UserControl.Resources>
		<Style x:Key="FontSliderText" TargetType="TextBlock" BasedOn="{StaticResource MsoTextBlockSmall}">
			<Setter Property="VerticalAlignment" Value="Top" />
			<Setter Property="HorizontalAlignment" Value="Left" />
			<Setter Property="Foreground" Value="{CustomResource :mso_brush:2919}" />
		</Style>
	</UserControl.Resources>
	<Grid x:Name="LayoutRoot" Height="266" Width="266" IsHitTestVisible="false" FlowDirection="LeftToRight">
		<vsm:VisualStateManager.VisualStateGroups >
			<vsm:VisualStateGroup>
				<vsm:VisualStateGroup.Transitions>
					<vsm:VisualTransition To="HoverIndicator" GeneratedDuration="0:0:0.3">
						<Storyboard>
							<DoubleAnimation To="1" Duration="0" Storyboard.TargetName="m_imgIndicatorHover" Storyboard.TargetProperty="Opacity" />
						</Storyboard>
					</vsm:VisualTransition>
				</vsm:VisualStateGroup.Transitions>
				<vsm:VisualState x:Name="Normal" />
				<vsm:VisualState x:Name="Disabled">
					<Storyboard>
						<DoubleAnimation Duration="0:0:0.3" To="0.3" Storyboard.TargetName="m_gridControlsRoot" Storyboard.TargetProperty="Opacity" />
					</Storyboard>
				</vsm:VisualState>
				<vsm:VisualState x:Name="HoverIndicator">
					<Storyboard>
						<DoubleAnimation To="1" Duration="0" Storyboard.TargetName="m_imgIndicatorHover" Storyboard.TargetProperty="Opacity" />
					</Storyboard>
				</vsm:VisualState>
			</vsm:VisualStateGroup>
		</vsm:VisualStateManager.VisualStateGroups>
		<Image Name="imgInnerBackground" Height="215" Width="215" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="None" RenderTransformOrigin="0.5,0.5">
			<Image.Source>
				<mox:SmartImageSource SourcePath="\images\InnerBackground.png"  />
			</Image.Source>
			<Image.RenderTransform>
				<CompositeTransform />
			</Image.RenderTransform>
		</Image>
		<Grid x:Name="m_gridControlsRoot"  Height="266" Width="266" >
			<Image Name="m_imgBackground" Height="150" Width="151" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" HorizontalAlignment="Center" >
				<Image.Source>
					<mox:SmartImageSource IsHighContrastInverted="true" SourcePath="\images\FontSizeSlider.png" />
				</Image.Source>
				<Image.RenderTransform>
					<RotateTransform/>
				</Image.RenderTransform>
			</Image>
			<Image Name="m_imgIndicator" Height="49" Width="1" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="64" >
				<Image.Source>
					<mox:SmartImageSource IsHighContrastInverted="true" SourcePath="\images\FontSizeIndicator.png" />
				</Image.Source>
				<Image.RenderTransform>
					<RotateTransform Angle="180" CenterX="0" CenterY="68"/>
				</Image.RenderTransform>
			</Image>
			<Image Name="m_imgIndicatorHover" Height="49" Width="1" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="64" Opacity="0">
				<Image.Source>
					<mox:SmartImageSource IsHighContrastInverted="true" SourcePath="\images\FontSizeIndicator_hover.png" />
				</Image.Source>
				<Image.RenderTransform>
					<RotateTransform Angle="180" CenterX="0" CenterY="68"/>
				</Image.RenderTransform>
			</Image>
			<Image Name="m_imgNotch" Height="3" Width="1" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="58" >
				<Image.Source>
					<mox:SmartImageSource IsHighContrastInverted="true" SourcePath="\images\FontSizeNotch.png" />
				</Image.Source>
				<Image.RenderTransform>
					<RotateTransform Angle="180" CenterX="1" CenterY="75"/>
				</Image.RenderTransform>
			</Image>
			<TextBlock x:Name="label0" Style="{StaticResource FontSliderText}"/>
			<TextBlock x:Name="label1" Style="{StaticResource FontSliderText}"/>
			<TextBlock x:Name="label2" Style="{StaticResource FontSliderText}"/>
			<TextBlock x:Name="label3" Style="{StaticResource FontSliderText}"/>
			<TextBlock x:Name="label4" Style="{StaticResource FontSliderText}"/>
			<TextBlock x:Name="label5" Style="{StaticResource FontSliderText}"/>
			<TextBlock x:Name="label6" Style="{StaticResource FontSliderText}"/>
			<TextBlock x:Name="label7" Style="{StaticResource FontSliderText}"/>
			<TextBlock x:Name="label8" Style="{StaticResource FontSliderText}"/>
		</Grid>
	</Grid>
</UserControl>
