如何在 UWP 中为按钮创建投影效果答案

【问题标题】：How to create a drop shadow effect for the button in UWP如何在 UWP 中为按钮创建投影效果
【发布时间】：2016-12-26 19:23:53
【问题描述】：

为元素创建投影的代码：

var compositor = ElementCompositionPreview.GetElementVisual(this.btn).Compositor;
var spriteVisual = compositor.CreateSpriteVisual();
spriteVisual.Size = new Vector2((float)btn.ActualWidth, (float)btn.ActualHeight);
var dropShadow = compositor.CreateDropShadow();
dropShadow.Offset = new Vector3(10, 10, 0);
dropShadow.Color = Colors.Orange;
spriteVisual.Shadow = dropShadow;
ElementCompositionPreview.SetElementChildVisual(this.btn, spriteVisual);

但阴影与按钮重叠。如何使阴影不重叠按钮？

【问题讨论】：

问题是由您致电SetElementChildVisual引起的。如文档所述，“[t]他 Visual 被添加为最后一个子元素，因此 在 z 顺序中的其余元素之上。”您必须确保您的阴影在 z 顺序中的按钮视觉下方。
我尝试在底部插入 spriteVisual。 compositor.CreateContainerVisual().Children.InsertAtBottom(spriteVisual);但阴影仍然与按钮重叠。
stackoverflow.com/a/41283323/1172352 的答案指向一个开源库，如果您更喜欢这种方法，它可以让您在 XAML 标记中以声明方式执行此操作。

标签： c# .net uwp

【解决方案1】：

你有两个选择：

要么为你的 spriteVisual

创建画笔

    var compositor = ElementCompositionPreview.GetElementVisual(Button).Compositor;
    var spriteVisual = compositor.CreateSpriteVisual();
    spriteVisual.Size = new Vector2((float)Button.ActualWidth, (float)Button.ActualHeight);
    var dropShadow = compositor.CreateDropShadow();
    dropShadow.Offset = new Vector3(10, 10, 0);
    dropShadow.Color = Colors.Orange;
    var colorBrush = compositor.CreateColorBrush(Colors.Green);
    spriteVisual.Shadow = dropShadow;
    spriteVisual.Brush = colorBrush;

    ElementCompositionPreview.SetElementChildVisual(Button, spriteVisual);

或者在 Button 和 SetElementChildVisual 到 Shadow 画布

之前为您的 spriteVisual 创建 XAML 容器

<Grid>
    <Canvas x:Name="Shadow"/>
    <Button x:Name="Button" Width="300" Height="100" Background="Green" HorizontalAlignment="Center"/>
</Grid>

【讨论】：