-
Notifications
You must be signed in to change notification settings - Fork 0
/
MainPage.xaml
194 lines (180 loc) · 13 KB
/
MainPage.xaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<phone:PhoneApplicationPage
x:Class="RightColor.MainPage"
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"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="anim_BarIn">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="10"/>
<EasingDoubleKeyFrame x:Name="Anim_TargetPoint" KeyTime="0:0:5" Value="498"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="anim_Correct">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid_Correct">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="anim_Correct_Out">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid_Correct">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" Background="Transparent" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="3"/>
<TextBlock TextWrapping="Wrap" Text="{TemplateBinding Content}" d:LayoutOverrides="Width, Height" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" Foreground="{TemplateBinding Foreground}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Screens">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5">
<VisualTransition.GeneratedEasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.2"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
<VisualTransition From="HowTo" GeneratedDuration="0:0:0.5" To="Welcome"/>
<VisualTransition From="HowTo" GeneratedDuration="0:0:0.5" To="Game"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Welcome">
<Storyboard>
<DoubleAnimation Duration="0" To="55" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="54" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Game">
<Storyboard>
<DoubleAnimation Duration="0" To="-108" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Screen_Welcome" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="HowTo">
<Storyboard>
<DoubleAnimation Duration="0" To="72" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Screen_HowTo" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Screen_Game" Margin="-14,228,-10,0" Background="{StaticResource PhoneBackgroundBrush}">
<Grid Margin="0,42,0,0">
<TextBlock x:Name="txtTimeLeft" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,135,0,0" d:LayoutOverrides="VerticalAlignment"/>
<Grid x:Name="grid" Height="138" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="What color is the text?" VerticalAlignment="Top" Margin="34,0,0,0" d:LayoutOverrides="HorizontalAlignment" Foreground="{StaticResource PhoneForegroundBrush}"/>
<Rectangle x:Name="rectangle" Fill="#FF7C7C7C" Margin="0,48,0,0" Width="10" HorizontalAlignment="Left"/>
<Rectangle Fill="#FFF5F5F4" Margin="0,53,0,5" Width="504" HorizontalAlignment="Left"/>
<TextBlock x:Name="txtColorName" TextWrapping="Wrap" Text="RED" FontSize="48" HorizontalAlignment="Center" Foreground="Black" Margin="0,59,0,15" FontWeight="Bold" d:LayoutOverrides="Height"/>
<StackPanel HorizontalAlignment="Right" Margin="0,0,29,0" Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock x:Name="txtLivesLeft" TextWrapping="Wrap" VerticalAlignment="Top" FontFamily="Webdings" FontSize="29.333" TextAlignment="Right" Margin="0,0,15,0"/>
<TextBlock TextWrapping="Wrap" Text="Score:" d:LayoutOverrides="Width" Opacity="0.7" Foreground="{StaticResource PhoneSubtleBrush}"/>
<TextBlock x:Name="txtScore" TextWrapping="Wrap" Text="0" Foreground="{StaticResource PhoneForegroundBrush}"/>
</StackPanel>
</Grid>
<Grid x:Name="grid_Correct" Margin="0,48,0,0" Opacity="0" Height="90" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment">
<Rectangle x:Name="AnswerStatusColor" Fill="#FF5AFF00"/>
<TextBlock x:Name="txtAnswerStatus" TextWrapping="Wrap" Text="CORRECT!" FontSize="48" HorizontalAlignment="Center" Foreground="Black" FontWeight="Bold" d:LayoutOverrides="Height" VerticalAlignment="Center"/>
</Grid>
<StackPanel x:Name="stackPanel2" Margin="0,165,7,0" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top">
<StackPanel>
<Button x:Name="btn4" Content="YELLOW" Margin="0,35,0,0" Width="170" BorderBrush="White" Foreground="White" Background="Black" Style="{StaticResource ButtonStyle1}" Height="60"/>
<Button x:Name="btn5" Content="GREEN" Margin="0,35,0,0" Width="170" Foreground="White" BorderBrush="White" Background="Black" Style="{StaticResource ButtonStyle1}" Height="60"/>
<Button x:Name="btn6" Content="BLACK" Margin="0,35,0,0" Width="170" Foreground="White" BorderBrush="White" Background="Black" Style="{StaticResource ButtonStyle1}" Height="60"/>
</StackPanel>
<StackPanel Margin="25,0,0,0">
<Button x:Name="btn1" Content="RED" Background="Black" Margin="0,35,0,0" Width="170" BorderBrush="White" Foreground="White" Style="{StaticResource ButtonStyle1}" Height="60"/>
<Button x:Name="btn2" Content="BLUE" Margin="0,35,0,0" Width="170" BorderBrush="White" Foreground="White" Background="Black" Style="{StaticResource ButtonStyle1}" Height="60"/>
<Button x:Name="btn3" Content="ORANGE" Margin="0,35,0,0" Width="170" BorderBrush="White" Foreground="White" Background="Black" Style="{StaticResource ButtonStyle1}" Height="60"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
<Grid x:Name="Screen_Welcome" Margin="0,228,0,0" Background="{StaticResource PhoneBackgroundBrush}" d:IsHidden="True">
<Grid.Projection>
<PlaneProjection CenterOfRotationX="1" CenterOfRotationY="1"/>
</Grid.Projection>
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<StackPanel x:Name="stackPanel" Orientation="Vertical" Margin="0,62,0,0" HorizontalAlignment="Center" d:LayoutOverrides="Height">
<Button x:Name="btnStartGame" Content="Endless challenge!" Margin="0,25,0,0"/>
<Button x:Name="btnStartTimedGame" Content="Guru Run!" Margin="0,25,0,0"/>
<Button x:Name="btnHowTo" Content="How to play?" Margin="0,25,0,0"/>
<Button x:Name="btnScoreBoard" Content="Scoreboard" Margin="0,25,0,0" Visibility="Collapsed"/>
</StackPanel>
<StackPanel x:Name="stackPanel1" Margin="20,0" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center">
<TextBlock TextWrapping="Wrap" Text="Your highest score is " d:LayoutOverrides="Width"/>
<TextBlock x:Name="txtHighestScore" TextWrapping="Wrap" Text="... ouch! Never played!"/>
</StackPanel>
</Grid>
</Grid>
<Grid x:Name="Screen_HowTo" Margin="0,228,0,0" Background="{StaticResource PhoneBackgroundBrush}" Opacity="0" IsHitTestVisible="False" d:IsHidden="True">
<StackPanel Margin="25" VerticalAlignment="Center">
<TextBlock TextWrapping="Wrap" Text="How to play?" HorizontalAlignment="Left" FontWeight="Bold" Foreground="{StaticResource PhoneForegroundBrush}"/>
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" Margin="0,15,0,0" Foreground="{StaticResource PhoneForegroundBrush}"><Run Text="This is all about "/><Run Text="matching "/><Run Text="the color of "/><Run Text="a "/><Run Text="text"/><Run Text=" with the appropriate button having the name of the color on it!"/></TextBlock>
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" Margin="0,15,0,0" Foreground="{StaticResource PhoneForegroundBrush}"><Run Text="The main text will try to trick you showing different color names but remember it is not about the content of the "/><Run Text="text. "/><Run Text="I"/><Run Text="t's about the color."/></TextBlock>
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" Text="Moreover, even buttons will try to fool you changing color and more surprises are waiting for you." Margin="0,15,0,0" Foreground="{StaticResource PhoneForegroundBrush}"/>
</StackPanel>
</Grid>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Match the right color!" VerticalAlignment="Top" Style="{StaticResource PhoneTextTitle1Style}" Margin="20,20,0,0" Foreground="{StaticResource PhoneForegroundBrush}" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->
</phone:PhoneApplicationPage>