XAML border dropdownshadow not working as expected

Question

I trying to create a drop down shadow effect for my top bar, but it isn't working how I wanted. The problem is when i change the main view background to a different color the drop down shadow effect got deleted.

How I want it:

How it is:

The XAML code:

<Grid>
    <Grid.RowDefinitions>
        <!--TopBar-->
        <RowDefinition Height="106"
                       x:Name="Top_Bar"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    
    <!--Top Bar stuff-->
    <Border Grid.Row="0"
            BorderBrush="White"
            BorderThickness="1">
        <Border.Effect>
            <DropShadowEffect BlurRadius="10"
                              ShadowDepth="4"/>
        </Border.Effect>
    </Border>
    

    <!--Side Bar and MainView-->
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="128"
                              x:Name="SideBar"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>


        <!--Side Bar stuff-->
        <Border Grid.Column="0">
        </Border>
        
        <!--Main View stuff-->
        <Border Grid.Column="1"
                Background="#F2F2F2">
            
        </Border>
    </Grid>
</Grid>

Answer 1

There are two issues with your code as it stands:

1 - The Border element needs a background

Transparent elements do not throw backgrounds, so you need to add a background to the border. This will create something that throw the shadow.

Without background:

With Background="White"

2 - Increase the Panel.ZIndex

The items at the top of the codefile are rendered first, and those lower down are rendered "on top". To fix this, you can set Panel.ZIndex="1" to force the element to load "on top" of all the others, since the default value is 0.

Solution

Changing your <!--Top Bar stuff--> as follows

<!--Top Bar stuff-->
<Border Grid.Row="0" BorderBrush="White" BorderThickness="1" Background="White" Panel.ZIndex="1">
    <Border.Effect>
        <DropShadowEffect BlurRadius="10" ShadowDepth="4" />
    </Border.Effect>
</Border>

Resulted in: