DropShadowEffect and CornerRadius Problem in WPF

Question

I have an Window in which I want to apply drop shadow effect alongside the round corner radius. so far I'm doing something like this:

 <Grid Margin="10" x:Name="MainGrid">
    <Grid.OpacityMask>
        <VisualBrush Visual="{Binding ElementName=MaskBorder}"/>
    </Grid.OpacityMask>

    <Border x:Name="MaskBorder" Background="#EEF0F8" CornerRadius="10" >
        <Border.Effect>
            <DropShadowEffect Color="Gray" Opacity=".50"  ShadowDepth="10" />
        </Border.Effect>
    </Border>

    <Grid x:Name="ContentGrid">
        
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <TextBlock Grid.Row="0" Background="Red"/>

        <TextBlock Grid.Row="1" Background="Blue"/>
    </Grid>

</Grid>

but the problem is when I zoom in to to result I see this on right bottom corner. How can i fix this problem. I tried many solutions but nothing worked for me.

Clemens · Accepted Answer · 2023-01-09T14:00:19.110

3

Set the Clip property of the inner Grid in a SizeChanged event handler:

private void ContentGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    ContentGrid.Clip = new RectangleGeometry(new Rect(e.NewSize), 10, 10);
}

XAML:

<Grid Margin="10" x:Name="MainGrid">
    <Grid.Effect>
        <DropShadowEffect Color="Gray" Opacity=".50" ShadowDepth="10" />
    </Grid.Effect>

    <Grid x:Name="ContentGrid" SizeChanged="ContentGrid_SizeChanged">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Background="Red"/>
        <TextBlock Grid.Row="1" Background="Blue"/>
    </Grid>
</Grid>

edited Jan 09 '23 at 14:00

answered Jan 09 '23 at 13:43

Clemens

123,504
12
155
268

Thank you. Is not there any solution to work around code-behind part and do it directly in xaml? – Inevitable Jan 09 '23 at 15:02
I am not aware of any. Unfortunately the RenderedGeometry property (which could be used for Clip) of a Rectangle does not notify about updated values. Setting the Clip property in code behind also keeps the XAML clear of any otherwise useless elements. – Clemens Jan 09 '23 at 15:06
Right. I appreciate your help and mark it as a solution :) – Inevitable Jan 09 '23 at 15:18

DropShadowEffect and CornerRadius Problem in WPF

1 Answers1