How to balance contrls using ArrangeOverride and MeasureOverride - wpf

Question

I have created a custom panel to help understand the MeasureOverride and ArrangeOverride methods. I want the odd items to show up on the left and the even numbered items to show up on the right.
1 - 0
3 - 2
5 - 3
7 - 4
8
public class MyPanel : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
var mySize = new Size();
foreach (UIElement child in this.InternalChildren)
{
child.Measure(availableSize);
mySize.Width = child.DesiredSize.Width * 2;
var itemCount = Math.Ceiling(InternalChildren.Count / 2f);
mySize.Height = itemCount * child.DesiredSize.Height;
}
return mySize;
}
protected override Size ArrangeOverride(Size finalSize)
{
var odd = InternalChildren.OfType<UIElement>()
.Where((c, i) => i % 2 != 0);
var even = InternalChildren.OfType<UIElement>()
.Where((c, i) => i % 2 == 0);
var location = new Point();
foreach (var child in even)
{
child.Arrange(new Rect(location, child.DesiredSize));
location.X = child.DesiredSize.Width;
location.Y += child.DesiredSize.Height;
Debug.WriteLine(location);
}
location = new Point();
foreach (var child in odd)
{
child.Arrange(new Rect(location, child.DesiredSize));
location.Y += child.DesiredSize.Height;
Debug.WriteLine(location);
}
return finalSize;
}
}
Here is the markup for the panel.
<Canvas>
<local:MyPanel x:Name="MyPanel1" Canvas.Left="500" Canvas.Top="200"
Background="#FFE84B4B">
<Button Content="0"></Button>
<Button Content="1"></Button>
<Button Content="2"></Button>
<Button Content="3"></Button>
<Button Content="4"></Button>
<Button Content="5"></Button>
<Button Content="6"></Button>
<Button Content="7"></Button>
<Button Content="8"></Button>
</local:MyPanel>
</Canvas>
and here is the result
How can I get item 0 to show up and line up with the 1 column?

Answer 1

I'd first arrange the items on the left (the 'odds') because they define the horizontal offset. Then use that offset for the 'evens'.
Of course this is just kind of demo code. DesiredSize isn't RenderSize. As soon as the DP-system calculates a diff between the two the fixed positioning proofs too rigid.
protected override Size ArrangeOverride(Size finalSize)
{
var odd = InternalChildren.OfType<UIElement>()
.Where((c, i) => i % 2 != 0);
var even = InternalChildren.OfType<UIElement>()
.Where((c, i) => i % 2 == 0);
var location = new Point();
foreach (var child in odd)
{
child.Arrange(new Rect(location, child.DesiredSize));
location.Y += child.DesiredSize.Height;
Debug.WriteLine(location);
}
var evenHorzOffset = odd.First().DesiredSize.Width;
location = new Point(evenHorzOffset, 0);
foreach (var child in even)
{
child.Arrange(new Rect(location, child.DesiredSize));
location.Y += child.DesiredSize.Height;
Debug.WriteLine(location);
}
return finalSize;
}