边界附近的未知剪辑

Question

我有Grid布局。在一行中，我有一个Border，里面有一个ToggleButton（左边距为负，因此它看起来在边框外一半）。我已将DropShadowEffect添加到边框。似乎有些东西正在剪切阴影效果和边界外的togglebutton。请参阅下面的代码和图片。

 <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>

左侧红色箭头显示按钮被剪裁的位置，右侧红色箭头显示阴影被剪裁的位置。到底是怎么回事？我该如何解决这个问题？

Answer 1

似乎只有在内部Grid加上其边距没有足够空间时才会发生此裁剪。如果我将浏览器窗口调整得足够小，我能够重现屏幕截图中的行为。

在您的情况下，似乎没有足够的高度。如果没有足够的宽度，也会发生类似的效果。

我不确定为什么会出现这种边界剪辑。但是，我发现如果 我将属性MinWidth="440"和MinHeight="160"（内部网格的宽度和高度加上其边距）添加到外部Grid，无论我调整多小，我都无法重现裁剪任何方向的浏览器窗口。