Images Layout in FlowDocument

Question

I added some images in flow document but all of the pictures are listed in order of bottom to top.

I want to positions of pictures in sequential position from left to right, breaking content to the next line at the edge of the containing box like Wrap Panel.

I tried to put the pictures in ListView and Wrap Panel but it does not work.

This is my method for adding images to a flow document.

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

The Block elements of a FlowDocument are arranged vertically.

You would have to create an InlineUIContainer instead of a BlockUIContainer and add it to the Inlines collection of a Paragraph.

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

You need to put multiple images into same BlockUIContainer, using WrapPanel as its child.

Here is xaml to demonstrate, converting it to code-behind should be fairly straightforward, you will need to keep WrapPanel instance somehow:

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