如何为UWP中的按钮创建阴影效果

Code that creates drop shadow for the element:

为元素创建投影的代码：

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

But shadow overlaps button. How to make shadow not to overlap button? 如何为UWP中的按钮创建阴影效果

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

1 个解决方案

#1

You have 2 options:

你有2个选择：

Either you create brush for your spriteVisual

你可以为你的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);

Or create XAML container for your spriteVisual before Button and SetElementChildVisual into Shadow canvas

或者在Button和SetElementChildVisual之前为spriteVisual创建XAML容器到Shadow canvas中

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

#1