WPF程序弹出页中按钮在触摸屏(电容屏)上点击事件需要点十次才能触发的问题解决方法

一、事件背景介绍

1.功能简述：

主页面是一个DataGrid列表，点击DataGrid行，弹出子页面；子页面根据数据加载多个Button按钮，如下图，就是这个页面中的按钮，在触摸屏上触摸点击，需要点击十次才能成功，使用鼠标点击一下就能成功。

 　　　　主要代码如下：

//WPF前端
<DataGrid x:Name="scanDtlGrid" ItemsSource="{Binding ScanDetail}" AutoGenerateColumns="False" 
                          SelectedItem="{Binding SelectedScanned}" CanUserAddRows="False" CanUserDeleteRows="False" 
                          CanUserSortColumns="False" IsReadOnly="True" DataGridCell.GotFocus="DataGrid_CellGotFocus">

</DataGrid>　

//单元格点击事件（聚焦Focus事件）
private void DataGrid_CellGotFocus(object sender, RoutedEventArgs e)
{
       try
       {
            var p = e.OriginalSource as System.Windows.DependencyObject;
            while (!(p == null || p is DataGridRow))
            {
                 p = VisualTreeHelper.GetParent(p);
            }
            var row = p as DataGridRow;
            if (row != null && row.GetIndex() >= 0)
            {
                 this.scanDtlGrid.SelectedItem = row.Item;
                 this.btnDefectInput.Focus();
                 if (this.btnDefectInput.Command != null && this.btnDefectInput.Command.CanExecute(null))
                 {
                      this.btnDefectInput.Command.Execute(null);
                 }
            }
       }
       catch (Exception ex)
       {
            ClientUI.Common.Messager.MessageInvoker.ShowError(ex.Message + Environment.NewLine + ex.StackTrace);
            Platform.Common.Util.TraceHelper.TraceException(ex);
       }
}

//子页面前端
<DataTemplate>
      <Grid>
           <cc:PagingListBox x:Name="itemList" Grid.Row="0" Rows="8" Columns="5" DataSource="{Binding DefectCodeItems}" ItemClickCommand="{Binding Path=DataContext.CmdSelectDefectCode,ElementName=dialog}"></cc:PagingListBox>
      </Grid>
</DataTemplate>

//PagingListBox是一个自定义的UserControl,主要代码如下
<ListBox Name="lbPageItems" SelectionMode="Single">
     <ListBox.Template>
          <ControlTemplate>
                <Border CornerRadius="1" BorderBrush="RoyalBlue" BorderThickness="0">
                      <ItemsPresenter />
                </Border>
          </ControlTemplate>
     </ListBox.Template>
     <ListBox.ItemsPanel>
          <ItemsPanelTemplate>
               <UniformGrid IsItemsHost="True" Rows="{DynamicResource rows}" Columns="{DynamicResource cols}"></UniformGrid>
          </ItemsPanelTemplate>
     </ListBox.ItemsPanel>
     <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                 <Setter Property="Template">
                      <Setter.Value>
                           <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <Button Command="{Binding ItemClickCommand,ElementName=ucRoot}" CommandParameter="{Binding}">
                                      <Button.Template>
                                           <ControlTemplate>
                                               <Border x:Name="border" CornerRadius="5" Margin="2" Background="{Binding Path=background}" BorderThickness="1" BorderBrush="Green">
                                                   <Label x:Name="txt" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Foreground="White">
                                                        <Label.Content>
                                                            <TextBlock TextWrapping="Wrap" Text="{Binding Path=ModelTitle}"></TextBlock>
                                                        </Label.Content>
                                                    </Label>
                                                </Border>
                                            <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                        <Setter TargetName="border" Property="Background" Value="Gold"/>
                                                        <Setter TargetName="border" Property="BorderBrush" Value="Gold"/>
                                            </Trigger>
                                            <DataTrigger Binding="{Binding IsModelSelected}" Value="True">
                                                        <Setter TargetName="border" Property="Background" Value="Red" />
                                                        <Setter TargetName="border" Property="BorderBrush" Value="Red"/>
                                            </DataTrigger>
                                            <Trigger Property="IsEnabled" Value="False">
                                                        <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                                                        <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                                                        <Setter Property="Foreground" TargetName="txt" Value="#FF838383"/>
                                            </Trigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                      </Button.Template>
                                 </Button>
                           </ControlTemplate>
                      </Setter.Value>
                </Setter>
           </Style>
     </ListBox.ItemContainerStyle>
</ListBox>

　　即，触摸屏中，弹出子页面中，Button的ItemClickCommand方法不能立即点击生效。

二、原因分析

  分析代码，可能的原因：

1.主页的行聚焦点击事件发生后，弹出子页面，焦点由于某种原因没有在子页面上

 　　2.子页面中层级太多，在触摸屏上解析出现某种问题，导致需要点击多次才能生效

三、解决方案

　　解决措施：不使用焦点事件 DataGridCell.GotFocus ，改用单元格点击事件，修改部分的代码如下，经测试验证，在触摸屏下也能正常点击按钮，实现功能。

//主页前端
<DataGrid x:Name="scanDtlGrid" ItemsSource="{Binding ScanDetail}" AutoGenerateColumns="False" 
                          SelectedItem="{Binding SelectedScanned}" CanUserAddRows="False" CanUserDeleteRows="False" 
                          CanUserSortColumns="False" IsReadOnly="True" >
　　 ...
    <DataGrid.RowStyle>
             <Style TargetType="{x:Type DataGridRow}">
                    <EventSetter Event="MouseLeftButtonUp" Handler="DataGridRow_MouseLeftButtonUp" />
             </Style>
     </DataGrid.RowStyle>
</DataGrid>

//点击事件
private void DataGridRow_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
     if (sender is DataGridRow row && DataContext is PCCMainMicrowaveOvenVM viewModel)
     {
            vm.SelectDefectsCommand.Execute(row.Item);
     }
}
//此处 vm.SelectDefectsCommand 即上文中的 this.btnDefectInput.Command ，调用相同的后台方法