UWP 开发初阶 Chapter 14

30 Jul 2018 in 初阶

简单介绍通过 XAML 和 C# 弹出消息对话框

上篇回顾

前文讲述了如何使用 ScrollViewer 和 Image，其中 ScrollViewer 在一些特殊情况下是无效的，不知大家还有没有印象。这几个点其实很重要，因为在写程序的时候，经常会一时半会儿发现不了问题，其实问题很简单。而 Image 可以引用项目内文件或者来源于网络的文件。

本篇正文

今天讲一下在 UWP 中如何调用弹窗。我们经常会需要提醒用户，这时候弹窗是一个很好的选择。今天我们讲三个东西，分别是 Flyout，ContentDialog。其实还有一个便是 MessageBox，但我个人并不是很喜欢那种形式，感觉和有一点割裂感，而且前面两种已经够用了，所以这次暂时跳过 MessageBox。

实际效果图如下：
1. 作用于 Button
2. 作用于 TextBlock
不难看出，这个其实严格来讲并不算是 “弹窗” ，但其实作用相仿。而这个 Flyout 也可以作用于 Button 和 TextBlock。上面两张动图案例来自于 XAML Control Gallery
具体应用：
1. 应用于 Button
  - 我已经新建了一个 Button，如下图：
  - 然后写入如下代码，表明在 Button 内建立 Flyout
  - 然后在 Flyout 的标签里面就可以创建弹出的界面了，我加了一个 TextBlock 和一个 Button，如下：
  - 好啦！我们基本的已经完成啦！
  - 大家运行一下就会发现，当 Flyout 展开的时候，点击其外面的区域，Flyout 就会关闭。但是，如果想通过点击 Flyout 内的按钮来关闭呢？比如 “取消” 按钮，毕竟这样更加直观。于是这时候我们需要通过 C#，操作很简单。我们先如上图给 Flyout 一个名字，然后转到按钮定义的事件位置，写以下代码：
    ButtonFlyout.Hide();
    补充： Flyout 对应的属性和事件还有很多。比如 ShowAt 可以指定 Flyout 出现的位置。Placement 可以指定出现的方向，如上下左右。同时拥有 Closed Closing Opened Opening 等事件。
    提示： Flyout 中也内置了 ScrollViewer。
2. 应用于 TextBlock
  - 完整 XAML 代码如下图：
  - 这时候，点击是不会弹出 Flyout 的，我们需要在 TextBlock 内建一个 Tapped 的事件：
  - 然后我们转到 Tapped 定义的代码处，写入以下代码
  - 好啦！运行一下即可！

ContentDialog

实际效果图：（来源于 XAML Control Gallery）
具体应用
- 首先在项目中新建一个 ContentDialog 文件
- 然后打开刚才新建的 .xaml 文件，会看到下图，其中选中的部分就是标题，按钮等等。下面的 Grid 中可以编辑其主体部分的内容。
- ContentDialog 内建了关闭按钮，因此你不需要处理多余的逻辑来关闭 ContentDialog。你只需要加一个属性，如下图中红框内：
- 同时，你也可以设置默认的按钮。通过添加如下图所示的红框内的内容：
- 接下来，我们在主体部分内简单的写一点控件，如下：
```
<Grid>
	<StackPanel>
		<TextBlock>Hello, world!</TextBlock>
	</StackPanel>
</Grid>
```
- ContentDialog 的内容基本上就编辑好了，我们回到 MainPage.xaml，新建一个按钮，来打开 ContentDialog。如下：
```
<Button Content="Open ContentDialog" Click="Button_Click_1"/>
```
- 然后转到按钮点击事件定义的地方，写下如下代码：
  注意：请加入上图红框内的 async，不然编译器会报错，因为这个方法里面我们用到了 await，也就是异步。关于异步的相关知识，之后会详细讲。
  解释：其实思路很简单，就是先新建一个类型为 ContentDialogDemo 的实例，然后 result 就是返回的结果，然后可以根据点击的按钮来进行判断相应的逻辑。当然，你其实也可以直接在刚才编辑的 ContentDialog 的文件内，通过 PrimaryButtonClick、SecondaryButtonClick等事件进行逻辑处理。
- 好啦！运行一下就能得到我们想要的结果啦！