UWP:按钮内的文本框，如何防止空格键触发 Click 事件?

Question

我想把一个文本框，连同一个标签和一个符号图标放到一个按钮中，这样整个事情都是可点击的。 一开始你只能看到标签和符号。通过单击按钮，标签将被隐藏并出现文本框，您可以在其中键入一些文本。再次单击时，标签再次出现新输入的文本，文本框消失。

我的问题是，通过将焦点设置为 TextBox，按钮(父级(似乎也会成为焦点，因为每次按空格键时，按钮的 Click 事件都会触发。我不希望这种情况发生，而文本框具有焦点。

XAML

<Button Click="ToggleTopic"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<Grid>                                            
<TextBlock x:Name="textBlockInfoTopic" 
Text=""
HorizontalAlignment="Left"
Margin="100,0,100,0"/>
<TextBox x:Name="textBoxTopic" 
PlaceholderText="enter Topic..."
HorizontalAlignment="Stretch"
Margin="100,0,100,0"
Visibility="Collapsed"/>
<SymbolIcon x:Name="symbolTopicButton" 
Symbol="Add"
HorizontalAlignment="Right"/>
</Grid>
</Button>

C#

private void ToggleTopic(object sender, RoutedEventArgs e)
{
if (textBoxTopic.Visibility == Visibility.Visible)
{
//non edit mode
textBoxTopic.Visibility = Visibility.Collapsed;
textBlockInfoTopic.Visibility = Visibility.Visible;
symbolTopicButton.Symbol = Symbol.Add;
textBlockInfoTopic.Text = textBoxTopic.Text;
}
else
{
//edit mode
textBoxTopic.Visibility = Visibility.Visible;
textBoxTopic.Focus(FocusState.Programmatic);
textBlockInfoTopic.Visibility = Visibility.Collapsed;
symbolTopicButton.Symbol = Symbol.Go;
textBlockInfoTopic.Text = "";
} 
}

我只想防止通过空格键触发事件。返回键应触发事件。

谢谢你帮助我！

D.

Answer 1

来自官方文件，

如果按钮具有键盘焦点，则按Enter键或空格键也会引发 Click 事件。通常无法处理按钮上的低级别PointerPressed事件，因为它具有 Click 行为。

如果要阻止SpaceBar触发Click事件，可以重写 ButtonOnProcessKeyboardAccelerators方法，如下所示。

public class MyButton : Button
{
protected override void OnProcessKeyboardAccelerators(ProcessKeyboardAcceleratorEventArgs args)
{
if(args.Key == VirtualKey.Space)
{
args.Handled = true;
}
base.OnProcessKeyboardAccelerators(args);
}
}

用法

<local:MyButton Click="ToggleTopic"  
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<Grid IsTapEnabled="False" >
<TextBlock x:Name="textBlockInfoTopic" 
Text=""
HorizontalAlignment="Left"
Margin="100,0,100,0"/>
<TextBox x:Name="textBoxTopic" 
PlaceholderText="enter Topic..."
HorizontalAlignment="Stretch"
Margin="100,0,100,0"
Visibility="Collapsed"/>
<SymbolIcon x:Name="symbolTopicButton" 
Symbol="Add"
HorizontalAlignment="Right"/>
</Grid>
</local:MyButton>