本篇为大家介绍Flyout 控件,Flyout 属于一种轻量级交互控件,可以支持信息提示或用户交互。与传统Dialog 控件不同的是Flyout 控件可通过直接点击对话框外部区域忽略。

Flyout 控件一般常与Button 结合使用,所以Button 控件默认增加了Flyout 属性,当使用Flyout 属性后,点击Button 时就会自动显示Flyout 内容,如下代码所示:

<Button Content="Delete Files">
<Button.Flyout>
<Flyout>
<StackPanel>
<TextBlock FontSize="15" Text="All the files will be deteled, Are you sure?" />
<Button Content="Yes, delete all!"/>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>

在Flyout 中仍然可以按需要添加各种控件,例如TextBlock、Button等。运行点击“Delete Files”按钮后,Flyout 内容将自动显示,如下图:

对于非Button 控件如何使用Flyout 呢,可以利用FlyoutBase.AttachedFlyout 属性为FrameworkElement 对象添加Flyout 功能,当然需要为该控件增加相应的触发事件来启动Flyout 功能。如下代码:

<TextBox Width="500" HorizontalAlignment="Left" GotFocus="TextBox_GotFocus">
<FlyoutBase.AttachedFlyout>
<Flyout>
<TextBlock Text="You can input 50 words here."/>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBox>
private void TextBox_GotFocus(object sender, RoutedEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
if (element != null)
{
FlyoutBase.ShowAttachedFlyout(element);
}
}

运行效果如下图:

除此之外,也可以将Flyout 定义为StaticResource 供多种控件共享使用。

<Page.Resources>
<Flyout x:Key="FlyoutResources">
<StackPanel>
<TextBlock Text="This is a Flyout."/>
</StackPanel>
</Flyout>
</Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Margin="50" Orientation="Horizontal" VerticalAlignment="Top">
<Button Content="Click Button" Flyout="{StaticResource FlyoutResources}"/>
<TextBox FlyoutBase.AttachedFlyout="{StaticResource FlyoutResources}" Margin="50,20"
Height="20" Width="150" HorizontalAlignment="Left" GotFocus="TextBox_GotFocus"/>
</StackPanel>
</Grid>

Windows 8.1 新增控件之 Flyout的更多相关文章

  1. Windows 8.1 新增控件之 AppBar

    Windows 8.1 与Windows 8 相比已经有了很多改进,从ITPro 角度这篇文章<What's New in Windows 8.1>已经表述的很详细.对开发者来说,最明显的 ...

  2. Windows 8.1 新增控件之 DatePicker

    大年初一来介绍一个简单易用的DatePicker 控件,这个控件是新增的?印象里很早就有了啊,Anyway来看看Windows 8.1 里的DataPicker 有什么功能吧. 先来看看这个代码,很简 ...

  3. Windows 8.1 新增控件之 Hyperlink

    Hyperlink 控件应该不用过多介绍大家肯定十分清楚其作用,它的功能就像HTML中的<a href="">标签一样,只不过是在XAML中实现. 使用Hyperlin ...

  4. Windows 8.1 新增控件之 MenuFlyout

    开始这篇讲解前,我们先来温习一下Flyout 的内容,当触发应用中某个Button 时会有Flyout 出现提示用户该操作接下来将会发生什么.Flyout 简单来说就是一个轻量级信息提示需要用户确认或 ...

  5. Windows 8.1 新增控件之 TimePicker

    之前已经为大家介绍过DatePicker 控件的相关内容,有日期控件当然就得有时间控件,本篇将和各位一起了解TimePicker 的使用方法. 先来介绍一下ClockIdentifier 属性,默认情 ...

  6. Windows 8.1 新增控件之 CommandBar

    上一篇为大家介绍了AppBar 的相关内容,本篇继续介绍CommandBar 的使用方法.与AppBar 相比而言,CommandBar 在开发使用方面较为单一,在按键布局上分为主控区(Primary ...

  7. 重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout

    [源码下载] 重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout 作者:webabcd 介绍重新想象 ...

  8. Windows 8.1 应用再出发 - 几种新增控件(1)

    Windows 8.1 新增的一些控件,分别是:AppBar.CommandBar.DatePicker.TimePicker.Flyout.MenuFlyout.SettingsFlyout.Hub ...

  9. Windows 8.1 应用再出发 - 几种新增控件(2)

    本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout.MenuFlyout.SettingsFlyout.Hub 和 Hyperlink. 1. Flyout Flyout被称为 ...

随机推荐

  1. GCD应用及其他方法

    1.GCD应用 单例模式        static dispatch_once_t onceToken;    dispatch_once(&onceToken, ^{            ...

  2. NSString 字符串替换

    NSString * oneScale=@"@ddd"; NSLog(@"%@",[oneScale stringByReplacingOccurrencesO ...

  3. WCF学习资料汇总

    微软官方讲解教程: 跟我一起从零开始学WCF系列课程 http://msdnwebcast.net/webcast/1/2692/ 构建WCF面向服务的应用程序系列课程 http://msdnwebc ...

  4. 布局display

    什么是布局: 浏览器以正确的大小将元素摆放在正确的位置上. 布局:元素摆放的模式. 影响元素大小和位置的css属性: display  position   float  flex display 设 ...

  5. JAVA中的字符串小结

    String字符串是只读的,不可变的 查看String类的源码,可以发现String类是被final关键字修饰的: 另外还可以看下String类源码中的其它方法实现,随便举个可以修改String值的方 ...

  6. javax.servlet.ServletException cannot be resolved to a type错误解决方法

    在页面中使用全局路径时${pageContext.request.contextPath}出现javax.servlet.ServletException cannot be resolved to ...

  7. .NET笔记(一)

    物理路径 context.Server.MapPath() 获取DataTable的某个单元格的值 tb.Rows[i][j] 或 tb.Rows["某一行"]["某一列 ...

  8. Linux IPC tcp/ip socket 编程

    模型 #include <unistd.h> #include <sys/types.h> #include <sys/socket.h> #include < ...

  9. Linux服务器开机没响应,BIOS信息都没有

    于2015-10-16,记得是4月份装的服务器,上边ineedle都部署完毕,当时没有派上用场,这次华为测试需要一台ineedle测试机,便把这个安装好的ineedle请出来了,插上电源后,接上网线, ...

  10. 八、Android学习第七天——XML文件解析方法(转)

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 八.Android学习第七天——XML文件解析方法 XML文件:exten ...