Win10系列：C#应用控件基础17

Popup控件

在应用程序中使用Popup控件时，通常会先将其设置为隐藏状态，当用户触发应用中已定义的事件时，Popup控件将以弹出窗口的方式显示相关信息来提示用户操作。

在XAML文件中，Popup控件的用法如下所示：

<Popup .../>

-或-

<Popup ...>

<!--添加子元素-->

</Popup>

下面介绍一下Popup控件的几个常用属性：

• VerticalOffset属性，获取或设置弹出的Popup控件与页面顶端的竖直距离。
• HorizontalOffset属性，获取或设置弹出的Popup控件与页面左端的水平距离。
• IsOpen属性，获取或设置Popup控件是否弹出。当设置IsOpen属性值为True，Popup控件弹出，当设置IsOpen属性值为False，Popup控件隐藏。

介绍完常用属性后，接着来看一下Popup控件的常用事件：

• Closed事件，当Popup控件关闭时触发。
• Opened事件，当弹出Popup控件时触发。

接下来通过一个示例来说明Popup控件的使用方法。

新建一个Windows应用商店的空白应用程序项目，并命名为PopupDemo，在MainPage.xaml文件中添加如下代码。

<Grid RightTapped="ShowPopupRightTapped" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<Popup VerticalOffset="500" HorizontalOffset="500" Name="StandardPopup">

<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="2" Width="200" Height="200">

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

<TextBlock Text="Popup控件" FontSize="24.667" HorizontalAlignment="Center"/>

<Button Content="关闭" Click="ClosePopupClicked" HorizontalAlignment="Center"/>

</StackPanel>

</Border>

</Popup>

</Grid>

在上面的代码中，首先为Grid元素的右键单击事件RightTapped注册事件处理方法，接着在Grid元素中添加了一个Popup控件，设置Popup控件的VerticalOffset属性和HorizontalOffset属性的值为500。接着在Popup控件内添加一个Border边框，设置Border边框的Width属性值和Height属性值为200，边框宽度属性BorderThickness的值为2。在边框内使用StackPanel对添加的TextBlock文本块和Button按钮进行布局，TextBlock文本块用于显示"Popup控件"文本信息，将Button按钮的Content属性值设置为"关闭"，并为其注册单击事件处理方法，当单击"关闭"按钮时将Popup控件隐藏。

双击打开MainPage.xaml.cs文件，为Grid元素的RightTapped事件添加事件处理方法ShowPopupRightTapped，实现当使用鼠标右键单击界面时弹出定义好的Popup控件，代码如下所示：

private void ShowPopupRightTapped(object sender, RightTappedRoutedEventArgs e)

{

if (!StandardPopup.IsOpen)

{

//为Popup控件的IsOpen属性赋值为true，使Popup控件弹出

StandardPopup.IsOpen = true;

}

}

在上面的代码中利用StandardPopup的IsOpen属性对Popup控件进行控制，若StandardPopup的IsOpen属性值为false，则将IsOpen属性值设置为true，使Popup控件弹出。

接下来为Popup控件上的"关闭"按钮添加单击事件处理方法ClosePopupClicked，实现单击此按钮时隐藏Popup控件，代码如下所示：

private void ClosePopupClicked(object sender, RoutedEventArgs e)

{

if (StandardPopup.IsOpen)

{

//为Popup控件的IsOpen属性赋值为false，使Popup控件隐藏

StandardPopup.IsOpen = false;

}

}

上面的代码同样利用StandardPopup的IsOpen属性对Popup控件进行控制，若StandardPopup的IsOpen属性值为true，则将IsOpen属性值设置为false，使Popup控件隐藏。

运行程序将显示一个空界面，右键单击界面会弹出Popup控件，在Popup控件内包含"Popup控件"文本信息和一个"关闭"按钮，如图4-28所示。单击"关闭"按钮将隐藏Popup控件。

图4-28 Popup控件的使用