I originally posted this on StackOverflow, but got the message that this was the correct forum for such a question. https://stackoverflow.com/questions/44077183/wpf-arrangable-row-of-rectangles.

I am in the process of creating a small application which has the task of visualizing sorting algorithms. I am using the MVVM pattern. It does this by first displaying a row of rectangles, each with a number to be sorted by (left out in illustration). Here's a quick draft:


So, the application will show each step in the algorithm by physically moving the rectangles. In the illustration above, the third rectangle is switching place with the second. My plan was to have some sort of rectangle class, and then putting these in an ObservableCollection and then run the algorithm on them – seems simple enough, but the problem is the movement of the rectangles, and the fact that they should be animated (by position) and moved physically out of the list for a second before being put back in again. Does anybody have a good approach here?


enter image description here

Your problem is more animating then it is sorting. A sorting algorithm is expected to take an arbitrary number of elements and sort them.

What you're doing is animating a fixed number of squares. You can work out the sorting on paper by hand.

Once you have that what you need to do is find ways to break down what you want to animate into smaller parts. You may find some swaps can be reused and some can't

  • Yes. I only mentioned it to give it some context. So, my problem is basically that if I know rectangle three has to swap places with rectangle two — how should I do this animation in practice? I don't know if canvas might be a way to go because it's a position transformation only. I don't know what you think. It might be too complicated to implement. – Pelle May 19 '17 at 21:13
  • Your right, It's a position transformation. But understand the work correctly. If this is fixed then what you really need is the tools to animate. If you can solve this problem with an animated gif don't turn it into a bigger problem then it is. – candied_orange May 19 '17 at 21:17
  • I see your point, but it has to be more flexible because rect five might switch places with rect one and so forth. I can't believe how difficult such trivial tasks can be. I'm really scratching my head here. – Pelle May 19 '17 at 21:21
  • Stop thinking of it as trivial. Animation has real time demands unless you pre-generate the images. Otherwise you're making a full blown video game. – candied_orange May 19 '17 at 21:34
  • Assuming that swapping involves adding/removing; a 'remove' animation probably needs to happen before removing from the underlying ObservableCollection. You could include a state enum in the Rectangle model which flags the rectangle as being animated (i.e. run an animation before removing the model from the ObservableCollection). You might also use a different state for an insert animation (e.g. enum { Inserting, Inserted, Removing }), although an insert animation might happen after adding to ObservableCollection instead. – Ben Cottrell May 19 '17 at 21:35

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.