如何处理 DataTemplate 内的 Grid 上的 Enter 按键事件答案

【问题标题】：How to handle Enter key press event on a Grid which is inside DataTemplate如何处理 DataTemplate 内的 Grid 上的 Enter 按键事件
【发布时间】：2018-01-17 16:07:35
【问题描述】：

我有一个 GridView，在该 GridView 的 DateTemplate 中我有一个网格，为此我想处理要处理的输入键事件。现在我正在使用 Tapped 事件，当通过鼠标单击时它工作正常。我也尝试使用 Keyup 和 Keydown 事件，但它们都没有触发。

Xaml 代码：

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

【问题讨论】：

标签： c# xaml uwp

【解决方案1】：

如果您在单击鼠标按钮时需要一个事件，请尝试使用

MouseUp="UserControl1_MouseUp" MouseDown="UserControl1_MouseDown"

根据您的需要。 Tapped 事件用于触摸屏，key 事件用于处理与键盘的交互。

【讨论】：

我想实现与 Enter 键的 Tapped 事件类似的功能。那么有什么方法可以将 Enter press 与 Tapped 事件绑定？
我尝试使用普通按钮，它适用于 KeyUp 事件。也许问题出在您的 customcontrols:CustomButton.
我想为整个 Grid 实现它，而不仅仅是其中的 b 按钮。
好吧，我想明白了。尝试从网格中删除文本块并放置文本框，然后将它们设置为 IsReadOnly 如果您希望它们不可编辑。所以你可以使用 KeyUp 和 KeyDown 事件。

【解决方案2】：

我做了一些尝试，这是我的网格：

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

后面的代码：

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

【讨论】：

【解决方案3】：

要让Grid 捕获键盘输入，它只有一个选项 - Grid 内的控件具有焦点但不处理输入，因此它会冒泡到 Grid。

Grid 本身不能有焦点，因为只有派生自Control 的类才能获得焦点，而Grid 只是一个布局控件，没有这个功能。

然而，要解决这个问题，您可以将KeyDown 事件添加到GridView 本身，然后使用SelectedItem 了解按下Enter 按钮时选择了哪个项目。

在 XAML 中，您在 GridView 上设置 KeyDown 事件：

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

现在在代码隐藏中：

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

【讨论】：