Items in ItemsControl takes width of First Item - xaml

Question

WrapGrid in ItemsControl takes the width of the first item as the default width of all children items. Is there any workaround to make the itemwidth stretch according to each individual item's content?
Here's My XAML.
<Grid Grid.Row="2">
<ItemsControl Grid.Column="1" ItemsSource="{x:Bind articleTags}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#E1E1E1" HorizontalAlignment="Stretch" Background="#E1E1E1" Margin="4,4,0,0">
<TextBlock Text="{Binding NAME}" Margin="6,0,6,0"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Screenshots:
In the second image the 'newsletters' item is not being fully displayed as it takes the width of the first item.
How to solve this?

Answer 1

Change the WrapGrid to ItemsStackPanel
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
UPDATE
Try to use custom wrap grid panel according to this sample
public class CustomWrapPanel : 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;
}
}