ItemsControl 中的项目采用第一个项目的宽度

Question

ItemsControl 中的WrapGrid 将第一个项目的宽度作为所有子项目的默认宽度。是否有任何解决方法可以根据每个项目的内容拉伸项目宽度？这是我的 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>

截图：

在第二张图片中，'newsletters' 项目未完全显示，因为它占据了第一个项目的宽度。

如何解决？

Answer 1

将 WrapGrid 更改为 ItemsStackPanel

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <ItemsStackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

更新尝试根据 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;
    }
}

ItemsControl 中的项目采用第一个项目的宽度

Items in ItemsControl takes width of First Item

xaml

itemscontrol

win-universal-app

uwp

uwp-xaml