Element layout arrangement?

Question

Say I have a grid or container with width 100, and I have 20 elements with width 10.  Each element gets 1 row to itself, but needs to overlap with the elements above and below it.  So element one position x = 0, element 2, x = 5, etc. etc.  But the key here is that the width of 100 can change, and all the elements need to scale horizontally so the first one always starts at 0, and the last one always starts at width-10.

So basically, if the user reduces the width of the window to 10, all the elements are perfectly lined up vertically, and as the width of the container increases the 20 elements all move horizontally by different amounts so they are still going in a straight diagonal.

Hope this makes some kind of sense... if so is there a simple way to do this?   Each one of my elements is a view with a viewmodel providing the data displayed in the element as well.

Answer 1

This would be a perfect candidate for a custom panel.

Info: http://www.codeproject.com/Articles/37348/Creating-Custom-Panels-In-WPF.aspx

Examples: http://dotnet.org.za/rudi/archive/2008/04/15/why-wpf-rocks-custom-layout-panel-showcase.aspx

If you need help, just let me know.

hth,

Marcel

---

http://dutchmarcel.wordpress.com/

Answer 2

Hi Marcel,

The second link you provided with the examples is dead :(

Do you have a mirror site by chance or another site with good examples for a diagonal element panel?

Thanks!

Answer 3

Well, it's not dead, but it is a bit slow to load :-)

Just keep trying...

Marcel

---

http://dutchmarcel.wordpress.com/

Answer 4

Well, it's not dead, but it is a bit slow to load :-)

Just keep trying...

Marcel

---

http://dutchmarcel.wordpress.com/

It would seem you have a better connection than mine :)

After about 5 timeouts, I managed to get enough to load to see the DiagonalPanel implementation- Cool!  But no author, no link to source, no info at all.... :(

Answer 5

All the panels are contained in a showcase application (including source code) which you can download using the link at the end of the article:

http://dotnet.org.za/files/folders/425764/download.aspx

hth,

Marcel

---

http://dutchmarcel.wordpress.com/