Canvas在DockPanel中不正确地覆盖TextBlock组件

Question

在此处的图像中，每个带有数字的块表示激光。这些块布局在DockPanel内的画布上。在停靠在顶部的DockPanel内部，您可以看到的红色TextBlock隐藏在激光地图画布后面。为什么会这样？ TextBlock停靠在DockPanel的顶部，画布没有停靠设置，因此它应该填充剩余的空间。另外值得注意的是：我必须将DockPanel放在ViewBox中，以便整个中心屏幕空间在窗口调整大小时正确缩放。然后我必须将ViewBox放在ScrollViewer中，以便在需要时显示滚动条。

以下是中央屏幕的XAML代码（注意：窗口的子项是DockPanel。菜单停靠在顶部，左侧按钮面板停靠在左侧，右侧按钮面板停靠在右边，状态栏停靠在底部，您在中心屏幕中看到的所有内容都由以下XAML代码定义）

    <ScrollViewer
        Name="centerScreenScrollViewer"
        VerticalScrollBarVisibility="Auto"
        HorizontalScrollBarVisibility="{Binding IsScrollbarsVisible, Converter={StaticResource BoolToScrollbarVisConverter}, FallbackValue=Hidden}">
        <Viewbox>
            <DockPanel
                LastChildFill="True">
                <TextBlock
                    DockPanel.Dock="Top"
                    Name="tbkFullVisual"
                    Style="{StaticResource tbkStyleBlue}"
                    Foreground="Red"
                    IsEnabled="{Binding FullVisual}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Top"
                    FontSize="24">
                    *** This Print Requires Full Visual Inspection! ***
                </TextBlock>
                <Canvas x:Name="mapCanvas">
                    <ContentPresenter Content="{Binding MapCanvas}"/>
                </Canvas>
            </DockPanel>
        </Viewbox>
    </ScrollViewer>

非常感谢您解决此问题的任何帮助。

此致

凯尔

Answer 1

这与ViewBox的工作方式有关，尤其是与Canvas元素的工作方式有关。 ViewBox用于调整子元素的大小，我相信您已经知道了。 Canvas元素有两个问题：

1. 默认Height和Width为0，这意味着TextBlock将获得所有空间。
2. Canvas元素允许您在自己的边界之外绘制，因此即使您的画布很小或甚至不可见，您也可以渲染数字网格。

最快的解决方案是在VerticalAlignment上设置ViewBox：

<Viewbox VerticalAlignment="Top">
    ...
</Viewbox>

您可以在Canvas上设置Height，但我认为这不太理想，因为您不希望在窗口调整大小的情况下动态更改此内容。