在 WinUI 3 上的桌面应用程序中使用阴影

Question

您能解释一下如何在 WinUI 3 的桌面应用程序中使用阴影吗？我查看了 MSDN 文档，它建议使用 ThemeShadow 和 DropShadow 类。我发现了 ThemeShadow 类并且它可以工作，但它不允许您自定义阴影。因此，我需要 DropShadow 类，有了它，我就无法再弄清楚了。 MSDN 给出了使用类的简单示例：

private async void InitComposition()
{
  _compositor = ElementCompositionPreview.GetElementVisual(MyGrid).Compositor;
  _imageLoader = ImageLoaderFactory.CreateImageLoader(_compositor);

  //Create surface brush and load image
  CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
  surfaceBrush.Surface = await _imageLoader.LoadImageFromUriAsync(new Uri("ms-appx:///Assets/cat.jpg"));

  //Create sprite visual
  SpriteVisual visual = _compositor.CreateSpriteVisual();
  visual.Brush = surfaceBrush;
  visual.Size = new Vector2(270, 200);

  //Create drop shadow
  DropShadow shadow = _compositor.CreateDropShadow();
  shadow.BlurRadius = 5;
  shadow.Offset = new Vector3(15, 15, -10);
  shadow.Color = Colors.DarkGray;

  //Associate shadow with visual
  visual.Shadow = shadow;
}      

我将此代码复制给自己，但它对我不起作用，因为我的项目不理解它是什么类型的 ImageLoaderFactory 类。据我了解，这个类加载一张图片，原则上我不需要。我删除了这一行，但没有它似乎什么都不起作用。我不理解此示例中使用的类的用途，也不理解创建阴影的原理，因此我无法使该示例适应我的需要。如果有人能向我解释如何使用这一切，那就太好了。我曾经在 WPF 上工作，添加阴影是一件微不足道的事情。只需要向任何元素的 Effect 属性添加一个效果，阴影就可以完美地工作。但这里一切都不同了。不知何故太难了。我想知道是否有一些更简单的官方方法来启用阴影。我仍然想了解如何使用 DropShadow 类并在任何元素上包含阴影，特别是，目前我的任务是向 TextBlock 添加阴影，以提高明亮区域中文本的可读性。

除此之外，还有一个与上一个问题略有相关的奖励问题。我也找不到一种方法来设置文本笔画以在明亮区域中具有相同的可读性。在 WPF 上，有一个特殊的属性可以实现这一点，但在 WinUI 3 上，这个属性根本不存在。请帮助我。

Answer 1

您提供的链接中的代码显示了创建阴影的简单方法。这是一个示例，但带有

Button

s。

<Grid>
    <Grid.Resources>
        <ThemeShadow x:Name="SharedShadow" />
    </Grid.Resources>
    <Grid
        x:Name="BackgroundGrid"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
    <Button
        x:Name="Rectangle1"
        Width="100"
        Height="100"
        HorizontalAlignment="Center"
        Shadow="{StaticResource SharedShadow}" />
    <Button
        x:Name="Rectangle2"
        Width="100"
        Height="100"
        HorizontalAlignment="Center"
        Shadow="{StaticResource SharedShadow}" />
</Grid>

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
    }

    private void MainPage_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
    {
        SharedShadow.Receivers.Add(BackgroundGrid);
        Rectangle1.Translation += new Vector3(0, 0, 16);
        Rectangle2.Translation += new Vector3(120, 0, 32);
    }
}