Wrap panel with "kind of" two way wraping - wpf

Question

So I have a wrappanel which is wrapped vertically. The items are added at run-time, but all those items (user controls) have different widths and because the wrappanel is wrapped vertically, it stacks them dowm and when they cover the vertical space they wrap to the next column. BUT what I need is "kind of" two way wrapping, i.e. I added a first item which is 200px in width, then I added a second item which is like 50px in width, but when I add a third item which is like 100px in width I want it to not to go to the next row, but place itself in that free spot the 50px control left there depending on that 200px control on top (that leaves a 150px space and a 100px control clearly fits). Of course when it doesn't fit, it wraps to the next row, and that's all OK.
Here's an images to clarify this (Can't upload'em here):
That's what happens:
image 1
And that's what I want:
image 2
Sorry for my english, it's not my primary language. I hope you'll understand my question.

Answer 1

You definitely can't use a single panel to accomplish that! You can use a stackpanel where to insert multiple and dynamic wrappanel with horizontal orientation to have "column" behavior you need

Answer 2

Well, I did it. Just wrote a custom wrappanel with the behavior I wanted.
Here it is:
public class TwoWayWrapPanel : Panel
{
int _rowCount = 0;
public int RowCount
{
get { return _rowCount; }
set { _rowCount = value; }
}
protected override Size MeasureOverride(Size availableSize)
{
Size resultSize = new Size(0, 0);
double columnWidth = 0;
double usedSpace = 0;
double nullX = 0;
double currentX = 0;
double currentY = 0;
bool isFirst = true;
int row = 0;
foreach (UIElement child in Children)
{
child.Measure(availableSize);
if (isFirst)
{
columnWidth = child.DesiredSize.Width;
resultSize.Width += columnWidth;
currentY += child.DesiredSize.Height;
row++;
isFirst = false;
}
else
{
if (columnWidth >= usedSpace + child.DesiredSize.Width & _rowCount > 1)
{
currentX = nullX + usedSpace;
usedSpace += child.DesiredSize.Width;
}
else
{
row++;
if (row + 1 > _rowCount | child.DesiredSize.Width > columnWidth)
{
row = 0;
currentX = nullX + columnWidth;
nullX = currentX;
usedSpace = 0;
columnWidth = child.DesiredSize.Width;
currentY = child.DesiredSize.Height;
row++;
resultSize.Width += columnWidth;
}
else
{
currentY += child.DesiredSize.Height;
currentX = nullX;
usedSpace = child.DesiredSize.Width;
}
}
}
}
return resultSize;
}
protected override Size ArrangeOverride(Size finalSize)
{
double columnWidth = 0;
double usedSpace = 0;
double nullX = 0;
double currentX = 0;
double currentY = 0;
bool isFirst = true;
int row = 0;
foreach (UIElement child in Children)
{
//First item in the collection
if (isFirst)
{
child.Arrange(new Rect(currentX, currentY, child.DesiredSize.Width, child.DesiredSize.Height));
columnWidth = child.DesiredSize.Width;
currentY += child.DesiredSize.Height;
row++;
isFirst = false;
}
else
{
//Current item fits so place it in the same row
if (columnWidth >= usedSpace + child.DesiredSize.Width & _rowCount > 1)
{
currentX = nullX + usedSpace;
child.Arrange(new Rect(currentX, currentY, child.DesiredSize.Width, child.DesiredSize.Height));
usedSpace += child.DesiredSize.Width;
}
else
{
row++;
//The row limit is reached or the item width is greater than primary item width. Creating new column
if (row + 1 > _rowCount | child.DesiredSize.Width > columnWidth)
{
row = 0;
currentY = 0;
currentX = nullX + columnWidth;
nullX = currentX;
usedSpace = 0;
child.Arrange(new Rect(currentX, currentY, child.DesiredSize.Width, child.DesiredSize.Height));
columnWidth = child.DesiredSize.Width;
currentY += child.DesiredSize.Height;
row++;
}
//Item doesn't fit. Adding to the new row in the same column
else
{
usedSpace = 0;
currentY += child.DesiredSize.Height;
currentX = nullX;
child.Arrange(new Rect(currentX, currentY, child.DesiredSize.Width, child.DesiredSize.Height));
usedSpace += child.DesiredSize.Width;
}
}
}
}
return finalSize;
}
}