KeyDown 事件需要多次按下

Question

我试图在按键盘上的左右键后更改 WPF 页面的某些元素。它工作得很好，我的问题是每次我想要更改某些内容时，我都需要按向右或向左键 3 次。另外，我不知道它是否相关，但第一次按下该键后会出现一个奇怪的矩形，但如果我再次按下它，它就会消失。

XAML代码

<Page x:Class="PokemonGroveGreen.Bag"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:PokemonGroveGreen"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Bag">

    <Viewbox x:Name="mainViewbox" Stretch="Fill" StretchDirection="Both" Focusable="True" KeyDown="Viewbox_KeyDown">
        <Grid>
            <!-- Background -->
            <Image Source="/Images/bagBackground.png"></Image>
            
            <!-- Pocket symbols -->
            <Grid Height="43" Width="338" Margin="25,348,621,347">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <!-- Items -->
                <Border Grid.Column="0" BorderBrush="Red" BorderThickness="0"/>
                
                <!-- Medicine -->
                <Border Grid.Column="1" BorderBrush="Red" BorderThickness="0"/>

                <!-- Poké Balls -->
                <Border Grid.Column="2" BorderBrush="Red" BorderThickness="0"/>

                <!-- TMs & HMs -->
                <Border Grid.Column="3" BorderBrush="Red" BorderThickness="0"/>
    
                <!-- Berries -->
                <Border Grid.Column="4" BorderBrush="Red" BorderThickness="0"/>

                <!-- Treasures -->
                <Border Grid.Column="5" BorderBrush="Red" BorderThickness="0"/>
                
                <!-- Battle Items -->
                <Border Grid.Column="6" BorderBrush="Red" BorderThickness="0"/>
                
                <!-- Key Items -->
                <Border Grid.Column="7" BorderBrush="Red" BorderThickness="0"/>
            </Grid>
            
            <!-- Pocket text -->
            <TextBlock x:Name="pocketBlock" Text="Items" Height="50" Width="350" FontSize="40" TextAlignment="Center" Margin="18,413,616,275"></TextBlock>
        </Grid>
    </Viewbox>
</Page>

XAML.CS

namespace PokemonGroveGreen
{
    /// <summary>
    /// Lógica de interacción para Bag.xaml
    /// </summary>
    public partial class Bag : Page
    {
        Trainer trainer;

        public Bag(Trainer trainer)
        {
            InitializeComponent();
            mainViewbox.Focus();

            this.trainer = trainer;
        }

        private void Viewbox_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Right)
            {
                pocketBlock.Text = "DERECHA";
            }
            else if (e.Key == Key.Left)
            {
                pocketBlock.Text = "IZQUIERDA";
            }
        }
    }
}

矩形截图

我尝试将事件更改为页面、网格和视图框。我还尝试使用 KeyDown 事件和 PreviewKeyDown 事件。两者的工作方式相同。

Answer 1

坦率地出现的框是焦点框。简而言之，当某个 UI 组件通过 FocusManager 获得焦点时，它会出现在该组件周围，要禁用它，您只需将该特定元素的 FocusVisualStyle 设置为 {x:NULL} 即可。

注意：我不确定你的哪个元素正在获得焦点，但我假设它是最后一个网格，所以你的代码将变成这样：

<Grid Height="43" Width="338" Margin="25,348,621,347" FocusVisualStyle={x:NULL}>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <!-- Items -->
            <Border Grid.Column="0" BorderBrush="Red" BorderThickness="0"/>
            
            <!-- Medicine -->
            <Border Grid.Column="1" BorderBrush="Red" BorderThickness="0"/>

            <!-- Poké Balls -->
            <Border Grid.Column="2" BorderBrush="Red" BorderThickness="0"/>

            <!-- TMs & HMs -->
            <Border Grid.Column="3" BorderBrush="Red" BorderThickness="0"/>

            <!-- Berries -->
            <Border Grid.Column="4" BorderBrush="Red" BorderThickness="0"/>

            <!-- Treasures -->
            <Border Grid.Column="5" BorderBrush="Red" BorderThickness="0"/>
            
            <!-- Battle Items -->
            <Border Grid.Column="6" BorderBrush="Red" BorderThickness="0"/>
            
            <!-- Key Items -->
            <Border Grid.Column="7" BorderBrush="Red" BorderThickness="0"/>
        </Grid>