WPF实现可按特定形状自动换行的ListView

能否创建一个ListView，使其内容按特定形状而非矩形换行，当内容触碰到形状边界时自动切换到下一行？我尝试用Path绘制目标形状，在上方放置ListView并使用WrapPanel作为项面板，但WrapPanel无法适配该形状实现换行。是否可以通过自定义WrapPanel并解析其几何图形来实现？

效果说明 #

• 预期效果：内容沿自定义的不规则形状（右侧带圆弧的多边形）边界排列，遇到圆弧边界时自动换行，完全填充形状内部区域
• 实际效果：内容按WrapPanel的矩形区域换行，超出了自定义形状的边界，没有适配圆弧部分

我的XAML代码 #

<Viewbox x:Name="LeftCVbx"
         Grid.Column="0" Grid.Row="0"
         HorizontalAlignment="Center" VerticalAlignment="Center"
         Margin="20"
         >
    <Path x:Name="LeftCPath"
          Stroke="Black" StrokeThickness="2" Fill="White"
          Data="M 0 0 l 800 0 l 0 120 a 290 290 0 0 0 -250 250 l -550 0 z"
    </Path>
</Viewbox>

<ListView ItemsSource="{Binding ExampleList}"
          Width="{Binding ElementName=LeftCVbx, Path=ActualWidth}" 
          Height="{Binding ElementName=LeftCVbx, Path=ActualHeight}" 
          ScrollViewer.CanContentScroll="False" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
          BorderBrush="Red" BorderThickness="2"
          FontSize="22"
          Background="Transparent"
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

默认WrapPanel仅支持矩形区域换行，要实现不规则形状的排版，核心是自定义布局面板，基于Path的几何图形计算每个项的合法放置位置。

1. 核心实现思路 #

自定义面板需要完成以下关键步骤：

• 解析Path的Geometry对象，获取形状的精确边界区域
• 遍历ListView的每个项，计算项的尺寸后，在形状内部逐行寻找合适位置：
  • 从左到右、从上到下尝试放置项
  • 用Geometry.FillContains方法判断项的矩形区域是否完全在自定义形状内部
  • 若当前行剩余空间不足或超出形状边界，则换行到下一行起始位置重新尝试
• 处理Viewbox的缩放：因Path放在Viewbox中，需通过坐标转换矩阵将面板坐标与Path几何坐标对齐

2. 自定义面板代码示例 #

public class ShapeWrapPanel : Panel
{
    public Geometry ClipGeometry
    {
        get { return (Geometry)GetValue(ClipGeometryProperty); }
        set { SetValue(ClipGeometryProperty, value); }
    }

    public static readonly DependencyProperty ClipGeometryProperty =
        DependencyProperty.Register("ClipGeometry", typeof(Geometry), typeof(ShapeWrapPanel), new PropertyMetadata(null, OnClipGeometryChanged));

    private static void OnClipGeometryChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((ShapeWrapPanel)d).InvalidateArrange();
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        foreach (UIElement child in InternalChildren)
        {
            child.Measure(availableSize);
        }
        return availableSize;
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        if (ClipGeometry == null || InternalChildren.Count == 0)
            return finalSize;

        double currentX = 0;
        double currentY = 0;
        double maxRowHeight = 0;

        foreach (UIElement child in InternalChildren)
        {
            var desiredSize = child.DesiredSize;
            var testRect = new Rect(currentX, currentY, desiredSize.Width, desiredSize.Height);

            // 判断当前矩形是否在几何图形内部
            if (ClipGeometry.FillContains(testRect))
            {
                child.Arrange(testRect);
                currentX += desiredSize.Width;
                maxRowHeight = Math.Max(maxRowHeight, desiredSize.Height);
            }
            else
            {
                // 换行处理
                currentY += maxRowHeight;
                currentX = 0;
                maxRowHeight = 0;

                // 重新尝试放置当前项
                testRect = new Rect(currentX, currentY, desiredSize.Width, desiredSize.Height);
                if (ClipGeometry.FillContains(testRect))
                {
                    child.Arrange(testRect);
                    currentX += desiredSize.Width;
                    maxRowHeight = desiredSize.Height;
                }
                // 若换行后仍放不下，可根据需求添加跳过/缩小项等逻辑
            }
        }

        return finalSize;
    }
}

3. 修改后的XAML使用方式 #

<ListView ItemsSource="{Binding ExampleList}"
          Width="{Binding ElementName=LeftCVbx, Path=ActualWidth}" 
          Height="{Binding ElementName=LeftCVbx, Path=ActualHeight}" 
          ScrollViewer.CanContentScroll="False" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
          BorderBrush="Red" BorderThickness="2"
          FontSize="22"
          Background="Transparent">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 绑定Path的几何图形到自定义面板 -->
            <local:ShapeWrapPanel ClipGeometry="{Binding ElementName=LeftCPath, Path=Data}"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

4. 简化替代方案（快速视觉适配） #

如果自定义面板成本过高，可采用GeometryClip做视觉裁剪：

• 将ListView的内容转换为FlowDocument元素
• 给FlowDocumentScrollViewer设置Clip为Path的几何图形，超出形状的内容会被裁剪，但这只是视觉上的隐藏，并非真正沿形状换行，适合排版精度要求不高的场景

内容的提问来源于stack exchange，提问作者GYNB