Search code examples
c#wpfimageflowdocument

Images Layout in FlowDocument

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

enter image description here

Solution

  • 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>