天天看點
傳回

WP8.1的Flyout控件

對于大部分變成人員來說，彈出層的實作是必須的，不論是做互動還是提升應用可用性，美觀性，都是必不可少的。

然後并不像JS實作彈出層那麼簡單，WP8.1的彈出層比較複雜。然而實作其功能卻也是有很多種方法的。

可以先來總結下一些具有彈出效果的控件和類吧：

a.MessageDialog類，這是最簡單的彈出框了

b.ContentDialog類，比a彈出框複雜一些，可以自定義，非常實用

b.DatePicker控件和TimePicker控件

e.ContentDialog類

f.Popup控件，部落格連結： Windows Phone 8.1中的Popup

要點一：

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="クリック" 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控件。如下代碼：

<!--浮出選擇日期彈窗，點選确定後觸發DatePicked時間，然後可以擷取選中的日期-->
            <Button Content="Show DatePicker">
                <Button.Flyout>
                    <DatePickerFlyout x:name="dp" DatePicked="dp_DatePicked"/>
                </Button.Flyout>
            </Button>
            <!--浮出選擇時間彈窗，點選确認後觸發TimePicked時間，然後可以擷取選中的時間-->
            <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：

<!--浮出選擇彈窗，顯示底下的确認取消菜單欄并且處理器确認時間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="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();
        }

運作截圖：

總界面：

WP8.1的Flyout控件

點選第一個按鈕：

WP8.1的Flyout控件

點選第二個按鈕：

WP8.1的Flyout控件

選擇"湯姆克魯斯":

WP8.1的Flyout控件

點選第三個按鈕：(第三個和第四個功能類似，是以這裡隻測試了DatePickerFlyout)

WP8.1的Flyout控件
WP8.1的Flyout控件

點選第五個按鈕：

WP8.1的Flyout控件
WP8.1的Flyout控件

點選第六個按鈕：

WP8.1的Flyout控件
WP8.1的Flyout控件

總代碼：

XAML：

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

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

    }
}
WP8.1 flyout MenuFlyout PickerFlyout和ListPic DatePickerFlyout和Tim
上一篇: SpringBoot與Mybatis-Plus內建（二）
下一篇: SpringBoot整合Mybatis-Plus快速開發

繼續閱讀