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

【问题标题】：How to overflow a shadow from a fixed Height container如何从固定高度容器溢出阴影
【发布时间】：2018-12-20 12:53:55
【问题描述】：

我发现hereDropShadows 不能溢出带有固定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 组件，我希望团队中的其他人不必关注这些细节。我们如何避免这种行为，如果我们不能避免这种剪裁效应的指导方针是什么？

【问题讨论】：

还是related吗？还是新的问题？在任何情况下，考虑添加一些东西来演示问题：代码、xaml、屏幕截图（它是如何以及你想要什么）。
@Sinatr Woops 抱歉，我忘了添加代码部分，我的错，我编辑了帖子
使用您的 xaml 时应该注意什么？你能用文字解释什么是错的或（更好地）截图吗？
换句话说，如果我删除其中一个父容器（StackPanel 更容易）它可以工作（阴影没有被剪掉）。你必须稍微提高一下minimal reproducible example 的技能，使用<DropShadowEffect ShadowDepth="30" /> 更容易看到;)
至于为什么-我猜wpf中效果的性质，着色器最多只能接收父容器，并且只能在其中绘制。请参阅workaround，或者您可以使用“浮动重叠技术”：在更高级别上设置Rectangle（与StackPanel 相同）并在视图中使用绑定来定位矩形，就好像它在里面一样。

标签： c# wpf xaml

【解决方案1】：

您可以覆盖 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】：

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

在你的情况下，你可以这样做：

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

效果不再是嵌套矩形，而是在可视树中添加到StackPanel（因为它是透明的）下方的某些元素（我使用了Rectangle）上。如果你这样做，那么阴影现在可以将自身扩展到整个网格（占用整个窗口大小）。

【讨论】：