How can I line up WPF items in a Horizontal WrapPanel so they line up based on an arbitrary vertical point in each item?

The ideal solution to this would probably be using Adorners. On the AdornerLayer you would have a custom Adorner for each item on the Panel (you define it in the DataTemplate). You will be able to retreive dimensions an positions of each item (Boundingbox of the Adorner).

Also on the AdornerLayer you would then draw the lines between these boundingboxes. Using this solution you can layout your items any way you want (using any Panel you want) and the items will still be connected with lines A long time ago I used this approach for a graph visualizer. The nodes where arbitary UIElements that could be layouted in any way.

The items where connected with lines To make all items align perfectly you could use a Canvas as the root Panel in you ItemTemplate. The Canvas can be 0x0 units big. You would then arrange your elements around that Canvas.

The Canvas becomes your point of reference. Everything on top of the line will get negative Canvas. Top values.

Another approach would be to use negative margins that are bound to the height of the top and bottom controls that surrond the line. Use a IValueConverter (Height*-1) to invert the Height.

The ideal solution to this would probably be using Adorners. On the AdornerLayer you would have a custom Adorner for each item on the Panel (you define it in the DataTemplate). You will be able to retreive dimensions an positions of each item (Boundingbox of the Adorner).

Also on the AdornerLayer you would then draw the lines between these boundingboxes. Using this solution you can layout your items any way you want (using any Panel you want) and the items will still be connected with lines. A long time ago I used this approach for a graph visualizer.

The nodes where arbitary UIElements that could be layouted in any way. The items where connected with lines. To make all items align perfectly you could use a Canvas as the root Panel in you ItemTemplate.

The Canvas can be 0x0 units big. You would then arrange your elements around that Canvas. The Canvas becomes your point of reference.

Everything on top of the line will get negative Canvas. Top values. Another approach would be to use negative margins that are bound to the height of the top and bottom controls that surrond the line.

Use a IValueConverter (Height*-1) to invert the Height.

That's definitely a useful solution for drawing the lines. Thanks! But I'm still looking for a way to arrange the items so that that they all line up where they should.

The lines all be horizontal and straight, so it's the items that have to move to compensate. – Scott Whitlock May 22 '10 at 20:02 Adorners also solve my drag & drop visual indicators! Thanks for teaching me something new!

– Scott Whitlock May 22 '10 at 23:55 I updated my post with a suggestion to solve your alginment problem. – bitbonk May 23 '10 at 0:23.

This won't solve your problem, but I bet it will simplify it: Try defining a DataTemplate that looks something like this: Now create an ItemsControl whose ItemsPanelTemplate is a horizontal WrapPanel with the Grid. IsSharedSizeScope attached property set to True. You will of course also need to define data templates for whatever the annotation and graphic object properties contain.

You still have the problem that when the items in the WrapPanel wrap, the objects above and below the timeline have the same padding irrespective of how much they actually need to fit on their current row of the WrapPanel. So to get the effect that I think you're looking for, you still have to monkey around with measure and arrange - basically, instead of creating a single WrapPanel, you'll create something that puts these items into a StackPanel on each "row", each of which is its own shared-size scope. But actually measuring and arranging the heights of the timeline items is not something you need to worry about.

You only need their widths (so that your logic can determine when to wrap). The Grid will take care of calculating the heights for you.

Interesting idea... thanks! It restricts things a bit in that all the graphics have to be the same size (in the middle) so if one used a graphic that was twice as big, all the annotations on the other ones in the same line wouldn't be right up against the graphic. What if, for instance, one item only had a big graphic, and no annotations?

As I said, it's a bit more restrictive than I was thinking, but it's an interesting approach. – Scott Whitlock May 22 '10 at 23:50 Actually, you can make the middle column auto-sized and have it belong to its own SharedSizeGroup. It'll still work; you just have to give the Rectangle or whatever you're using to produce the line a VerticalAlignment of Center.It'll be centered vertically in the row, and the row will be sized to the height of the biggest graphic it contains.

– Robert Rossney May 23 '10 at 0:28.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.