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

Question

如何在 UWP 中使用 DropShadow 设置精确的 .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);

输出是：

我不知道这里发生了什么。我尝试为矩形应用阴影，但这里的整个内容都填充了 shaodw 颜色。这里有什么问题？

Answer 1

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

要制作投影，您可以使用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。你也可以使用 UWP ThemeShadow 来实现控件的阴影。更多信息请参考document，请注意ThemeShadow 是在 Windows 10 版本 1903 中引入的，您需要将应用的最低版本设置为 1903。