Search code examples
c#wpfshadowcontentcontrol

ContentControl Shadow

We have a design specification for our application, in which we have a header defined for each dialog screen.

The header control is generally added to the dialog window in a table with the header in row 0, content in row 1 and sometimes a footer in row 2.

The design requires the header to have a box shadow which falls down into the content of the window:

Image of design

I thought this would be as simple as adding a drop shadow to the border, but this does not show up when I add content (ignore the color for now I was trying to ensure I could see what I was adding:

<ControlTemplate x:Key="DialogHeader" TargetType="{x:Type ContentControl}">

<Border x:Name="bdrOuter"
        Height="72"
        Style="{DynamicResource DialogHeader.Border}">

    <Border.Effect>

        <DropShadowEffect ShadowDepth="5"
                          Color="Yellow"
                          Direction="270"
                          BlurRadius="0.04" />

    </Border.Effect>

    <Grid Margin="4">

Can anyone advise on this.

Solution

  • So you have header and content.

    If your content container has its own background, it could disable the shadow dropping from the header above. In this case you could try to set Panel.ZIndex property to your content container part like in example below.

    You could also try to leave background of your content transparent, then setting Panel.ZIndex maybe would not be necessary.

    The following code works for me:

    <StackPanel>
    <Border x:Name="MyBorder" Width="50" Height="15" Background="LightBlue">
        <Border.Effect>
            <DropShadowEffect ShadowDepth="4" Direction="270" Opacity="0.5"/>
        </Border.Effect>
        <TextBlock Text="Test"/>
    </Border>

    <StackPanel x:Name="MyContentContainer" Background="Yellow" Panel.ZIndex="-1">
        <TextBlock Text="Test2"></TextBlock>
    </StackPanel>
</StackPanel>

    DropShadowEffect