开发者

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>

Unknown clipping around Border

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