如何在 UWP 中为 UIElement 设置阴影？

Question

如何使用 DropShadow 在 UWP 中设置准确的 .css 样式，如展开、模糊、插入等？

我的.css风格：

div#myDIV {
 background-color:yellow;
 width:200px;
 height:100px;
 box-shadow:20px 20px 20px 10px red; }

和

div#myDIV {
 background-color:yellow;
 width:200px;
 height:100px;
 box-shadow:20px 20px 50px 10px pink inset;}

如果除了DropShadow还有其他方法，建议我！！

更新：

我试过像这样使用 DropShadowPanel

XAML:

<Grid  x:Name="MainGrid" Margin="100,100 0 0"> </Grid>

C# :

  Rectangle host = new Rectangle { Width = 200, Height = 200, Fill = new SolidColorBrush(Colors.White) };
  DropShadowPanel dropShadowPanel = new DropShadowPanel { };
  dropShadowPanel.Color = Color.FromArgb(255, 0, 0, 0);
  dropShadowPanel.ShadowOpacity = 0.13;
  dropShadowPanel.OffsetX = 0;
  dropShadowPanel.OffsetY = 0.8;
  dropShadowPanel.BlurRadius = 1.8;
  dropShadowPanel.IsMasked = true;
  dropShadowPanel.Content = host;
  MainGrid.Children.Add(dropShadowPanel);

输出是：

我不知道发生了什么事here.I 尝试为矩形应用阴影，但是这里整个内容都充满了 shaodw color.What 是这里的问题吗？

Answer 1

How to set exact .css styles like spread,blur,inset,etc.. in UWP using DropShadow?

要制作投影，您可以使用DropShadowPanel在xaml内接近。

这里是示例代码

<controls:DropShadowPanel BlurRadius="8"
                                  ShadowOpacity="1"
                                  OffsetX="2"
                                  OffsetY="2"
                                  Color="Black"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center"
                                  IsMasked="True">
          <TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget sem luctus, gravida diam cursus, rutrum ipsum. Pellentesque semper magna nec sapien ornare tincidunt. Sed pellentesque, turpis quis laoreet pellentesque, urna sapien efficitur nulla, at interdum dolor sapien ut odio. Sed ullamcorper sapien velit, id finibus risus gravida vitae. Morbi ac ultrices lectus. Aenean felis justo, aliquet a risus ut, condimentum malesuada metus. Duis vehicula pharetra dolor vel finibus. Nunc auctor tortor nunc, in varius velit lobortis vel. Duis viverra, ante id mollis mattis, sem mauris ullamcorper dolor, sed rhoncus est erat eget ligula. Aliquam rutrum velit et felis sollicitudin, eget dapibus dui accumsan."/>
        </controls:DropShadowPanel>

这是document that you could refer. And you could also use UWP ThemeShadow to implement control's shadow. For more please refer this document，请注意ThemeShadow 是在Windows 10 版本1903 中引入的，您需要将应用程序的最低版本设置为1903。

如何在 UWP 中为 UIElement 设置阴影？

How to set Shadow for an UIElement in UWP?

uwp

uwp-xaml