FlowDocument图片布局问题：实现类似WrapPanel的左到右自动换行排列

安全阿岳

2026-6-16

问题

在FlowDocument中添加了若干图片，但所有图片均按从上到下的顺序排列。希望图片能够像WrapPanel那样，从左到右依次排列，在容器边缘处自动换行。尝试将图片放入ListView和WrapPanel中，但均未生效。

当前添加图片的方法如下：

private BlockUIContainer AddImage(BitmapImage bi,double width,double height)
{
    BlockUIContainer blockUI = new BlockUIContainer();
    Image i = new Image();
    i.Source = bi;
    i.Width = width;
    i.Height = height;
    i.HorizontalAlignment = HorizontalAlignment.Left;
    blockUI.Child = i;
    return blockUI;
}

问题截图：

解决方案

问题核心在于BlockUIContainer是块级元素，会独占一行，导致图片只能垂直排列。要实现流式换行效果，需改用InlineUIContainer（行内容器），并将所有图片放入同一个Paragraph段落中，即可实现类似WrapPanel的左到右自动换行。

修改后的代码示例

调整AddImage方法，返回行内容器：

private InlineUIContainer AddImage(BitmapImage bi, double width, double height)
{
    Image img = new Image();
    img.Source = bi;
    img.Width = width;
    img.Height = height;
    img.Margin = new Thickness(5); // 可选：添加图片间距，避免拥挤
    return new InlineUIContainer(img);
}

将所有图片统一加入同一个Paragraph，再添加到FlowDocument：

// 创建流式段落容器
Paragraph imageParagraph = new Paragraph();

// 批量添加图片
imageParagraph.Inlines.Add(AddImage(bi1, 100, 100));
imageParagraph.Inlines.Add(AddImage(bi2, 100, 100));
imageParagraph.Inlines.Add(AddImage(bi3, 100, 100));
// ... 添加更多图片

// 将段落注入FlowDocument
yourFlowDocument.Blocks.Add(imageParagraph);