Question

I know what I want to do is probably easy and obvious but I cannot work it out. I have a grid with two rows, the top row has a border element which fills the row (Fixed height of 30). The second row (Fixed Height of 100) currently contains an empty DockPanel with a white background (this will contain ContentControl for dynamic controls).

I added a drop shadow effect to the border in the first row, with a direction of 270 to drop the shadow below the border. It is barely visible which is not a surprise as there is not enough space to accommodate the shadow. What I want is for the shadow to overflow from the row and overlap the DockPanel in the row below.

I sort of achieved this by having the containing grid with a white background as well and then add a bottom margin to the border element to accommodate the shadow. Whilst this looks OK, it is not really what I’m trying to achieve.

Apologies for no code example, I had to leave work but this is still bothering me.

Thanks in advance.

Paul

Answer 1

Since Grid is a Panel, it inherits the Panel.ZIndex attached property. It’s possible to use this property to set the Z-index literally, rather than inferring it from the XAML order as Phil does in his example.

The non-working example can be fixed up with a pair of attached properties:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Border Background="PaleGreen" BorderBrush="DarkGreen" BorderThickness="5"  Panel.ZIndex="2">
        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>
    </Border>
    <DockPanel Grid.Row="1" Background="White" Panel.ZIndex="1"/>
</Grid>

Either approach does the same thing, but Panel.ZIndex can be helpful for formatting concerns, or altering the Z-index programmatically.