WinUWP应用构建UI篇（ 1）—— 亚克力板界面

一、亚克力背景

1、设置控件背景为亚克力

为控件的Background属性添加亚克力画笔(AcrylicBrush)
如Gird

<Grid FocusVisualPrimaryBrush="Black">
	<Grid.Background>
		<AcrylicBrush BackgroundSource="HostBackdrop"/>
	</Grid.Background>
</Grid>

其中：

<AcrylicBrush BackgroundSource="HostBackdrop"/>

BackgroundSource属性的"HostBackdrop"说明来自应用窗口后边，除此之外，填写"Backdrop"表示来自应用内容中

填入"HostBackdrop"的效果如图

这样就美观许多了

2、将亚克力背景延伸到标题栏

如上图所示，这样的标题栏仍然不够美观。

这里，我们写一个方法来实现拓展亚克力效果到标题栏

private void ExtendAcrylicIntoTitleBar() {
   
	CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
	ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
	titleBar.ButtonBackgroundColor = Colors.Transparent;
	titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
	titleBar.ButtonForegroundColor = Colors.Black;
}

（使用 Visual Studio 可自动 using 缺少的命名空间）

将其在App.xmal.cs的OnLaunch中调用即可

看一下最终效果

注意：这个原理是将标题栏右上角三个按钮的背景设置为白色，同时将应用内容延伸到标题栏。因此标题栏之所以能有亚克力背景，是因为我们把Gird设置成了亚克力背景的同时将其拓展到标题栏。

二、带有深度变化的亚克力背景

先看一下效果

可以看到，在按下按钮后仿佛背景中的沙糖桔被“拿远了”