Defined visual states for gamePage of WPF application

Author: szv

src/Codebreaker.WPF/Views/Pages/GamePage.xaml

@@ -14,7 +14,51 @@
         <conv:ColorNameToBrushConverter x:Key="ColorConverter" />
     </Page.Resources>
 
-    <Grid>
+    <Grid x:Name="ContentWrapper">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="Test">
+                <VisualState x:Name="Start">
+                    <Storyboard>
+                        <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="StartGameArea" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="PegSelectionArea" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="PegScrollViewer" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
+                        </ObjectAnimationUsingKeyFrames>
+                    </Storyboard>
+                </VisualState>
+                <VisualState x:Name="Playing">
+                    <Storyboard>
+                        <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="StartGameArea" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="PegSelectionArea" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="PegScrollViewer" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
+                        </ObjectAnimationUsingKeyFrames>
+                    </Storyboard>
+                </VisualState>
+                <VisualState x:Name="Finished">
+                    <Storyboard>
+                        <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="StartGameArea" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="PegSelectionArea" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
+                        </ObjectAnimationUsingKeyFrames>
+                        <ObjectAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="PegScrollViewer" Storyboard.TargetProperty="Visibility">
+                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
+                        </ObjectAnimationUsingKeyFrames>
+                    </Storyboard>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
@@ -26,7 +70,10 @@
             Panel.ZIndex="1"
             Grid.Row="0"/>
 
-        <Grid Grid.Row="1" Margin="8" Visibility="{Binding ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibilityConverter}, ConverterParameter=Start}">
+        <Grid
+            x:Name="StartGameArea"
+            Grid.Row="1"
+            Margin="8">
             <Grid.RowDefinitions>
                 <RowDefinition MinHeight="20" />
                 <RowDefinition />
@@ -54,18 +101,17 @@
         </Grid>
 
         <components:PegSelectionView
+            x:Name="PegSelectionArea"
             Grid.Row="1"
-            Visibility="{Binding ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibilityConverter}, ConverterParameter=Cancelable}"
             Margin="86,0,0,8"
             ViewModel="{Binding ViewModel, ElementName=Self, Mode=OneWay}" />
 
-        <ScrollViewer Grid.Row="2" Padding="0,0,0,15" x:Name="pegScrollViewer">
+        <ScrollViewer Grid.Row="2" Padding="0,0,0,15" x:Name="PegScrollViewer">
             <ListView
                 BorderThickness="0"
                 SelectedIndex="-1"
                 IsHitTestVisible="False"
                 HorizontalContentAlignment="Stretch"
-                Visibility="{Binding ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibilityConverter}, ConverterParameter=Running}"
                 ItemsSource="{Binding ViewModel.GameMoves, Mode=OneWay}"
                 ItemTemplate="{StaticResource PegsTemplate}" />
         </ScrollViewer>