title: Detect a Key stroke in WinRT App
body: <p>I have a Basic Page template containing a Canvas and a few buttons. The Canvas has some animations going on. I wan to detect key strokes on this very page as well.</p>
  
  <p>I used the KeyDown event on the LayoutRoot Grid, it worked previously but as I built the app further it stopped working. I also tried using the KeyDown event in PageRoot but still doesn't work.</p>
  
  <p>I am pasting in the XAML below.</p>
  
  <pre><code>&lt;common:LayoutAwarePage
  x:Name="pageRoot"
  x:Class="Shooter.Game"
  DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
  IsTabStop="false"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Shooter"
  xmlns:common="using:Shooter.Common"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" &gt;
  
  &lt;Page.Resources&gt;
  
      &lt;!-- TODO: Delete this line if the key AppName is declared in App.xaml --&gt;
      &lt;x:String x:Key="AppName"&gt;Hits&lt;/x:String&gt;
  &lt;/Page.Resources&gt;
  
  &lt;!--
      This grid acts as a root panel for the page that defines two rows:
      * Row 0 contains the back button and page title
      * Row 1 contains the rest of the page layout
  --&gt;
  &lt;Grid Style="{StaticResource LayoutRootStyle}" Background="Navy" KeyDown="Grid_KeyDown_1" &gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="95"/&gt;
          &lt;RowDefinition Height="*"/&gt;
          &lt;RowDefinition Height="150" /&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;!-- Back button and page title --&gt;
      &lt;Grid Name="navBar"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="Auto"/&gt;
              &lt;ColumnDefinition Width="*"/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Button x:Name="backButton" Grid.Column="0" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/&gt;
          &lt;TextBlock Visibility="Collapsed" x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/&gt;
          &lt;TextBlock x:Name="hitCountTxt" Grid.Column="1" Text="Hits: 0" Style="{StaticResource PageHeaderTextStyle}" /&gt;
          &lt;TextBlock x:Name="missCountTxt" Grid.Column="1" Text="Miss: 0" Style="{StaticResource PageHeaderTextStyle}" HorizontalAlignment="Right" /&gt;
      &lt;/Grid&gt;
      &lt;Grid Grid.Row="1" Name="gameBoard"&gt;
          &lt;Canvas Name="warZone" Width="Auto" /&gt;
      &lt;/Grid&gt;
      &lt;Grid Grid.Row="2" Name="dashBoard"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="200" /&gt;
              &lt;ColumnDefinition Width="*" /&gt;
              &lt;ColumnDefinition Width="200" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Button Name="Dit" Grid.Column="0" Content="Dit" Width="200" Height="140" FontSize="40" Click="Dit_Click" /&gt;
          &lt;Button Name="Dah" Grid.Column="2" Content="Dah" Width="200" Height="140" FontSize="40" Click="Dah_Click" /&gt;
          &lt;TextBlock Name="fireCodeTxt" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Text="No shots Fired!" FontSize="60" /&gt;
      &lt;/Grid&gt;
  
      &lt;VisualStateManager.VisualStateGroups&gt;
  
          &lt;!-- Visual states reflect the application's view state --&gt;
          &lt;VisualStateGroup x:Name="ApplicationViewStates"&gt;
              &lt;VisualState x:Name="FullScreenLandscape"/&gt;
              &lt;VisualState x:Name="Filled"/&gt;
  
              &lt;!-- The entire page respects the narrower 100-pixel margin convention for portrait --&gt;
              &lt;VisualState x:Name="FullScreenPortrait"&gt;
                  &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                  &lt;/Storyboard&gt;
              &lt;/VisualState&gt;
  
              &lt;!-- The back button and title have different styles when snapped --&gt;
              &lt;VisualState x:Name="Snapped"&gt;
                  &lt;Storyboard&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"&gt;
                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/&gt;
                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                  &lt;/Storyboard&gt;
              &lt;/VisualState&gt;
          &lt;/VisualStateGroup&gt;
      &lt;/VisualStateManager.VisualStateGroups&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>