UWP Xaml如何制作整页Loading覆盖效果

 时间:2024-10-12 21:53:04

1、首先,要在Xaml代码实现的效果如图所示。一个覆盖整页的Grid防止用户与控件交互,中间显示Loading圆圈和文字信息。

UWP Xaml如何制作整页Loading覆盖效果

2、要实现这个效果,首先在Page的Content的容器控件中最后的位置放上一个Grid(否则这个Grid会被之前的控件遮挡),设置Span使其覆盖整页。

UWP Xaml如何制作整页Loading覆盖效果

3、接着,在这个Grid内,首先设置Grid的背痔辏哔刂景色为黑色(半透明更好),内容放一个竖直方向StackPanel;里边放一个ProgressRing,就是转圈的环,和一个TextBlock,显示信息。注意给这几个控件设置x:Name以从代码中访问。

UWP Xaml如何制作整页Loading覆盖效果

4、接着,在这个Page相对应的代码文件中(以C#为例),编写ShowLoading和HideLoading两个函数,如图。

UWP Xaml如何制作整页Loading覆盖效果

5、在异步执行的程序逻辑中,如图,在await之前调用LoadingStart,在await执行完毕后调用LoadingDone即可。

UWP Xaml如何制作整页Loading覆盖效果
  • UWP Xaml如何编写层叠样式?
  • UWP 如何制作渐变图片背景?
  • UWP如何制作控件的平移(一维)动画?
  • UWP Xaml如何制作类似安卓Toast的消息提示?
  • UWP Xaml如何用ContentDialog自制输入框?
  • 热门搜索
    山东潍坊旅游景点 国家旅游局网站 浙江东方海外旅游有限公司 衡水旅游景点大全 南靖土楼旅游攻略 带孩子去哪里旅游好 贵阳旅游网 蓬莱阁旅游攻略 关于推进海南国际旅游岛建设发展的若干意见 去哪儿旅游网