有没有一种方法可以使用WPF的箭头键移动图片?

时间:2019-12-12 21:03:06

标签: c# wpf wpf-controls

我是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);
        }
    }
}

在开始制作过渡动画之前,我至少要使图像在画布中移动。谢谢!

1 个答案:

答案 0 :(得分:0)

好像您将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应该启动并且应该可以工作正确。