ItemsControl中的项目采用第一个项目的宽度 [英] Items in ItemsControl takes width of First Item

问题描述

ItemsControl中的WrapGrid将第一个项目的宽度作为所有子项目的默认宽度.是否有任何解决方法可以使itemwidth根据每个单独项目的内容进行拉伸? 这是我的XAML.

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>

屏幕截图:

在第二张图像中，时事通讯"项目未完全显示，因为它占用了第一项目的宽度.

In the second image the 'newsletters' item is not being fully displayed as it takes the width of the first item.

如何解决这个问题?

推荐答案

将WrapGrid更改为ItemsStackPanel

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

更新 尝试根据此示例

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中的项目采用第一个项目的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！