Creating n number of variable sized buttons in a container - xaml

Question

I need to create UI as following (kind of a tag cloud control)
n number of buttons (Count will be determined during runtime)
Each button will have different width based on its content
Max 3 buttons in a row
I have tried following things
VariableSizedWrapGrid as ItemsPanel of GridView (It requires RowSpan
and ColumnSpan to be specified which is not feasible as width is
determined during runtime)
StackPanel with Horizontal orientation (All the buttons were arranged in one line)
Any thoughts?

Answer 1

Here is a great blogpost on how to create a WrapPanel based on your requirements.
I have created a TagsPanel based off of this blog to use in one of my app. Key is to loop through to items and get the actual size and set it based on available width of the panel. See below.
public class TagsPanel : Panel
{
protected override Size MeasureOverride(Size availableSize)
{
// Just take up all of the width
Size finalSize = new Size { Width = availableSize.Width };
double x = 0;
double rowHeight = 0d;
foreach (var child in Children)
{
// Tell the child control to determine the size needed
child.Measure(availableSize);
x += child.DesiredSize.Width;
if (x > availableSize.Width)
{
// this item will start the next row
x = child.DesiredSize.Width;
// adjust the height of the panel
finalSize.Height += rowHeight;
rowHeight = child.DesiredSize.Height;
}
else
{
// Get the tallest item
rowHeight = Math.Max(child.DesiredSize.Height, rowHeight);
}
}
// Add the final height
finalSize.Height += rowHeight;
return finalSize;
}
protected override Size ArrangeOverride(Size finalSize)
{
Rect finalRect = new Rect(0, 0, finalSize.Width, finalSize.Height);
double rowHeight = 0;
foreach (var child in Children)
{
if ((child.DesiredSize.Width + finalRect.X) > finalSize.Width)
{
// next row!
finalRect.X = 0;
finalRect.Y += rowHeight;
rowHeight = 0;
}
// Place the item
child.Arrange(new Rect(finalRect.X, finalRect.Y, child.DesiredSize.Width, child.DesiredSize.Height));
// adjust the location for the next items
finalRect.X += child.DesiredSize.Width;
rowHeight = Math.Max(child.DesiredSize.Height, rowHeight);
}
return finalSize;
}
}
and use it in a GridView like below.
<GridView ItemsSource="{Binding tags}" >
<GridView.ItemTemplate>
<DataTemplate>
<Button Content="{Binding ''}" Margin="5"/>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<local:TagsPanel/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>

Answer 2

Basically, VariableSizedWrapGrid treat all its childs with equal size. You can use ColumnSpan and RowSpan to extend the area of child.
Another way is to create a WrapPanel user control and then use in place of VariableSizedWrapGrid. This will shape output as you described.