适用于 Windows 应用商店应用的带有 FlowLayout 的 GridView

Posted 2023-04-12

【中文标题】适用于 Windows 应用商店应用的带有 FlowLayout 的 GridView

【英文标题】：GridView with FlowLayout for Windows Store Apps

【发布时间】：2015-12-07 19:20:41

【问题描述】：

如何在 Foursquare 应用中制作这样的 GridView？我的意思是每个 GridViewItem 的大小与内部文本的长度有关。

搜索时发现名称FlowLayout，是第三方android库的名称。让这个功能成为可能。

我尝试了 DataTemplateSelector，但使用它是不可能的。根据文本的长度，我需要大量的模板。

【问题讨论】：

您根本不需要计算文本的长度。在DataTemplate 中，只需将TextBlock 和Image 粘贴在水平 StackPanel 中，然后摇晃你的叔叔。

@Mike 我也想到了你的建议。但这不起作用。 gridview 项目的宽度是有限的，它没有增加。

@MikeEason 不像你说的那样工作。 GridView 将第一个项目的宽度作为其余项目的参考。

或许您应该改用WrapPanel？

【参考方案1】：

我做了与带有RichTextBlock 的四方形相同的设计，因为它自己处理包装，并且每个项目都可以有自己的尺寸。

所有细节都在这里http://depblog.weblogs.us/2015/02/18/how-to-add-a-tag-list-into-winrt-universal-apps/

Shawn Kendrot 也做了同样的事情，但他使用从 Panel 派生的自定义控件和 MeasureOverride 来设置大小差异。

所有这些细节都在这里http://visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx

【参考方案2】：

不知何故，我对使用 RichTextBox 感到不舒服。这个想法是使用自定义WrapPanel。

public class WrapPanel : 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;
    

使用WrapPanel，您可以定义ItemsPanelTemplate。

<ItemsPanelTemplate x:Key="HorizontalItemsPanel">
    <controls:WrapPanel />
</ItemsPanelTemplate>

那么ItemsPanelTemplate 可以用于ListView、ItemsControl 或GridView。

<ListView Name="LocationItemsControl" ItemsPanel="StaticResource HorizontalItemsPanel"/>

您可以参考分步教程here。