WPF：FlowDocument中加入Canvas

如果在FlowDocument中加入Canvas：

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

 

這個結果很令人吃驚，Canvas縮成了一條線，而Canvas裡的Button卻在下面。事實上FlowDocument的規劃方式很像一個縱向的StackPanel，問題可以參考這篇文章：WPF：一個估量最小大小的Canvas。至於下面的按鈕，本身是Canvas中的內容，只不過預設Canvas的ClipToBounds屬性是false，設定為true後，越界的內容就不會顯示了。

 

解決方案，你可以手動給Canvas設定一個固定高度或者使用上面那篇文章中的自訂Canvas控制項：

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

 

結果：