WPF: Add canvas to flowdocument

If you add canvas to flowdocument:

<Flowdocumentscrollviewer>

<Flowdocument>

<Blockuicontainer>

<Border borderbrush = "Navy" borderthickness = "1">

<Canvas>

<Button canvas. Left = "20" canvas. Top = "40"> A </button>

</Canvas>

</Border>

</Blockuicontainer>

<Paragraph> paragraph A </Paragraph>

<Paragraph> paragraph B </Paragraph>

</Flowdocument>

</Flowdocumentscrollviewer>

 

This result is surprising. Canvas is scaled into a line, while the buttons in canvas are below. In fact, flowdocument planning is like a vertical stackpanel. For details, refer to this article: WPF: a canvas with the minimum size. As for the buttons below, they are actually the content in the canvas, except that the default attribute cliptobounds of the canvas is false. If it is set to true, the content out of the border will not be displayed.

 

Solution: You can manually set a fixed height for canvas or use the custom canvas control in the previous article:

<Flowdocument>

<Blockuicontainer>

<Border borderbrush = "Navy" borderthickness = "1">

<LOC: sizedcanvas xmlns: Loc = "CLR-namespace: mgen_wpf">

<Button canvas. Left = "20" canvas. Top = "40"> A </button>

</LOC: sizedcanvas>

</Border>

</Blockuicontainer>

<Paragraph> paragraph A </Paragraph>

<Paragraph> paragraph B </Paragraph>

</Flowdocument>

 

Result: