Home/ Questions/Q 6320033
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T15:54:07+00:00

I have a Grid layout. In one row, I have a Border and inside

  • 0

I have a Grid layout. In one row, I have a Border and inside it a ToggleButton(with negative left margin so that it appears half outside the border). I’ve added DropShadowEffect to the border. Something seems to be clipping the shadow effect and the togglebutton outside the border. Please refer to the code and the image below.

 <Grid Margin="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="140*" />
            <RowDefinition Height="500"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Background="LightGray">
            <Border Background="{StaticResource BorderFill}" Height="150" Width="400" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="20,0,20,10" BorderBrush="#FF999999" BorderThickness="1">
                <Border.Effect>
                    <DropShadowEffect Color="Gray" BlurRadius="40" ShadowDepth="0.1"/>
                </Border.Effect>
                <ToggleButton Click="MenuToggleButtonClick" Margin="-6.5,0,0,5" Style="{StaticResource ExpandCollapseButtons}" Width="Auto" Height="Auto" x:Name="MenuToggleButton" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
            </Border>
        </Grid>

clipping of shadow and button

The left red arrow shows where the button is getting clipped and the right red arrow shows where the dropshadow is getting clipped. What is going on? How can I fix this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It appears that this clipping only occurs when there isn’t enough space for the inner Grid plus its margin. I was able to reproduce the behaviour in your screenshot if I resized the browser window small enough.

    In your case, it appears there isn’t enough height. A similar effect happens if there isn’t enough width.

    I’m not sure why this border clipping is happening. However, I found that if
    I added the attributes MinWidth="440" and MinHeight="160" (the width and height of the inner grid plus its margin) to the outer Grid, I could no longer reproduce the clipping no matter how small I resized the browser window in any direction.

    • 0