Avalonia开发实践（七）——实现全局的弹窗遮罩

一、为什么要加弹窗遮罩

在应用程序开发中，Popup是非常常用的控件之一，比如组合框的选项弹框、消息提示框、对话框等等。在开发过程中，我们常常会忽略一些交互体验上的设计，比如Popup弹出后，默认点击外部区域会收回弹窗，但如果弹窗背景层没有滤镜效果，就会使得收回弹窗这一动作容易被忽略。

如下示例，由于未加弹窗遮罩，使得“查询”按钮显得可以被点击。但实际上，这时候点击“查询”按钮会先收回弹窗，体验不是很好。

改进之后，增加了深色半透明遮罩，不仅突出了弹窗内容，也消除了背景层可点击的误导。

二、如何实现弹窗遮罩

第一步、在窗体最上层添加一个覆盖整个窗体的控件。

<Grid>
	<views:MainView />
	<Rectangle x:Name="popupMaskLayer" Fill="#8000" IsVisible="False"/>
</Grid>

第二步、在窗体构造函数