How to handle Enter key press event on a Grid which is inside DataTemplate

Question

I have a GridView, and inside the DateTemplate of that GridView I have a grid and for that I want to handle the enter key event to be handled. Right now I am using Tapped event and it's working fine when clicked via mouse. I also tried using Keyup and Keydown event but none of them is firing.

Xaml Code:

  <DataTemplate x:Key="NormalTemplate" x:DataType="models:ProductLocal">
        <Grid Height="140" Width="140"  Tag="{Binding}" Tapped="TappedEvent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Text="{x:Bind Name}" VerticalAlignment="Center" HorizontalAlignment="Center" Height="50"  Margin="4" Grid.Row="0" TextWrapping="WrapWholeWords" MaxLines="2" TextTrimming="CharacterEllipsis"></TextBlock>
            <TextBlock Grid.Row="1" Margin="4" HorizontalAlignment="Center" TextWrapping="Wrap" MaxLines="2" TextTrimming="CharacterEllipsis">

                        <Run Text="{x:Bind SomeText}"></Run>
            </TextBlock>
            <customcontrols:CustomButton Grid.Row="2" Margin="4" Tag="{Binding}" Style="{StaticResource ButtonNoHoverStyle}" HorizontalContentAlignment="Right" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Tapped="EditProduct_Tapped">
                <Button.Content>
                    <Image Source="../Assets/Icons/iconEditNormal.png" Height="44" CacheMode="BitmapCache"></Image>
                </Button.Content>
            </customcontrols:CustomButton>
        </Grid>
    </DataTemplate>

Answer 1

If you need an event when mouse button is clicked try using

MouseUp="UserControl1_MouseUp" MouseDown="UserControl1_MouseDown"

according of your necessities. Tapped event is for touch displays, and key events are for handling the interaction with keyboard.

Answer 2

I have done some tries and this is my grid:

<Grid Name="test" Height="140" KeyUp="Grid_KeyUp" Background="LightBlue" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBox Text="txttest" VerticalAlignment="Center" HorizontalAlignment="Center" Height="50"  Margin="4" Grid.Row="0" IsReadOnly="True" 
                       ></TextBox>
            <TextBox Grid.Row="1" Margin="4" HorizontalAlignment="Center"  TextWrapping="Wrap" >
            </TextBox>
            <Button Grid.Row="2" Margin="4,4,0,-9"   
                    HorizontalContentAlignment="Right" 
                    VerticalAlignment="Stretch" 
                    HorizontalAlignment="Stretch" >
                <Button.Content>
                    <Image  Height="44" ></Image>
                </Button.Content>
            </Button>
        </Grid>

code behind:

private void Grid_KeyUp(object sender, KeyEventArgs e)
    {
        MessageBox.Show(e.Key.ToString());
    }

Answer 3

To have a Grid capture keyboard input, it has only one option - an control inside the Grid has focus and does not handle the input, so it bubbles up to the Grid .

The Grid itself cannot have focus, as only classes deriving from Control can be focused, and Grid is just a layout control, which doesn't have this feature.

To solve this however, you can add the KeyDown event to the GridView itself and then get use the SelectedItem to know which item was selected when the Enter button was pressed.

In XAML you set the KeyDown event on GridView :

<GridView x:Name="MyGridView" KeyDown="GridView_KeyDown">

And now in the code-behind:

private void Grid_KeyDown(object sender, KeyRoutedEventArgs e)
{
    var gridView = (GridView)sender;
    if (e.Key == Windows.System.VirtualKey.Enter)
    {
        var selectedItem = gridView.SelectedItem;
        //do something
    }
}