Question

我发现here DropShadows不会在固定Height的组件上溢出。

我尝试在每个容器中添加Somme ClipToBounds="False"，但似乎不起作用。

如果使用以下代码创建新项目，您将看到问题：

<Window .... >
    <StackPanel x:Name="Sp2" Margin="20" Height="47" ClipToBounds="False">
        <Rectangle Height="40" Fill="Purple" Margin="4" ClipToBounds="False">
            <Rectangle.Effect>
                <DropShadowEffect Opacity=".4" BlurRadius="13" ShadowDepth="4" Direction="288"/>
            </Rectangle.Effect>
        </Rectangle>
    </StackPanel>
</Window>

这是问题的屏幕截图：左边是我想要的，阴影在固定高度的组件上溢出，右边是我拥有的。

当我在一个团队中工作时，我正在为我们的应用程序开发每个UI组件，我希望团队中的其他人不必注意这些细节。我们如何避免这种行为？如果不能，如何避免这种削波效应呢？

Answer 1

解决此问题的一种可能性类似于解决另一个问题，当尝试将效果应用于包含文本的控件并且文本变得模糊时。这个想法是通过将效果应用到其他东西来分离，同时确保外观看起来像效果已经应用到您需要的地方。

根据您的情况，您可以执行以下操作：

<Grid>
    <Rectangle Width="{Binding ActualWidth, ElementName=rect}"
               Height="{Binding ActualHeight, ElementName=rect}"
               Fill="Green">
        <Rectangle.Effect>
            <DropShadowEffect ShadowDepth="30" />
        </Rectangle.Effect>
    </Rectangle>
    <StackPanel Margin="20" Height="47">
        <Rectangle x:Name="rect" Height="40" Fill="Purple" Margin="4">

            <!-- remove effect from here -->

        </Rectangle>
    </StackPanel>
</Grid>

效果不再是在嵌套矩形上，而是在视觉树中的Rectangle（由于其透明）之下添加的某些元素（我使用过StackPanel）上。如果您这样做，那么阴影现在可以将自身扩展到整个网格（需要整个窗口大小）。

Answer 2

您可以重写GetLayoutClip（）以停止大多数内容的剪切。

如此处所述。

http://drwpf.com/blog/2007/12/28/cliptoboundsmaybe/

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace wpf_99
{
public class NoClipStackPanel : StackPanel
{
    protected override Geometry GetLayoutClip(Size layoutSlotSize)
    {
        return ClipToBounds ? base.GetLayoutClip(layoutSlotSize) : null;
    }
    }
}

标记

<Grid>
    <local:NoClipStackPanel x:Name="Sp2" Margin="20" Height="47" ClipToBounds="False">
        <Rectangle Height="40" Fill="Purple" Margin="4" ClipToBounds="False">
            <Rectangle.Effect>
                <DropShadowEffect Opacity=".4" BlurRadius="13" ShadowDepth="4" Direction="288"/>
            </Rectangle.Effect>
        </Rectangle>
    </local:NoClipStackPanel>
</Grid>

如何从固定高度的容器溢出阴影

2 个答案: