WPF: floater location in flowdocument

First, floater is like its name. Once it is set, it will be closely pasted in the document, and the elements behind it, whether inline or block, as long as there is a gap in the horizontal line of floater, will move up (the difference is that the block element will change a line, and the inline element is directly superimposed at the end of the above element ).

 

XAML:

<Paragraph>

Before, before, before, and before

<FloaterHorizontalalignment="Left">

<Paragraph> Floater1 </Paragraph>

</Floater>

Post post

</Paragraph>

<Paragraph> I am another block element under floater </Paragraph>

 

Result:

 

However, when multiple floater stacks, it seems that there will be some problems. We set three paragraph consecutively, the first two of which have floater.

Let's look at this XAML:

<Flowdocument>

<Paragraph>

Before, before, before, and before

<FloaterHorizontalalignment="Left">

<Paragraph> Floater1 </Paragraph>

</Floater>

Post post

</Paragraph>

<Paragraph>

Before, before, and before

<FloaterHorizontalalignment="Left">

<Paragraph> Floater2 </Paragraph>

</Floater>

Post post

</Paragraph>

<Paragraph> I am another block element under floater </Paragraph>

</Flowdocument>

If the window width is small, the result is correct:

 

However, once the window width is large, it will look like this:

 

The cause is: Our floater's horizontalalignment is set to left, and this left is not relative to the left side of the entire document, but the above floater is taken into account, since there is a floater above, the next floater will be pasted to the right of the previous floater!

 

If you change the horizontalalignment of floater2 to stretch, the above problem will not occur. However, the following block elements will not be mentioned, because the entire floater occupies a horizontal position.

 

A feasible solution is to use the clearfloaters attribute of the block element (that is, the clear element in CSS, And the flowdocument in WPF is completely done by imitating html/CSS ), that is, remove the floater on the second paragraph. The result is that the second paragraph will be placed under any previous floater.

 

XAML:

<Flowdocument>

<Paragraph>

Before, before, before, and before

<FloaterHorizontalalignment="Left">

<Paragraph> Floater1 </Paragraph>

</Floater>

Post post

</Paragraph>

<ParagraphClearfloaters="Left">

Before, before, and before

<FloaterHorizontalalignment="Left">

<Paragraph> Floater2 </Paragraph>

</Floater>

Post post

</Paragraph>

<Paragraph> I am another block element under floater </Paragraph>

</Flowdocument>

 

Result: