How to move a rectangle in a Canvas?

Question

If I want to move a rectangle in a Canvas, would I have to modify the Top and Left properties? Thats the only way I see it would be possible. I am making a tile-based game, and the rectangles I want to move are filled with images of enemies and my hero.

Attached properties Canvas.Left and Canvas.Top edit: http://stackoverflow.com/questions/5913792/wpf-canvas-how-to-add-children-dynamically-with-mvvm-code-behind — kenny, Mar 01 '13 at 15:51

score 1 · Answer 1 · answered Mar 01 '13 at 15:49

You can also use RenderTransform on the rectangle.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Rectangle Width="10" Height="10" Fill="Red">
            <Rectangle.RenderTransform>
                <TranslateTransform X="10" Y="10"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>
</Window>

score 1 · Answer 2 · answered Mar 01 '13 at 15:58

If your game is tile based typically you wouldn't move the tiles. You would have a fixed grid of tiles and you would merely move the content. So for example think of a chess board. When a piece moves from square A1 to A7 you aren't moving the tile A1 to A7, you are instead moving the piece in tile A1 to tile A7. Even if your tile map is scroll-able you'd want to move the grid housing the tiles rather than the individual tiles.

You could use a WPF Grid control for this task, which allows you to define the number of rows and columsn and within each grid cell you could house an image control. Each image source could then be bound to the various tiles of your model.

How to move a rectangle in a Canvas?

2 Answers2