Как переполнить тень от контейнера фиксированной высоты

Question

Я обнаружил здесь , что 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>

Вот скриншот проблемы: Слеваэто то, что я хочу, тень, переполняющая компонент с фиксированной высотой, и справа это то, что у меня есть.

Работая в команде, я разрабатываю все компоненты пользовательского интерфейса для нашего приложения, и я быКак и другим людям из моей команды, не нужно обращать внимание на подобные детали.Как мы можем избежать этого поведения, и если мы не можем, каковы были бы рекомендации, чтобы избежать этого эффекта отсечения?

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

Answer 2

Одна из возможностей решения этой проблемы аналогична решению другой проблемы, когда при попытке применить эффекты к элементу управления, содержащему текст, текст становится размытым.Идея состоит в том, чтобы отсоединить эффект, применяя его к чему-то другому, обеспечивая при этом, чтобы визуально он выглядел так, как будто эффект был применен там, где он вам нужен.

В вашем случае вы можете сделать что-то вродеthis:

<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 (с момента его прозрачности) в визуальном дереве.Если вы делаете это так, тень теперь может распространиться на всю сетку (которая занимает весь размер окна).