是否有使用WPF方向键移动图片的方法？

Question

我是WPF的新手，我正在尝试使用2D Sprite gif文件制作RPG，以制作动画，以便向前，向后走等。>

我在使用箭头键使原始图片向任何方向移动时遇到问题。这是代码段：

<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);
        }
    }
}
在开始制作过渡动画之前，我至少要使图像在画布中移动。谢谢！

我是WPF的新手，我正在尝试使用2D Sprite gif文件制作一个RPG，以实现动画的前进，后退等操作。我遇到了使原始图片使用...向任意方向移动的问题。]] >

好像您将C＃代码放在错误的位置。 XAML文件的开头显示以下内容：

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

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

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

这里是一个链接，可以满足您的要求：

https://sarangsoft.com/blog/how-to-move-images-with-arrow-keys-in-a-windows-wpf-app/

示例：

private void OnPreviewKeyDown(object sender, KeyEventArgs e)
{
    switch(e.Key)
      {
        case Key.Left:
                leftMargin -= 5;
                e.Handled = true;
          break;

        case Key.Right:
                leftMargin += 5;
                e.Handled = true;
          break;

        case Key.Up:
                topMargin -= 5;
                e.Handled = true;
          break;

        case Key.Down:
                topMargin += 5;
                e.Handled = true;
          break;

        default:
          MessageBox.Show(“Invalid key pressed”);
          break;
         }

      this.image1.Margin = new Thickness(leftMargin,
          topMargin,
          rightMargin,
          bottomMargin
           );
}

Answer 1

好像您将C＃代码放在错误的位置。 XAML文件的开头显示以下内容：

Answer 2

这里是一个链接，可以满足您的要求：

https://sarangsoft.com/blog/how-to-move-images-with-arrow-keys-in-a-windows-wpf-app/