您好,登錄后才能下訂單哦!
要在UWP中制作長(zhǎng)陰影的話,可以用GetAlphaMask拿到輪廓,做成灰色,然后復(fù)制一百幾十個(gè)擺在后面。GetAlphaMask的使用場(chǎng)景十分有限,Github上能搜到的內(nèi)容都是用來(lái)配合DropShadow的,所以這篇文章也以介紹DropShadow為主。
先介紹一下合成陰影。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放到可視化樹(shù)
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;
}
上面的代碼需要可以實(shí)現(xiàn)陰影,但只能實(shí)現(xiàn)矩形的陰影,在WPF和Silverlight中常用的Shape的陰影,或者文字的陰影都做不出來(lái)。
例如將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)單來(lái)說(shuō)就是拿到一個(gè)Image、TextBlock或Shape的輪廓,這個(gè)輪廓可以作為DropShadow.Mask的值,這樣DropShadow的形狀就可調(diào)用GetAlphaMask的元素的形狀一樣了。
具體代碼和結(jié)果如下,這才是我想要的效果:
_dropShadow.Mask = Host.GetAlphaMask();
如果覺(jué)得自己寫(xiě)代碼太過(guò)復(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后面,看起來(lái)就實(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>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。