Using shadows in a desktop application on WinUI 3

Question

can you please explain how to use shadows in a desktop application on WinUI 3? I have looked at the MSDN documentation and it suggests using the ThemeShadow and DropShadow classes. I figured out the ThemeShadow class and it works, but it does not allow you to customize the shadow. Therefore, I need the DropShadow class, and with it, I could no longer figure it out. MSDN gives this simple example of using a class:

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

I copied this code to myself and it did not work for me for the reason that my project does not understand what kind of ImageLoaderFactory class it is. As I understand it, this class loads a picture, which, in principle, I don’t need. I removed this line, but nothing seems to work without it. I do not understand the purpose of the classes that are used in this example and do not understand the principle of creating a shadow, so I could not adapt the example to my needs. It would be great if someone could explain to me how to use all this. I used to work on WPF and adding a shadow there was something trivial. It was only necessary to add an effect to the Effect property of any element and the shadow worked perfectly. But here everything is different. Somehow too difficult. I would like to know if there is some easier official way to enable the shadow. And I would still like to understand how to work with the DropShadow class and include shadows on any element, and in particular, at the moment my task is to add a shadow to TextBlock, in order to increase the readability of text in bright areas.

Among other things, a bonus question that is slightly related to the previous one. I also couldn't find a way to set the text stroke for the same readability in the light areas. On WPF, there was a special property for this, but on WinUI 3, this simply does not exist. Help me please.

UPDATE:

At the moment my code looks like this:

<Grid x:Name="_MainGrid">
    <Grid.RowDefinitions>
        <RowDefinition x:Name="_TitleBarGridRow" Height="32"/>
        <RowDefinition x:Name="_MainFrameRow" Height="*"/>
    </Grid.RowDefinitions>
    <Grid x:Name="_TitleBarGrid" Grid.Row="0"/>
    <Rectangle x:Name="MyRect1" Grid.Row="1" Width="500" Height="500" Fill="White"></Rectangle>
    <Rectangle x:Name="MyRect2" Grid.Row="1" Width="250" Height="250" Fill="Green"></Rectangle>
</Grid>

var compositor = ElementCompositionPreview.GetElementVisual(MyRect2).Compositor;

SpriteVisual visual = compositor.CreateSpriteVisual();
visual.Size = new Vector2(250, 250);

DropShadow dropShadow = compositor.CreateDropShadow();
dropShadow.BlurRadius = 50;
dropShadow.Offset = new Vector3(0, 0, 0);
dropShadow.Color = Colors.Black;

visual.Shadow = dropShadow;

// Apply the drop shadow to a UI element
((ContainerVisual)ElementCompositionPreview.GetElementVisual(MyRect2)).Children.InsertAtTop(visual);

Thanks to this, the shadow is displayed but it is displayed on top of the rectangle2, while I expect it to be displayed below it.

enter image description here

Answer 1

The code in the link you provided, shows a simple way to create shadows. This is an example but with Buttons.

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