WP8.1的Flyout控件

对于大部分变成人员来说，弹出层的实现是必须的，不论是做交互还是提升应用可用

性，美观性，都是必不可少的。

然后并不像JS实现弹出层那么简单，WP8.1的弹出层比较复杂。然而实现其功能却也是有

很多种方法的，一种是类似于WPF中的Popup控件，另一种就是利用WP8.1自带的Flyout控

件，然而如果不想被自带的控件绊住，也可以自己通过变换和动画的结合实现。

当然如果不是用XAML写的话，用HTML5+CSS3+JS也许就不用这么麻烦了。

先来研究下Flyout这个控件到底是怎么用的呢？

要点一：

与MessageDialog这个方法不同，前者要通过后台去写，去实现。简单的交互倒是可以实

现，但是如果要实现很复杂的交互，这种方法并不太适合。

而Flyout控件属于辅助控件，必须与其他控件一起结合起来才能实现其功能。取消的方

法可以通过单击或者点击控件外部即可取消浮出内容。

记住Flyout是用于交互的，所以一开始是不会显示出来的。只有通过用户交互性点击才

能显示

要点二：

准确地说，一般VS中的控件都是可以与Flyout控件结合起来使用的，但是会稍有不同。

对于Button控件，可以直接与Flyout结合，如下代码：

<!--最基本的Flyout控件，自定义其浮出的内容-->
            <Button Content="Show Flyout">
                <Button.Flyout>
                    <Flyout>
                        <StackPanel>
                            <TextBox PlaceholderText="<span style="font-family:KaiTi_GB2312;">名前を書いて下さい</span>"/>
                            <Button HorizontalAlignment="Right" Content="<span style="font-family:KaiTi_GB2312;">確認</span>"/>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>

然后如果不是Button控件的话，其他的控件也可以通过<FlyoutBase.AttachedFlyout>附

加属性将Flyout附加到控件上，如下代码：(这里以TextBlock为例)

<!--使用附加属性FlyoutBase.AttachedFlyout来实现Flyout控件-->
            <TextBlock Text="<span style="font-family:KaiTi_GB2312;">クリック</span>" Tapped="TextBlock_Tapped" FontSize="20">
                <FlyoutBase.AttachedFlyout>
                    <Flyout>
                        <TextBlock Text="<span style="font-family:KaiTi_GB2312;">こんにちは</span>"/>
                    </Flyout>
                </FlyoutBase.AttachedFlyout>
            </TextBlock>

上述两种方法不同的是，前者Button控件结合Flyout控件时，Flyout是默认关联到了

Click事件上的，所以无需再后台写啥了。而后者非Button控件结合Flyout控件时，就

需要在后台写对应的点击事件了。如下代码：

//通过FlyoutBase.ShowAttachedFlyout方法来展示出Flyout控件
        private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
        {
            FrameworkElement element = sender as FrameworkElement;
            if(element!=null)
            {
                FlyoutBase.ShowAttachedFlyout(element);
            }
        }

要点三：

Flyout一共分为六种

Flyout,DatePickerFlyout,TimePickerFlyout,PickerFlyout,ListPickerFl

yout,MeanFlyout

第一种很好理解，上文也说过，就不多说了。

第二种和第三种是关于选择日期和时间的弹出层，其实可以参考DatePicker控件和

TimerPicker控件。如下代码：

<!--浮出选择日期弹窗，点击确定后触发DatePicked时间，然后可以获取选中的日期-->
            <Button Content="Show DatePicker">
                <Button.Flyout>
                    <DatePickerFlyout<span style="font-family:KaiTi_GB2312;"> x:name="dp"</span> DatePicked="<span style="font-family:KaiTi_GB2312;">dp</span>_DatePicked"/>
                </Button.Flyout>
            </Button>
            <!--浮出选择时间弹窗，点击确认后触发TimePicked时间，然后可以获取选中的时间-->
            <Button Content="Shwo TimePicker">
                <Button.Flyout>
                    <TimePickerFlyout x:name=<span style="font-family:KaiTi_GB2312;">"tp"</span> TimePicked="<span style="font-family:KaiTi_GB2312;">tp</span>_TimePicked"/>
                </Button.Flyout>
            </Button>

注意后台写法即可：

//DatePickerFlyout的日期选中事件，在事件处理程序里面可以获取选中的日期
        private async void <span style="font-family:KaiTi_GB2312;">dp</span>_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
        {
            await new MessageDialog(args.NewDate.ToString()).ShowAsync();
        }

        //TimePickerFlyout的时间选中事件，在事件处理程序里面可以获取选中的时间
        private async void <span style="font-family:KaiTi_GB2312;">tp</span>_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
        {
            await new MessageDialog(args.NewTime.ToString()).ShowAsync();
        }

