Arrange GUI elements in WPF in a similar way to the applications on the iPhone

Question

I would like to arrange UIControls in WPF in a similar way to the applications on the iPhone. They should be positioned on a grid, but a user should be able to drag them somewhere else, after releasing the mouse button (or the finger in case of an iPhone) the selected UIControl should snap back to the next position in the grid. The other UIElements should be rearranged automatically.

Further the user should also be connect two elements with a line or something.

I'm not experienced with WPF. The first question is if there is a container which is suitable for something (System.Windows.Controls.Grid ?) or if I have to extend canvas or somethig else for this.

I would like to know which elements from the WPF framework can be used and which elements I have to write myself.

For people who do not own an iPhone: http://www.youtube.com/watch?v=3omhu2AUWC8

Update

I've looked at AnimatedTilePanel in the BangOTricks examples (see below), this one explains how to create your own Panel and how to let it arrange things there.. However I still need an idea how to implement drag and drop correctly in this example..

Answer 1

You can check out this article for ideas on the layout. http://www.code-magazine.com/Article.aspx?quickid=0803061

This article/library may help you with the drag & drop: http://pavanpodila.spaces.live.com/blog/cns!9C9E888164859398!229.entry

Answer 2

Unfortunately, you'll have to write a lot of things yourself, as WPF doesn't automatically do what you're looking for.

For positioning the controls, you can use either UniformGrid or Grid. Assuming it's much like the iPhone video you showed, you can just use the UniformGrid with 4 columns and however many rows you need.

For the dragging animation, layout-wise, you could start by manipulating the RenderTransform property on whatever is being dragged, but you'll have to set a handler to check once you've met whatever threshold necessary to move into the another "cell" -- and at that point, you'll have to changed the order of the items in the tree.

Answer 3

Take a look at AnimatedTilePanel from Kevin's Bag-o-Tricks at:

http://j832.com/bagotricks/

It doesn't do everything you want but it will show you how to write a panel that animates its children when changing size or order.