[UWP]使用GetAlphaMask制作陰影-創(chuàng)新互聯(lián)

1. 前言

最近常常接觸到GetAlphaMask，所以想寫這篇文章介紹下GetAlphaMask怎么使用。其實(shí)GetAlphaMask的使用場(chǎng)景十分有限，Github上能搜到的內(nèi)容都是用來配合DropShadow的，所以這篇文章也以介紹DropShadow為主。

創(chuàng)新互聯(lián)公司專注于周至網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供周至營(yíng)銷型網(wǎng)站建設(shè)，周至網(wǎng)站制作、周至網(wǎng)頁設(shè)計(jì)、周至網(wǎng)站官網(wǎng)定制、微信平臺(tái)小程序開發(fā)服務(wù)，打造周至網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供周至網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

2. 合成陰影

先介紹一下合成陰影。Compositor.CreateDropShadow()可以創(chuàng)建一個(gè)DropShadow，將這個(gè)DropShadowDropShadow賦值到SpriteVisual的Shadow屬性，然后使用ElementCompositionPreview.SetElementChildVisual 將這個(gè)SpriteVisual設(shè)置到某個(gè)UIElement的可視化層里，再將這個(gè)UIElement放到需要陰影的元素后面，這樣基本的合成陰影就完成了。

具體代碼如下：

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

private readonly Compositor _compositor;
private readonly SpriteVisual _backgroundVisual;
private readonly DropShadow _dropShadow;
public MainPage() : base()
{
    InitializeComponent();
    _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

    //創(chuàng)建并配置DropShadow
    _dropShadow = _compositor.CreateDropShadow();
    _dropShadow.BlurRadius = 16;
    _dropShadow.Offset = new Vector3(8);

    //創(chuàng)建SpriteVisual并設(shè)置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. 使用GetAlphaMask裁剪陰影

上面的代碼需要可以實(shí)現(xiàn)陰影，但只能實(shí)現(xiàn)矩形的陰影，在WPF和Silverlight中常用的Shape的陰影，或者文字的陰影都做不出來。

例如將XAML改成這樣的話，結(jié)果絕不是我想要的東西：

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

這時(shí)候就需要用到GetAlphaMask這個(gè)函數(shù)。

Image、 TextBlock和Shape分別實(shí)現(xiàn)一個(gè)名為GetAlphaMask的方法, 該方法返回一個(gè)CompositionBrush , 該方法表示具有元素形狀的灰度圖像。

官當(dāng)文檔 中是這樣描述GetAlphaMask函數(shù)的，簡(jiǎn)單來說就是拿到一個(gè)Image、TextBlock或Shape的輪廓，這個(gè)輪廓可以作為DropShadow.Mask的值，這樣DropShadow的形狀就可調(diào)用GetAlphaMask的元素的形狀一樣了。

具體代碼和結(jié)果如下，這才是我想要的效果：

_dropShadow.Mask = Host.GetAlphaMask();

4. 使用DropShadowPanel

如果覺得自己寫代碼太過復(fù)雜， 可以使用Toolkit中的DropShadowPanel。

DropShadowPanel繼承自ContentControl，當(dāng)它的Cotnent為Shape、TextBlock、Image之一（或Toolkit中實(shí)現(xiàn)了GetAlphaMask的其它控件）時(shí)，它就調(diào)用GetAlphaMask獲取陰影的形狀，否則就是簡(jiǎn)單的舉行，代碼如下：

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;

之后它的做法和上面介紹的一樣，把這個(gè)陰影設(shè)置到一個(gè)元素放在ContentPresenter后面，看起來就實(shí)現(xiàn)了Content的陰影：

_border = GetTemplateChild(PartShadow) as Border;

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

<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. 參考

將可視化層與 XAML 結(jié)合使用 - Windows UWP applications Microsoft Docs

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

分享題目：[UWP]使用GetAlphaMask制作陰影-創(chuàng)新互聯(lián)
標(biāo)題來源：http://muchs.cn/article26/dchjcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站、網(wǎng)站改版、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)