UWP 阴影效果

引用Microsoft.Toolkit.Uwp.UI.Controls,使用DropShadowPanel

<controls:DropShadowPanel Color="Black"
                            OffsetX="10"
                            OffsetY="10"
                            BlurRadius="50"
                            ShadowOpacity=".7"
                            Width="220"
                            Height="120"
                            HorizontalContentAlignment="Stretch"
                            VerticalContentAlignment="Stretch">
    <Border CornerRadius="45" Background="#F6F6F6">
        <TextBlock Text="Create Shadow(实现阴影)" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
    </Border>
</controls:DropShadowPanel>

效果

说明
BlurRadius(double):获取或设置投影的模糊半径
Color(Color):获取或设置投影的颜色
IsSupported(bool):获取平台是否支持投影的值
OffsetX(double):获取或设置投影的 x 偏移量
OffsetY(double):获取或设置投影的 y 偏移量
OffsetZ(double):获取或设置投影的 z 偏移量
ShadowOpacity(double):获取或设置投影的不透明度

示例代码

CreateShadowDemo.xaml

参考资料

DropShadowPanel
UWP: Create shadow in XAML [duplicate]

posted @ 2022-02-17 20:00  Lulus  阅读(192)  评论(0编辑  收藏  举报