ボーダーの周りの不明なクリッピング

Question

私はGridレイアウトを持っています。 1行にはBorderがあり、その内側にはToggleButton（負の左余白があり、境界線の半分に現れるようになっています）。国境にDropShadowEffectを追加しました。何かがシャドーエフェクトとトグルボタンを境界線の外側で切り取っているようです。下のコードと画像を参照してください。ボタンがクリップなっているとドロップシャドウがクリップなっている場合、右の赤の矢印が示しているところ

<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

このクリッピングは、内側の余白に余裕がなく、余白に余裕がない場合にのみ発生します。ブラウザウィンドウを十分小さくサイズ変更した場合、スクリーンショットの動作を再現することができました。

あなたの場合、高さが足りないと思われます。十分な幅がない場合も同様の効果があります。

なぜこの境界のクリッピングが起こっているのか分かりません。しかし、 属性MinWidth="440"とMinHeight="160"（内側のグリッドとその余白の幅と高さ）を外側のGridに追加した場合、ブラウザウィンドウのサイズをどれだけ小さくしてもクリッピングは再現できなくなりました。方向。