第四种和第五种都属于选择性的弹出层，它们弹出的层往往覆盖整个手机屏幕。重要的

区别是后台的选中事件是什么。

PickerFlyout------------Confirmed事件

ListPickerFlyout--------ItemsPicked事件(数据绑定部分可以参考listview的

ItemTemplate模板的DataTemplate模板的写法)

代码如下：

前台：

<!--浮出选择弹窗，显示底下的确认取消菜单栏并且处理器确认时间Confirmed-->
            <Button Content="Show Picker">
                <Button.Flyout>
                    <PickerFlyout Confirmed="PickerFlyout_Confirmed" ConfirmationButtonsVisible="True">
                        <TextBlock Text="<span style="font-family:KaiTi_GB2312;">確認しますか</span>？" FontSize="30" Margin="0,100,0,0"/>
                    </PickerFlyout>
                </Button.Flyout>
            </Button>
            <!--浮出选择列表弹窗，绑定集合的数据，处理选中的事件ItemsPicked-->
            <Button Content="Show ListPicker">
                <Button.Flyout>
                    <ListPickerFlyout x:Name="<span style="font-family:KaiTi_GB2312;">lpf</span>" ItemsPicked="<span style="font-family:KaiTi_GB2312;">lpf</span>_ItemsPicked">
                        <ListPickerFlyout.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}" FontSize="<span style="font-family:KaiTi_GB2312;">40</span>"></TextBlock>
                            </DataTemplate>
                        </ListPickerFlyout.ItemTemplate>
                    </ListPickerFlyout>
                </Button.Flyout>
            </Button>

后台：

//绑定ListPickerFlyout数据源
listPickerFlyout.ItemsSource = new List<string> { "织田信长","丰成秀吉","德川家康","石田三成"};

//PickerFlyout的确认事件，在事件处理程序里面可以处理相关的确认逻辑
        private async void PickerFlyout_Confirmed(PickerFlyout sender, PickerConfirmedEventArgs args)
        {
            await new MessageDialog("<span style="font-family:KaiTi_GB2312;">確認をクリックしました</span>").ShowAsync();
        }

        //ListPickerFlyout的选中事件，点击列表的某一项便会触发，在事件处理程序中通常会获取选中的项目来进行相关逻辑的处理
        private async void <span style="font-family:KaiTi_GB2312;">lpf</span>_ItemsPicked(ListPickerFlyout sender, ItemsPickedEventArgs args)
        {
            if(sender.SelectedItem!=null)
            {
                await new MessageDialog("<span style="font-family:KaiTi_GB2312;">選択</span>："+sender.SelectedItem.ToString()).ShowAsync();
            }
        }

第六种，也就是最后一种，代码如下：

前台：

<!--浮出上下文菜单，点击后显示获取菜单栏的文本-->
            <Button x:Name="menuFlyoutButton" Content="Show MenuFlyout">
                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem x<span style="font-family:KaiTi_GB2312;">:name="mfi"</span> Text="<span style="font-family:KaiTi_GB2312;">汤姆克鲁斯</span>" Click="<span style="font-family:KaiTi_GB2312;">mfi</span>_Click"/>
                        <MenuFlyoutItem x<span style="font-family:KaiTi_GB2312;">:name="mfi"</span> Text="<span style="font-family:KaiTi_GB2312;">约翰尼德普</span>" Click="<span style="font-family:KaiTi_GB2312;">mfi</span>_Click"/>
                        <MenuFlyoutItem x:name="mfi" Text="<span style="font-family:KaiTi_GB2312;">威尔斯密斯</span>" Click="<span style="font-family:KaiTi_GB2312;">mfi</span>_Click"/>
                    </MenuFlyout>
                </Button.Flyout>
            </Button>

后台：

//MenuFlyout的菜单选项的点击事件，点击后显示获取菜单栏的文本
        private async void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
        {
            await new MessageDialog((sender as MenuFlyoutItem).Text).ShowAsync();
        }

运行截图：

总界面：

点击第一个按钮：

点击第二个按钮：

选择"汤姆克鲁斯":

点击第三个按钮：(第三个和第四个功能类似，所以这里只测试了DatePickerFlyout)

点击第五个按钮：

点击第六个按钮：

总代码：

前台：

