首页 > 代码库 > WP8.1的Flyout控件

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));
        }

    }
}


WP8.1的Flyout控件