[UWP] make use GetAlphaMask shadow

Original: [UWP] make use GetAlphaMask shadow

1. Introduction #

Recently often come into contact with GetAlphaMask, so wanted to write this article describes how to use the next GetAlphaMask. In fact GetAlphaMask very limited usage scenarios, on Github can be found to fit the contents are used DropShadow, so this article also describes DropShadow based.

2. Synthesis shadow #

First introduce synthetic shadow. Compositor.CreateDropShadow () to create a DropShadow, this DropShadowDropShadow assigned to SpriteVisual the Shadow property, and then use ElementCompositionPreview.SetElementChildVisual this SpriteVisual set to the visual layer of a UIElement's, then this UIElement into the back of the elements required shadow, such a basic synthetic shadow is complete.

Specific code as follows:

 
 

  
  Copy
 
 
<Grid VerticalAlignment="Center" 
      HorizontalAlignment="Center">
    <Grid x:Name="BackgroundGrid"/>
    <Grid Background="Turquoise" 
          x:Name="Host">
        <TextBlock Text="I need shadow" 
                   Foreground="White" 
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="36"
                   Margin="16"/>
    </Grid>
</Grid>

 
 

  
  Copy
 
 
private readonly Compositor _compositor;
private readonly SpriteVisual _backgroundVisual;
private readonly DropShadow _dropShadow;
public MainPage() : base()
{
    InitializeComponent();
    _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
    
    //创建并配置DropShadow
    _dropShadow = _compositor.CreateDropShadow();
    _dropShadow.BlurRadius = 16;
    _dropShadow.Offset = new Vector3(8);

    //创建SpriteVisual并设置Shadow
    _backgroundVisual = _compositor.CreateSpriteVisual();
    _backgroundVisual.Shadow = _dropShadow;

    //将SpriteVisual放到可视化树
    ElementCompositionPreview.SetElementChildVisual(BackgroundGrid, _backgroundVisual);

    Host.SizeChanged += OnHostSizeChanged;
}

private void OnHostSizeChanged(object sender, SizeChangedEventArgs e)
{
    Vector2 newSize = new Vector2(0, 0);
    Vector3 centerPoint = new Vector3(0, 0, 0);
    if (Host != null)
    {
        newSize = new Vector2((float)Host.ActualWidth, (float)Host.ActualHeight);
        centerPoint = new Vector3((float)Host.ActualWidth / 2, (float)Host.ActualHeight / 2, 0);
    }
    _backgroundVisual.CenterPoint = centerPoint;
    _backgroundVisual.Size = newSize;
}

3. Use GetAlphaMask cut shadows #

The above code needs to be implemented shadow, but can only achieve a rectangular shadow customary in WPF and Silverlight Shape shadow or the shadow of the text are usually do not.

For example, the XAML into this, the result is not what I wanted:

 
 

  
  Copy
 
 
<Grid VerticalAlignment="Center" 
      HorizontalAlignment="Center">
    <Grid x:Name="BackgroundGrid"/>
    <TextBlock Text="I need shadow" 
                   x:Name="Host"
                   Foreground="Turquoise" 
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="36"/>
</Grid>

GetAlphaMask this time you need to use this function.

Image, TextBlock Shape and implement a method called GetAlphaMask respectively, the method returns a CompositionBrush, which represents gray scale image having a shape element.

Official when the document is described the GetAlphaMask function is simply to get a Image, TextBlock, or Shape profile, this profile can be used as DropShadow.Mask value, such DropShadow shape element GetAlphaMask can call up the same shape .

Specific code and the results are as follows, this is the effect I want:

 
 

  
  Copy
 
 
_dropShadow.Mask = Host.GetAlphaMask();

4. Use DropShadowPanel #

If you feel like writing code is too complicated, you can use the Toolkit in DropShadowPanel .

DropShadowPanel inherited from ContentControl, when it Cotnent (realized or other controls GetAlphaMask in Toolkit) is Shape, TextBlock, one of Image, calling it acquired the shape of the shadow of GetAlphaMask, otherwise it is easy to hold, the code is as follows:

 
 

  
  Copy
 
 
CompositionBrush mask = null;

if (Content is Image)
{
    mask = ((Image)Content).GetAlphaMask();
}
else if (Content is Shape)
{
    mask = ((Shape)Content).GetAlphaMask();
}
else if (Content is TextBlock)
{
    mask = ((TextBlock)Content).GetAlphaMask();
}
else if (Content is ImageExBase imageExBase)
{
    imageExBase.ImageExInitialized += ImageExInitialized;

    if (imageExBase.IsInitialized)
    {
        imageExBase.ImageExInitialized -= ImageExInitialized;

        mask = ((ImageExBase)Content).GetAlphaMask();
    }
}

_dropShadow.Mask = mask;

Following the presentation of its practices and as above, this shadow set to an element in the back ContentPresenter, it looks to achieve the shadow of Content:

 
 

  
  Copy
 
 
_border = GetTemplateChild(PartShadow) as Border;

if (_border != null)
{
    ElementCompositionPreview.SetElementChildVisual(_border, _shadowVisual);
}

 
 

  
  Copy
 
 
<Grid Background="{TemplateBinding Background}"
      BorderBrush="{TemplateBinding BorderBrush}"
      BorderThickness="{TemplateBinding BorderThickness}"
      HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
      VerticalAlignment="{TemplateBinding VerticalAlignment}">
    <Border x:Name="ShadowElement" 
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>

5. Reference #

Windows UWP applications Microsoft Docs - visualization layer used in conjunction with XAML

Shape.GetAlphaMask Method (Windows.UI.Xaml.Shapes) - Windows UWP applications Microsoft Docs

DropShadow.Mask Property (Windows.UI.Composition) - Windows UWP applications Microsoft Docs

WindowsCommunityToolkit_Microsoft.Toolkit.Uwp.UI.Controls_DropShadowPanel at master

DropShadowPanel XAML Control - Windows Community Toolkit Microsoft Docs