<Page
    x:Class="App6.TestPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App6"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel>
            <!--最基本的Flyout控件，自定义其浮出的内容-->
            <Button Content="Show Flyout">
                <Button.Flyout>
                    <Flyout>
                        <StackPanel>
                            <TextBox PlaceholderText="名前を書いて下さい"/>
                            <Button HorizontalAlignment="Right" Content="確認"/>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
            <!--浮出上下文菜单，点击后显示获取菜单栏的文本-->
            <Button x:Name="menuFlyoutButton" Content="Show MenuFlyout">
                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="汤姆克鲁斯" Click="MenuFlyoutItem_Click"/>
                        <MenuFlyoutItem Text="约翰尼德普" Click="MenuFlyoutItem_Click"/>
                        <MenuFlyoutItem Text="威尔斯密斯" Click="MenuFlyoutItem_Click"/>
                    </MenuFlyout>
                </Button.Flyout>
            </Button>
            <!--浮出选择日期弹窗，点击确定后触发DatePicked时间，然后可以获取选中的日期-->
            <Button Content="Show DatePicker">
                <Button.Flyout>
                    <DatePickerFlyout DatePicked="DatePickerFlyout_DatePicked"/>
                </Button.Flyout>
            </Button>
            <!--浮出选择时间弹窗，点击确认后触发TimePicked时间，然后可以获取选中的时间-->
            <Button Content="Shwo TimePicker">
                <Button.Flyout>
                    <TimePickerFlyout TimePicked="TimePickerFlyout_TimePicked"/>
                </Button.Flyout>
            </Button>
            <!--浮出选择弹窗，显示底下的确认取消菜单栏并且处理器确认时间Confirmed-->
            <Button Content="Show Picker">
                <Button.Flyout>
                    <PickerFlyout Confirmed="PickerFlyout_Confirmed" ConfirmationButtonsVisible="True">
                        <TextBlock Text="確認しますか？" FontSize="30" Margin="0,100,0,0"/>
                    </PickerFlyout>
                </Button.Flyout>
            </Button>
            <!--浮出选择列表弹窗，绑定集合的数据，处理选中的事件ItemsPicked-->
            <Button Content="Show ListPicker">
                <Button.Flyout>
                    <ListPickerFlyout x:Name="listPickerFlyout" ItemsPicked="listPickerFlyout_ItemsPicked">
                        <ListPickerFlyout.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}" FontSize="45"></TextBlock>
                            </DataTemplate>
                        </ListPickerFlyout.ItemTemplate>
                    </ListPickerFlyout>
                </Button.Flyout>
            </Button>
            <!--使用附加属性FlyoutBase.AttachedFlyout来实现Flyout控件-->
            <TextBlock Text="クリック" Tapped="TextBlock_Tapped" FontSize="20">
                <FlyoutBase.AttachedFlyout>
                    <Flyout>
                        <TextBlock Text="こんにちは"/>
                    </Flyout>
                </FlyoutBase.AttachedFlyout>
            </TextBlock>
            <Button Content="跳转到MainPage页面" x:Name="goto_btn" Click="goto_btn_Click"/>
        </StackPanel>
    </Grid>
</Page>

后台：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍

namespace App6
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class TestPage : Page
    {
        public TestPage()
        {
            this.InitializeComponent();
            //绑定ListPickerFlyout数据源
            listPickerFlyout.ItemsSource = new List<string> { "织田信长","丰成秀吉","德川家康","石田三成"};
        }

        /// <summary>
        /// 在此页将要在 Frame 中显示时进行调用。
        /// </summary>
        /// <param name="e">描述如何访问此页的事件数据。
        /// 此参数通常用于配置页。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        //MenuFlyout的菜单选项的点击事件，点击后显示获取菜单栏的文本
        private async void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
        {
            await new MessageDialog((sender as MenuFlyoutItem).Text).ShowAsync();
        }

        //DatePickerFlyout的日期选中事件，在事件处理程序里面可以获取选中的日期
        private async void DatePickerFlyout_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
        {
            await new MessageDialog(args.NewDate.ToString()).ShowAsync();
        }

        //TimePickerFlyout的时间选中事件，在事件处理程序里面可以获取选中的时间
        private async void TimePickerFlyout_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
        {
            await new MessageDialog(args.NewTime.ToString()).ShowAsync();
        }

        //PickerFlyout的确认事件，在事件处理程序里面可以处理相关的确认逻辑
        private async void PickerFlyout_Confirmed(PickerFlyout sender, PickerConfirmedEventArgs args)
        {
            await new MessageDialog("確認をクリックしました").ShowAsync();
        }

        //ListPickerFlyout的选中事件，点击列表的某一项便会触发，在事件处理程序中通常会获取选中的项目来进行相关逻辑的处理
        private async void listPickerFlyout_ItemsPicked(ListPickerFlyout sender, ItemsPickedEventArgs args)
        {
            if(sender.SelectedItem!=null)
            {
                await new MessageDialog("選択："+sender.SelectedItem.ToString()).ShowAsync();
            }
        }

        //通过FlyoutBase.ShowAttachedFlyout方法来展示出Flyout控件
        private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
        {
            FrameworkElement element = sender as FrameworkElement;
            if(element!=null)
            {
                FlyoutBase.ShowAttachedFlyout(element);
            }
        }

        private void goto_btn_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(MainPage));
        }

    }
}