Windows 8.1 新增控件之 Flyout

原文:Windows 8.1 新增控件之 Flyout

本篇为大家介绍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>

时间: 2024-10-25 07:54:01

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

Windows 8.1 新增控件之 MenuFlyout

原文:Windows 8.1 新增控件之 MenuFlyout 开始这篇讲解前,我们先来温习一下Flyout 的内容,当触发应用中某个Button 时会有Flyout 出现提示用户该操作接下来将会发生什么.Flyout 简单来说就是一个轻量级信息提示需要用户确认或忽略.再回来看MenuFlyout 呢,你肯定发现就是多了一个"Menu",没错MenuFlyout 就是为开发者增加了一个菜单控制功能. MenuFlyout 也同样是一个轻量级控件,可以在Flyout 中添加一些简单的控制

Windows 8.1 新增控件之 DatePicker

原文:Windows 8.1 新增控件之 DatePicker 大年初一来介绍一个简单易用的DatePicker 控件,这个控件是新增的?印象里很早就有了啊,Anyway来看看Windows 8.1 里的DataPicker 有什么功能吧. 先来看看这个代码,很简单就是一个选择生日的DatePicker <DatePicker x:Name="datePicker" Header="Brithday"/> 但是这个日期好像有些怪怪的,生日应该不会超过20

Windows 8.1 新增控件之 Hyperlink

原文:Windows 8.1 新增控件之 Hyperlink Hyperlink 控件应该不用过多介绍大家肯定十分清楚其作用,它的功能就像HTML中的<a href="">标签一样,只不过是在XAML中实现. 使用Hyperlink 标记的文字在应用中会以特殊颜色显示,当用户点击或触碰该文字时就会自动转到NavigateUri 指向的地址链接.如下代码所示: <TextBlock FontSize="50" FontWeight="Bol

Windows 8.1 新增控件之 TimePicker

原文:Windows 8.1 新增控件之 TimePicker 之前已经为大家介绍过DatePicker 控件的相关内容,有日期控件当然就得有时间控件,本篇将和各位一起了解TimePicker 的使用方法. 先来介绍一下ClockIdentifier 属性,默认情况下TimePicker 是12小时制的,ClockIdentifier 可用来设定TimePicker 以12小时制或24小时制显示.如下面代码所示: <TimePicker ClockIdentifier="24HourClo

Windows 8.1 新增控件之 CommandBar

原文:Windows 8.1 新增控件之 CommandBar 上一篇为大家介绍了AppBar 的相关内容,本篇继续介绍CommandBar 的使用方法.与AppBar 相比而言,CommandBar 在开发使用方面较为单一,在按键布局上分为主控区(Primary Commands)与辅控区(Secondary Commands),默认情况下,主控区显示在菜单右侧,辅控区在左侧. 如果应用菜单栏中只包含AppBarButton.AppBarToggleButton.AppBarSeparator

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

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

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

原文:Windows 8.1 应用再出发 - 几种新增控件(1) Windows 8.1 新增的一些控件,分别是:AppBar.CommandBar.DatePicker.TimePicker.Flyout.MenuFlyout.SettingsFlyout.Hub 和 Hyperlink.我们分成两篇来介绍,本篇先为大家介绍AppBar.CommandBar.DatePicker 和 TimePicker. 1. AppBar  Windows 8.1引入了几种新的控件来帮助我们更快捷的创建应

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

原文:Windows 8.1 应用再出发 (WinJS) - 几种新增控件(1) Windows 8.1 和 WinJS 引入了以下新控件和功能,分别是:AppBarCommand.BackButton.Hub.ItemContainer.NavBar.Repeater.WebView. 本篇我们先来介绍 AppBarCommand.BackButton.Hub.ItemContainer,其余三种放在下一篇中介绍. 1. AppBarCommand Windows 8.1 加入了AppBarC

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

原文:Windows 8.1 应用再出发 - 几种新增控件(2) 本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout.MenuFlyout.SettingsFlyout.Hub 和 Hyperlink. 1. Flyout  Flyout被称为浮出控件,能起到提示或者简单交互作用.我们可以利用它来要求用户确认操作.收集用户输入信息或显示提示信息等.只有当用户点击时才显示Flyout,当点击外部任意点时,Flyout消失. Flyout通常会附加到Button上,所以But