Canvas improperly overlaying a TextBlock component inside a DockPanel

Question

In the image here, each block with a number in it represents a laser. These blocks are laid out on a canvas inside a DockPanel. Also inside the DockPanel docked to the top is the red TextBlock that you can see is hiding behind the laser map canvas. Why is this happening? The TextBlock is docked to the top of the DockPanel and canvas has no dock setting, therefore it should fill the rest of space. Also of note: I had to put the DockPanel inside a ViewBox in order for the whole center screen space to scale properly on window resizes. Then I had to put that ViewBox inside a ScrollViewer to allow scroll bars to appear when needed.

Here is the XAML Code for the center screen (Note: Child of the Window is a DockPanel. Menu is docked to the top, left-hand button panel is docked to the left, right-hand button panel is docked to the right, the status bar is docked to the bottom and everything you see in the center screen is defined by the following XAML code)

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

Any help in solving this issue will be greatly appreciated.

Regards,

Kyle

Answer 1

This has to do with the way that a ViewBox works, in particular with the Canvas element. The ViewBox is used to resize child elements, as I'm sure you're aware. There are 2 issues with the Canvas element:

1. The default Height and Width are 0, which means that the TextBlock will get all the space.
2. The Canvas element lets you draw outside of its own boundaries, so even if your canvas is tiny or not even visible, you would be allowed to render your grid of numbers.

The quickest solution is to set VerticalAlignment on the ViewBox:

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

You could set a Height on the Canvas, but I think this is less ideal because you don't want to change this dynamically with window resize.