WPF Bild mit den Pfeiltasten verschieben

Question

Hallo, ich versuche ein Schlangenspiel zu machen, aber anstatt eine Form zu verwenden, möchte ich ein Bild für den Kopf und ein anderes Bild für den Rest des Körpers verwenden. Ich bin neu in WPF und alle Tutorials, die ich gefunden habe, verwenden nur Formen. Was ich an dieser Stelle tun möchte, ist, mein Bild mit den Pfeiltasten zu bewegen und schließlich, nachdem ich das erkannt habe, Kollisionen mit anderen Bildern auf dem Board zu erkennen. Dies ist mein Hauptfenster-Xaml-Code. Es besteht aus einem einfachen Bild (DogeIcon), das ich wie oben beschrieben bewegen möchte und einem anderen Bild (Katze), das ein Hindernis darstellt.

<Window x:Class="DogeSNake.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:DogeSNake" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525"> 
<Grid> 
    <Image Name="DogeIcon" HorizontalAlignment="Left" Height="64" Margin="33,27,0,0" VerticalAlignment="Top" Width="64" Source="media/doge.png" MouseEnter="RectangleMouseEnter" /> 
    <Image Name="CatIcon" HorizontalAlignment="Left" Height="40" Margin="445,247,0,0" VerticalAlignment="Top" Width="40" Source="media/cat.png" /> 
</Grid> 

Answer 1

Was Sie brauchen kein Raster ist aber eine Leinwand ...

<Window x:Class="DogeSNake.MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:local="clr-namespace:DogeSNake" 
mc:Ignorable="d" 
Title="MainWindow" Height="350" Width="525" FocusManager.FocusedElement="{Binding ElementName=MyCanvas}"> 
    <Canvas Name="MyCanvas" KeyDown="Canvas_KeyDown" Focusable="True" > 
      <Image Name="DogeIcon" Canvas.Left="10" Canvas.Top="10" HorizontalAlignment="Left" Height="64" Margin="0" VerticalAlignment="Top" Width="64" Source="media/doge.png" MouseEnter="RectangleMouseEnter"/> 
      <Image Name="CatIcon" Canvas.Left="200" Canvas.Top="200" HorizontalAlignment="Left" Height="40" Margin="0" VerticalAlignment="Top" Width="40" Source="media/cat.png"/> 
    </Canvas> 
</Window> 

Im Code bahind ...

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