Popup控件

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

在XAML文件中,Popup控件的用法如下所示:

<Popup .../>

--

<Popup ...>

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

</Popup>

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

介绍完常用属性后,接着来看一下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控件的使用

posted on 2017-03-30 21:05  冯瑞涛  阅读(252)  评论(0编辑  收藏  举报