Unknown clipping around Border
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 Cli开发者_如何学运维ck="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>
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?
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.
精彩评论