有没有办法使用 WPF 的箭头键移动图片？答案

【问题标题】：Is there a way to move a picture using arrow keys for WPF?有没有办法使用 WPF 的箭头键移动图片？
【发布时间】：2019-12-12 21:03:06
【问题描述】：

我是 WPF 的新手，我正在尝试使用 2D Sprite gif 文件制作一个 RPG，用于制作前进、后退等动画。

我在使用箭头键使原始图片向任意方向移动时遇到问题。这是代码的sn-p：

<UserControl x:Class="TextofTheWild2._0.Screen1" 
             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:gif="https://github.com/XamlAnimatedGif/XamlAnimatedGif"

             xmlns:local="clr-namespace:TextofTheWild2._0"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             FocusManager.FocusedElement = "{Binding ElementName=MyCanvas}">

    <Canvas x:Name="MyCanvas"  HorizontalAlignment="Right" Height="450" VerticalAlignment="Top" Width="800" Background="#FFFCD8A8" KeyDown="Canvas_OnKeyDown" Focusable="True" FocusManager.FocusedElement="{Binding RelativeSource={RelativeSource Self}}">
        <Grid HorizontalAlignment="Left" Height="190" VerticalAlignment="Top" Width="410" Background="#FF00A800" Canvas.Left="390"/>
        <TextBlock Height="40" Canvas.Left="149" TextWrapping="Wrap" Text="Press E to activate" Canvas.Top="40" Width="52" FontFamily="Microsoft Sans Serif" Visibility="Collapsed"/>
        <Grid HorizontalAlignment="Left" Height="190" VerticalAlignment="Top" Width="27" Background="#FF00A800"/>
        <Grid HorizontalAlignment="Left" Height="26" VerticalAlignment="Top" Width="85" Background="Black" Canvas.Left="27" Canvas.Top="35"/>
        <Grid HorizontalAlignment="Left" Height="35" VerticalAlignment="Top" Width="112" Background="#FF00A800"/>
        <Grid HorizontalAlignment="Left" Height="181" VerticalAlignment="Top" Width="27" Background="#FF00A800" Canvas.Top="269"/>
        <Grid HorizontalAlignment="Left" Height="181" VerticalAlignment="Top" Width="22" Background="#FF00A800" Canvas.Left="778" Canvas.Top="269"/>
        <Grid HorizontalAlignment="Left" Height="80" VerticalAlignment="Top" Width="800" Background="#FF00A800" Canvas.Top="370"/>
        <Image Name="Green_Link" Height="93"  VerticalAlignment="Top" Canvas.Left="480" Canvas.Top="259" Width="85" gif:AnimationBehavior.SourceUri="Assets/Green Link idle.gif" Source="Assets/Green Link idle.gif" Focusable="True"/>
        <Image Name="Blue_Link" Height="93"  VerticalAlignment="Top" Canvas.Left="390" Canvas.Top="259" Width="85" gif:AnimationBehavior.SourceUri="Assets/Blue Link idle.gif" Source="Assets/Blue Link idle.gif"/>
        <Image Name="Red_Link" Height="93"  VerticalAlignment="Top" Canvas.Left="305" Canvas.Top="259" Width="85" gif:AnimationBehavior.SourceUri="Assets/Red Link Idle.gif" Source="Assets/Red Link Idle.gif"/>
        <Image Name="Purple_Link" Height="93"  VerticalAlignment="Top" Canvas.Left="220" Canvas.Top="259" Width="85" gif:AnimationBehavior.SourceUri="Assets/Purple Link idle.gif" Source="Assets/Purple Link idle.gif"/>



    </Canvas>
</UserControl>

对于 XAML，以及它背后的代码：

public partial class Screen1 : UserControl
{
    public Screen1()
    {
        InitializeComponent();

    }
    private void Canvas_KeyDown(object sender, KeyEventArgs e)
    {
        if (e.Key == Key.Down)
        {
            Canvas.SetTop(Green_Link, Canvas.GetTop(Green_Link) + 10);
        }
        else if (e.Key == Key.Up)
        {
            Canvas.SetTop(Green_Link, Canvas.GetTop(Green_Link) - 10);
        }
        else if (e.Key == Key.Left)
        {
            Canvas.SetLeft(Green_Link, Canvas.GetLeft(Green_Link) - 10);
        }
        else if (e.Key == Key.Right)
        {
            Canvas.SetLeft(Green_Link, Canvas.GetLeft(Green_Link) + 10);
        }
    }
}

在开始制作过渡动画之前，我希望至少让图像在画布中移动。谢谢！

【问题讨论】：

到底是什么问题？
方向键在执行时不会移动程序上的图像
你检查过Canvas_KeyDown是否被调用了吗？
如果没有，请在画布上设置FocusManager.FocusedElement="{Binding RelativeSource={RelativeSource Self}}"。
看起来方法名称有问题。您在 XAML 中定义了 Canvas_OnKeyDown，在 Screen1 中定义了 Canvas_KeyDown。您也可能将 C# 代码放在错误的文件中 - 您的 XAML 指示您想要的代码隐藏文件是 GameWindow.xaml.cs，而不是 Screen1

标签： c# wpf wpf-controls

【解决方案1】：

看起来您将 C# 代码放在了错误的位置。您的 XAML 文件的开头是这样写的：

<x:Name="WINDow" x:Class="TextofTheWild2._0.GameWindow" ...

这意味着您的 xaml 文件部分定义了一个名为 GameWindow 的类。这将由两个文件组成，xaml 和 codebehind（扩展名为 .xaml.cs）。当您像正在做的那样处理 xaml 中的事件时（即KeyDown="Canvas_OnKeyDown"），它会被路由到该视图的代码隐藏中的一个函数。

如果您将 Canvas_KeyDown 方法放在 GameWindow.xaml.cs 中（并将该方法重命名为 Canvas_OnKeyDown - 您缺少 On），WPF 应该会启动并且它应该可以正常工作。

【讨论】：

我刚才重读了这篇文章，似乎我发送了错误的 XAML 文件。我会快速编辑帖子。对此感到抱歉。