码迷，mamicode.com
首页 > 其他好文 > 详细

WP8.1的Flyout控件

时间：2014-11-17 10:49:56      阅读：287      评论：0      收藏：0      [点我收藏+]

标签：wp8.1   flyout   menuflyout   pickerflyout和listpic   datepickerflyout和tim   

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

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

然后并不像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();
        }

运行截图：

总界面：

bubuko.com,布布扣


点击第一个按钮：

bubuko.com,布布扣



点击第二个按钮：

bubuko.com,布布扣

选择"汤姆克鲁斯":

bubuko.com,布布扣



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

bubuko.com,布布扣

bubuko.com,布布扣



点击第五个按钮：

bubuko.com,布布扣

bubuko.com,布布扣



点击第六个按钮：

bubuko.com,布布扣

bubuko.com,布布扣


总代码：

前台：

<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控件

标签：wp8.1   flyout   menuflyout   pickerflyout和listpic   datepickerflyout和tim   

原文地址：http://blog.csdn.net/u010792238/article/details/41181565
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！