Detect a Key stroke in WinRT App

Question

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.

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.

I am pasting in the XAML below.

<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" >

<Page.Resources>

    <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
    <x:String x:Key="AppName">Hits</x:String>
</Page.Resources>

<!--
    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
-->
<Grid Style="{StaticResource LayoutRootStyle}" Background="Navy" KeyDown="Grid_KeyDown_1" >
    <Grid.RowDefinitions>
        <RowDefinition Height="95"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="150" />
    </Grid.RowDefinitions>

    <!-- Back button and page title -->
    <Grid Name="navBar">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="backButton" Grid.Column="0" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
        <TextBlock Visibility="Collapsed" x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
        <TextBlock x:Name="hitCountTxt" Grid.Column="1" Text="Hits: 0" Style="{StaticResource PageHeaderTextStyle}" />
        <TextBlock x:Name="missCountTxt" Grid.Column="1" Text="Miss: 0" Style="{StaticResource PageHeaderTextStyle}" HorizontalAlignment="Right" />
    </Grid>
    <Grid Grid.Row="1" Name="gameBoard">
        <Canvas Name="warZone" Width="Auto" />
    </Grid>
    <Grid Grid.Row="2" Name="dashBoard">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Button Name="Dit" Grid.Column="0" Content="Dit" Width="200" Height="140" FontSize="40" Click="Dit_Click" />
        <Button Name="Dah" Grid.Column="2" Content="Dah" Width="200" Height="140" FontSize="40" Click="Dah_Click" />
        <TextBlock Name="fireCodeTxt" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Text="No shots Fired!" FontSize="60" />
    </Grid>

    <VisualStateManager.VisualStateGroups>

        <!-- Visual states reflect the application's view state -->
        <VisualStateGroup x:Name="ApplicationViewStates">
            <VisualState x:Name="FullScreenLandscape"/>
            <VisualState x:Name="Filled"/>

            <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
            <VisualState x:Name="FullScreenPortrait">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>

            <!-- The back button and title have different styles when snapped -->
            <VisualState x:Name="Snapped">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Answer 1

You can rather subscribe the key up/down event at page construction. See the following code:

    public MyPage()
    {
        InitializeComponent();            
        KeyUp += MyPage_KeyUp;           
    }

    private void MyPage_KeyUp(object sender, KeyRoutedEventArgs e)
    {
        //Your code here
    }        

Answer 2

You can subscribe to Window.Current.CoreWindow.KeyDown/Up in NavigatedTo event and unsubscribe in NavigatedFrom. These should work. Otherwise the control that has focus will get the chance to process these events and mark them as Handled to prevent them from bubbling.