没有 "spill" 的影子

Question

我想创建一个只朝一个方向移动而不会“溢出”的阴影。

正如您在左侧和右侧看到的那样，阴影正在“溢出”，但我希望阴影向上而不是两侧。我怎样才能做到这一点？这是我目前的代码：

<UserControl x:Class="Client.Views.CartItemToolBar"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:ctrl="clr-namespace:Client.Controls"
         xmlns:local="clr-namespace:Client.Views"
         mc:Ignorable="d">
<Grid Height="56" Background="{StaticResource color_white}" Margin="2,0">
    <Border Background="Transparent" BorderBrush="{Binding Path=Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}" BorderThickness="0,10,0,0">
        <Border.Effect>
            <DropShadowEffect ShadowDepth="0" BlurRadius="16" Direction="90" />
        </Border.Effect>
    </Border>
    <StackPanel Orientation="Horizontal" Background="{Binding Path=Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}">
        <ctrl:TestButton Style="{StaticResource ButtonCartPositionAction}" PosAction="CartItem/Minus">
            <ctrl:IconViewbox IconData="{StaticResource IconPathNumericNegative1}" IconSize="20" RenderTransformOrigin="0.5,0.5" >
                <ctrl:IconViewbox.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform X="-4" Y="-4"/>
                    </TransformGroup>
                </ctrl:IconViewbox.RenderTransform>
            </ctrl:IconViewbox>
        </ctrl:TestButton>
        <ctrl:TestButton Style="{StaticResource ButtonCartPositionAction}" PosAction="CartItem/Plus" >
            <ctrl:IconViewbox IconData="{StaticResource IconPathNumericPositive1}" IconSize="20" RenderTransformOrigin="0.5,0.5" >
                <ctrl:IconViewbox.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform X="-4" Y="-4"/>
                    </TransformGroup>
                </ctrl:IconViewbox.RenderTransform>
            </ctrl:IconViewbox>
        </ctrl:TestButton>
        <ctrl:TestButton Style="{StaticResource ButtonCartPositionAction}" Content="Change Price" PosAction="CartItem/ChangePrice" />
        <ctrl:TestButton Style="{StaticResource ButtonCartPositionAction}" PosAction="UI/SwitchTo/CartItemDiscount">
            <Grid>
                <Label Margin="0" Padding="0">Pos Discount</Label>                    
            </Grid>
        </ctrl:TestButton>            
        <ctrl:TestButton Style="{StaticResource ButtonCartPositionAction}" PosAction="CartItem/Remove">
            <ctrl:IconViewbox IconData="{StaticResource IconPathTrashCan}" IconSize="20" />
        </ctrl:TestButton>
    </StackPanel>        
</Grid>

Answer 1

感谢 Clemens 的评论，经过一番尝试，我找到了答案。我忘记了使用负边距可以在边界“外部”显示控件。

<UserControl x:Class="Client.Views.CartItemToolBar"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:ctrl="clr-namespace:Client.Controls"
     xmlns:local="clr-namespace:Client.Views"
     mc:Ignorable="d">
<Grid Margin="2,0,0,0">
    <Rectangle Margin="0,-12,0,56">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                <GradientStop Color="#DDDDDD" Offset="0" />
                <GradientStop Color="Transparent" Offset="1" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Grid Height="56" Background="{StaticResource color_white}">
        <StackPanel Orientation="Horizontal" Background="{Binding Path=Background, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}">
            <ctrl:TestButton Style="{StaticResource ButtonCartPositionAction}" PosAction="CartItem/Minus">
                <ctrl:IconViewbox IconData="{StaticResource IconPathNumericNegative1}" IconSize="20" RenderTransformOrigin="0.5,0.5" >
                    <ctrl:IconViewbox.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform X="-4" Y="-4"/>
                        </TransformGroup>
                    </ctrl:IconViewbox.RenderTransform>
                </ctrl:IconViewbox>
            </ctrl:TestButton>
            <ctrl:TestButton Style="{StaticResource ButtonCartPositionAction}" PosAction="CartItem/Plus" >
                <ctrl:IconViewbox IconData="{StaticResource IconPathNumericPositive1}" IconSize="20" RenderTransformOrigin="0.5,0.5" >
                    <ctrl:IconViewbox.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform X="-4" Y="-4"/>
                        </TransformGroup>
                    </ctrl:IconViewbox.RenderTransform>
                </ctrl:IconViewbox>
            </ctrl:TestButton>
            <ctrl:TestButton Style="{StaticResource ButtonCartPositionAction}" Content="Change Price" PosAction="CartItem/ChangePrice" />
            <ctrl:TestButton Style="{StaticResource ButtonCartPositionAction}" PosAction="UI/SwitchTo/CartItemDiscount">
                <Grid>
                    <Label Margin="0" Padding="0">Pos Discount</Label>                    
                </Grid>
            </ctrl:TestButton>            
            <ctrl:TestButton Style="{StaticResource ButtonCartPositionAction}" PosAction="CartItem/Remove">
                <ctrl:IconViewbox IconData="{StaticResource IconPathTrashCan}" IconSize="20" />
            </ctrl:TestButton>
        </StackPanel>        
    </Grid>
</Grid>

没有 "spill" 的影子

Shadow without "spill"

c#

wpf

xaml

dropshadoweffect