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?

1 Answer 1

0

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.

2
  • What If I cant give the grid row the entire space and need for part of it to be hidden?
    – Aks
    Aug 16, 2011 at 4:47
  • @Aks: you could try wrapping the outer Grid in another Grid, perhaps? Aug 16, 2011 at 20:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.