FlowDocument 中的图像布局

Question

我在流程文档中添加了一些图像，但所有图片都是按从下到上的顺序列出的。

我想从左到右按顺序放置图片，将内容分解到包含框边缘的下一行，就像包裹面板一样。

我尝试将图片放入 ListView 和 Wrap Panel 中，但不起作用。

这是我向流程文档添加图像的方法。

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;
}

Answer 1

FlowDocument 的

Block

元素垂直排列。

您必须创建一个

InlineUIContainer

而不是

BlockUIContainer

并将其添加到段落的

Inlines

集合中。

private static InlineUIContainer CreateImageContainer(
    ImageSource image, double width, double height)
{
    return new InlineUIContainer
    {
        Child = new Image
        {
            Source = image,
            Width = width,
            Height = height,
            HorizontalAlignment = HorizontalAlignment.Left
        }
    };
}

Answer 2

您需要将多个图像放入同一个

BlockUIContainer

中，并使用

WrapPanel

作为其子项。

这里是要演示的 xaml，将其转换为代码隐藏应该相当简单，您需要以某种方式保留

WrapPanel

实例：

    <FlowDocument>
        <BlockUIContainer>
            <WrapPanel>
                <TextBlock>Image 1</TextBlock>
                <TextBlock>Image 2</TextBlock>
            </WrapPanel>
        </BlockUIContainer>
    </FlowDocument>