c# - 没有“溢出”的阴影
问题描述
正如您在左侧和右侧看到的那样,阴影正在“溢出”,但我希望阴影向上而不是向两侧。我怎样才能做到这一点?这是我到目前为止的代码:
<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>
解决方案
感谢克莱门斯的评论,经过一番尝试,我找到了答案。我忘记了使用负边距可以在边界“外部”显示控件。
<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>
推荐阅读
- xpath - SoapUI 中的查询匹配不适用于正确的 Xpath
- c# - Lambda 表达式中的条件
- javascript - Angular RxJs Observable 避免请求,直到我得到先前的响应
- javascript - 使用增量内部循环不会返回预期结果
- reactjs - AWS 中的 403 OPTIONS Cors 错误,预检请求
- html - 如何调整左div边框
- angular6 - 预填充 Angular 材质选择具有分组
- postgresql - CMD 无法运行 .exe 并且在代码块中包含外部库 不使用构建选项
- python - Python多线程套接字服务器无法接收来自2个用户的消息
- javascript - 如何从数组 1 中删除项目并将项目推送到数组 2