WP8.1的Flyout控件

梦里梦外; 2022-08-14 00:54 169阅读 0赞

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

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

可以先来总结下一些具有弹出效果的控件和类吧：

a.MessageDialog类，这是最简单的弹出框了

b.ContentDialog类，比a弹出框复杂一些，可以自定义，非常实用

b.DatePicker控件和TimePicker控件

e.ContentDialog类

f.Popup控件，博客链接：[ Windows Phone 8.1中的Popup ][Windows Phone 8.1_Popup]

要点一：

Flyout控件属于辅助控件，必须与其他控件一起结合起来才能实现其功能。取消的方法可以通过单击或者点击控件外

部即可取消浮出内容。

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

要点二：

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

对于Button控件，可以直接与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为例)

<TextBlock Text="クリック" Tapped="TextBlock_Tapped" FontSize="20">
                    <FlyoutBase.AttachedFlyout>
                        <Flyout>
                            <TextBlock Text="こんにちは"/>
                        </Flyout>
                    </FlyoutBase.AttachedFlyout>
                </TextBlock>

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

而后者非Button控件结合Flyout控件时，就需要在.CS中写对应的点击事件了。如下代码：

//通过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,ListPickerFlyout,MenuFlyout

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

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

TimerPicker控件。如下代码：

<Button Content="Show DatePicker">
                    <Button.Flyout>
                        <DatePickerFlyout x:name="dp" DatePicked="dp_DatePicked"/>
                    </Button.Flyout>
                </Button>
                
                <Button Content="Shwo TimePicker">
                    <Button.Flyout>
                        <TimePickerFlyout x:name="tp" TimePicked="tp_TimePicked"/>
                    </Button.Flyout>
                </Button>

注意在.CS中写法即可：

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

第四种和第五种都属于选择性的弹出层，弹出的层往往覆盖整个手机屏幕。重要的区别是后台的选中事件是什么。

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

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

ItemTemplate模板的DataTemplate模板的写法)

代码如下：

XAML：

<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>
                
                <Button Content="Show ListPicker">
                    <Button.Flyout>
                        <ListPickerFlyout x:Name="lpf" ItemsPicked="lpf_ItemsPicked">
                            <ListPickerFlyout.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}" FontSize="40"></TextBlock>
                                </DataTemplate>
                            </ListPickerFlyout.ItemTemplate>
                        </ListPickerFlyout>
                    </Button.Flyout>
                </Button>

.CS：

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

//PickerFlyout的确认事件，在事件处理程序里面可以处理相关的确认逻辑
            private async void PickerFlyout_Confirmed(PickerFlyout sender, PickerConfirmedEventArgs args)
            {
                await new MessageDialog("確認をクリックしました").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("選択："+sender.SelectedItem.ToString()).ShowAsync();
                }
            }

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

XAML：

<Button x:Name="menuFlyoutButton" Content="Show MenuFlyout">
                    <Button.Flyout>
                        <MenuFlyout>
                            <MenuFlyoutItem x:name="mfi" Text="汤姆克鲁斯" Click="mfi_Click"/>
                            <MenuFlyoutItem x:name="mfi" Text="约翰尼德普" Click="mfi_Click"/>
                            <MenuFlyoutItem x:name="mfi" Text="威尔斯密斯" Click="mfi_Click"/>
                        </MenuFlyout>
                    </Button.Flyout>
                </Button>

.CS：

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

运行截图：

总界面：

![Center][]

点击第一个按钮：

![Center 1][]

点击第二个按钮：

![Center 2][]

选择"汤姆克鲁斯":

![Center 3][]

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

![Center 4][]

![Center 5][]

点击第五个按钮：

![Center 6][]

![Center 7][]

点击第六个按钮：

![Center 8][]

![Center 9][]

总代码：

XAML：

.CS：

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

[Windows Phone 8.1_Popup]: http://blog.csdn.net/u010792238/article/details/42192289
[Center]: /images/20220810/b894b2d1728d475e9ab230eab8f2595a.png
[Center 1]: /images/20220810/9e1df242f2574d908012f593cc057100.png
[Center 2]: /images/20220810/9b2ea9b22b46429cbb183e8b090a6eda.png
[Center 3]: /images/20220810/dc5a8f789411412a97ebd9a9e4f75c7d.png
[Center 4]: /images/20220810/238c522ad381446ebd5e6383a001ae2e.png
[Center 5]: /images/20220810/01fd8acdfed64252abf3c63c4de4b4ce.png
[Center 6]: /images/20220810/fe403fb12eb740f89490c0c942c03245.png
[Center 7]: /images/20220810/7396491a07f8461cabbedc309a94ec2c.png
[Center 8]: /images/20220810/eab48ee8150340849b72d54c2d1fa7fb.png
[Center 9]: /images/20220810/c46c2a4ec52a4494822ff5b8b6ce1917.png