VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 编程开发 > c#教程 >
  • C#教程之C#教程之UWP Acrylic Material

本站最新发布   C#从入门到精通
试听地址  
https://www.xin3721.com/eschool/CSharpxin3721/

UWP Acrylic Material

 

文档:https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic

Acrylic 能带来类似 win7 的毛玻璃效果

要使用 Acrylic ,需要 win10 的版本最低为 1709 ,在模拟器中是 16299

 

Acrylic 有两种:

  • Background acrylic
  • In-app acrylic

顾名思义,一种是应用背景用的,一种是应用中弹出遮罩层之类用的

 

win10 带了很多 acrylic resources ,可以直接使用

比如 Background acrylic 的:

SystemControlAcrylicWindowBrush, 
SystemControlChromeLowAcrylicWindowBrush, 
SystemControlBaseHighAcrylicWindowBrush, 
SystemControlBaseLowAcrylicWindowBrush, 
SystemControlAltHighAcrylicWindowBrush, 
SystemControlAltLowAcrylicWindowBrush

 

In-app acrylic 需要用:

SystemControlAcrylicElementBrush ,
SystemControlChromeLowAcrylicElementBrush ,
SystemControlBaseHighAcrylicElementBrush ,
SystemControlBaseLowAcrylicElementBrush ,
SystemControlAltHighAcrylicElementBrush ,
SystemControlAltLowAcrylicElementBrush

 

简单效果如下:

image

 

当然,除了用自带的 resources ,我们也可以自定义 acrylic

自定义 AcrylicBrush 可以设置4个属性:

  • TintColor: AcrylicBrush 的颜色
  • TintOpacity: AcrylicBrush 的透明度,如果是1的话,就是 TintColor 的纯色了,没有半透明效果,设置0的话,TintColor完全透明,设置什么样的 TintColor 就无所谓了…
  • BackgroundSource: 用来设置是 Background acrylic:HostBackdrop,还是 In-app acrylic: Backdrop
  • FallbackColor: 当设备处于节电模式,或者在手机、xbox等不支持 acrylic 的设备时,程序会显示这个颜色(当 win10 中应用失去焦点时,也会呈现这个颜色的)

 

然后很愉快的写了下:

<Grid.Background>
	<AcrylicBrush BackgroundSource="HostBackdrop" TintColor="#FFFF0000" Opacity="0.6" FallbackColor="Black" ></AcrylicBrush>
</Grid.Background>

运行发现木有效果…

然后尝试写成 Resource :

复制代码
    <Page.Resources>
        <AcrylicBrush x:Key="MyAcrylicBrush"
                      BackgroundSource="HostBackdrop"
                      TintColor="#FFFF0000"
                      TintOpacity="0.6" TintTransitionDuration="1"
                      FallbackColor="Black"/>
    </Page.Resources>
    <Grid  Background="{StaticResource MyAcrylicBrush}">
    </Grid>
复制代码

效果如下:

image

所以如果直接写 AcrylicBrush 没效果的

可以尝试写个 Resource  再试试…

作者:sun8134
    
出处:http://sun8134.cnblogs.com/
空间:http://sun8134.spaces.live.com/
    
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关教程