Shadow without "spill"

Question

I want to create a Shadow that goes just in one direction without "spilling".

As you can see on the left and right side the shadow is "spilling" but I want the shadow to just go up and not to the sides. How can I do that? This is the Code I have so far:

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

Maybe fill a rectangular area (e.g. a Rectangle) with a LinearGradientBrush from Black to Transparent. — Clemens, Sep 24 '20 at 14:41

score 0 · Accepted Answer · answered Sep 25 '20 at 11:23

Thanks to the comment from Clemens and after some trying I found an answer. I had forgotten that with a negative Margin you can display a Control "outside" the bounds.

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

Shadow without "spill"

1 Answers1