<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
	x:Class="WPBlendSample.MainPage"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">
	<phone:PhoneApplicationPage.Resources>
		<Storyboard x:Name="StoryboardMoveRectangle" RepeatBehavior="Forever">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="movingRectangle">
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="330"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="330"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="movingRectangle">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="6"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="330"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="330"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</phone:PhoneApplicationPage.Resources>

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>
<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Transparent">
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="ChangeCheckBoxContent">
				<VisualStateGroup.Transitions>
					<VisualTransition GeneratedDuration="0" To="Play"/>
					<VisualTransition From="Pause" GeneratedDuration="0" To="Play">
						<Storyboard>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)" Storyboard.TargetName="chkTogglePlayPause">
								<DiscreteObjectKeyFrame KeyTime="0" Value="Play"/>
							</ObjectAnimationUsingKeyFrames>
						</Storyboard>
					</VisualTransition>
					<VisualTransition From="Play" GeneratedDuration="0" To="Pause">
						<Storyboard>
							<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)" Storyboard.TargetName="chkTogglePlayPause">
								<DiscreteObjectKeyFrame KeyTime="0" Value="Pause"/>
							</ObjectAnimationUsingKeyFrames>
						</Storyboard>
					</VisualTransition>
				</VisualStateGroup.Transitions>
				<VisualState x:Name="Play">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)" Storyboard.TargetName="chkTogglePlayPause">
							<DiscreteObjectKeyFrame KeyTime="0" Value="Play"/>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="Pause">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)" Storyboard.TargetName="chkTogglePlayPause">
							<DiscreteObjectKeyFrame KeyTime="0" Value="Pause"/>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!--TitlePanel contains the name of the application and page title-->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
			<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
		</StackPanel>

		<!--ContentPanel - place additional content here-->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
			<Rectangle x:Name="movingRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="12,14,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.5,0.5">
				<Rectangle.RenderTransform>
					<CompositeTransform/>
				</Rectangle.RenderTransform>
			</Rectangle>
			<CheckBox x:Name="chkTogglePlayPause" Content="Play" Margin="1,0,2,2" VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="451">
				<Custom:Interaction.Triggers>
					<Custom:EventTrigger EventName="Click">
						<im:ControlStoryboardAction Storyboard="{StaticResource StoryboardMoveRectangle}" ControlStoryboardOption="TogglePlayPause"/>
					</Custom:EventTrigger>
					<Custom:EventTrigger EventName="Checked">
						<ic:GoToStateAction StateName="Pause"/>
					</Custom:EventTrigger>
					<Custom:EventTrigger EventName="Unchecked">
						<ic:GoToStateAction StateName="Play"/>
					</Custom:EventTrigger>
				</Custom:Interaction.Triggers>
			</CheckBox>
		</Grid>
	</Grid>
</phone:PhoneApplicationPage>