Xaml ItemsControl中的项采用第一项的宽度

Xaml ItemsControl中的项采用第一项的宽度,xaml,win-universal-app,uwp,itemscontrol,uwp-xaml,Xaml,Win Universal App,Uwp,Itemscontrol,Uwp Xaml,ItemsControl中的WrapGrid将第一个项的宽度作为所有子项的默认宽度。是否有任何变通方法可以根据每个项目的内容使itemwidth拉伸? 这是我的XAML <Grid Grid.Row="2"> <ItemsControl Grid.Column="1" ItemsSource="{x:Bind articleTags}">

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

截图:

在第二张图片中,“新闻稿”项目没有完全显示,因为它占据了第一个项目的宽度。


如何解决此问题?

WrapGrid
更改为
ItemsStackPanel

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

我使用了itemsstackpanel…项目超出了屏幕。。。我希望项目被包装到下一行,如果它超过了屏幕大小
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;
    }
}