using WPF to display an image that can be moved by using the arrow keys in C#

Question

I am programming the game Galaga for a class and am using WPF to do it and have never used WPF. I have been able to upload an image of the player ship and found how to set its location with Canvas.SetLeft and Canvas.SetTop commands, but I have not found how to use arrow key input to change those values. I put a do while loop in that looked for input, but it would not boot. Below is my XAML code and underneath is my XAML.cs.

<Window x:Class="GalagaGame.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="500" Width="1000">
<Canvas Background="Black">
    <Image Name="HumanShipGraphic" Source="GalagaPlayerShip.png" HorizontalAlignment="Left" Height="100" Canvas.Top="350" Canvas.Left="450" VerticalAlignment="Top" Width="100"/>
    <Image Name="BlueAlienShipGraphic" Source="BlueAlienShip.png" Height="75" Width="75" Canvas.Left="100" Canvas.Top="100" />
    <TextBlock Foreground="Red" FontFamily="Arial" FontSize="20" FontWeight="Bold"  Canvas.Top="400" Canvas.Right="900" TextWrapping="Wrap" Text="Score"/>
    <TextBlock Name="ScoreText" Foreground="White" FontFamily="Arial" FontSize="15" FontWeight="Bold"  Canvas.Top="420" Canvas.Right="900" TextWrapping="Wrap" Text="300" />
    <Rectangle Name="LaserGraphic" Fill="#FFF4F4F5" Height="15" Width="5" Canvas.Top="118" Canvas.Left="532" Stroke="White"  />
    <Image Name="BlowUpImage" Height="100" Canvas.Left="408" Canvas.Top="308" Width="100">
        <Image.Triggers>
            <EventTrigger>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Name="BlowUpAnimation" Storyboard.TargetName="BlowUpImage" 
                                         Storyboard.TargetProperty="Width" From=" 100" To=" 100" 
                                         Duration="0:0:0.1" Completed="DoubleAnimation_Completed"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>

</Canvas>

    namespace GalagaGameTestProject
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
    public MainWindow()
    {
        InitializeComponent();
        do
        {
            ProcessInput();
            MoveShip(x, y);
        } while (quit == 0);

    }
    int x = 100;
    int y = 100;
    int quit = 0;
    public void Start()
    {
        Game newGame = new Game();
        newGame.Run();
    }
    public void MoveShip(int x, int y)
    {
        Canvas.SetTop(HumanShipGraphic, x);
        Canvas.SetLeft(HumanShipGraphic, y);
    }
    private void ProcessInput()
    {
        ConsoleKeyInfo keyInfo;
        if (Console.KeyAvailable)
        {
            keyInfo = Console.ReadKey();
            switch (keyInfo.Key)
            {

                case ConsoleKey.LeftArrow:
                    x -= 5;
                    break;
                case ConsoleKey.RightArrow:
                    x -= 5;

                    break;
                case ConsoleKey.Spacebar:
                    quit = 1;
                    break;

            }
        }
    }


    }
}

you don't want a do loop, you want to hook into events for those keystrokes — BlackICE, Apr 20 '15 at 04:12
have you tryed using keyDown/keyUp handlers? like [discussed here](http://stackoverflow.com/questions/347724/how-can-i-capture-keydown-event-on-a-wpf-page-or-usercontrol-object) , or [here](http://stackoverflow.com/questions/18171396/wpf-keydown-event-on-page)? — Fragment, Apr 20 '15 at 04:13
There is "immediate mode" and "retained mode" paradigm to UI programming. WPF is "retained mode". This means, that there is not a application driven render loop which handles stuff over and over again, but it is event driven. Your loop idea would fit to immediate mode technologies like DirectX but not to WPF. What you need is event handlers which will contain the code you want executed whenever a keyboard action happens. — BitTickler, Apr 20 '15 at 04:15

score 1 · Answer 1 · answered Apr 20 '15 at 04:23

Your loop is in your Windows constructor which is keeping your window form showing. Move your keyboard input to the OnPreviewKeyDown event instead.

protected override void OnPreviewKeyDown(KeyEventArgs e)
{
   base.OnPreviewKeyDown(e);
   switch (e.Key )
   {
       case Key.Left: 
           break;
       case Key.Right:
           break; 
       case Key.Space:
           break;
   }

}

using WPF to display an image that can be moved by using the arrow keys in C#

1 Answers1