[深刻淺出WP8.1(Runtime)]浮出控件（Flyout）

4.15 浮出控件（Flyout）

      浮出控件（Flyout）是一個輕型的輔助型的彈出控件，一般會做爲提示或者要求用戶進行相關的交互來使用。Flyout控件與Windows Phone裏面的彈出框MessageDialog是有很大區別的，首先Flyout控件是一個輔助控件，須要與其餘控件結合起來才能使用，還有就是取消的規則不同，Flyout控件能夠經過單擊或在外部點擊均可以輕鬆消除浮出控件。你可使用Flyout控件收集用戶輸入、顯示與某個項目相關的更多信息或者要求用戶確認某個操做。只有當爲了響應用戶點擊時才應顯示Flyout控件，也就是說Flyout控件並非直接就顯示出來，而是必需要用戶的操做才能呈現出來；當用戶在彈出窗口外部點擊時，Flyout控件就會消失，這也是Flyout控件默認的關閉規則。控件的XAML語法以下：

<Button >

    <Button.Flyout>

        <Flyout>

            <!--浮出的UI內容-->

        </Flyout>

    </Button.Flyout>

</Button>

      從控件的XAML語法中能夠看出，Flyout控件自己就是一種輔助性的控件，它必需要與其餘的控件結合起來使用才能夠，那麼一般會將Flyout控件附加到一個Button控件上直接相應Button控件的單擊事件，所以Button控件擁有Flyout屬性以簡化附加和打開 Flyout 控件。單擊按鈕時，附加到按鈕的浮出控件自動打開，這是不須要處理任何事件便可打開浮出控件。那麼對於非Button控件是否是不能使用Flyout控件呢？那麼答案確定是否認的，非Button控件也同樣可使用Flyout控件，你也可使用FlyoutBase.AttachedFlyout附加屬性，將 Flyout 控件附加到任何FrameworkElement對象。由於Flyout控件是必需要相應某個用戶的操做的，Button控件是默認關聯到了Click事件，若是是用FlyoutBase.AttachedFlyout附加屬性來添加Flyout控件的這種狀況下，就必須響應FrameworkElement控件上的交互，例如 Tapped，並在你的代碼中打開Flyout控件。示例代碼以下所示：

XAML代碼：

<TextBlock Text=" Tapped事件觸發Flyout" Tapped="TextBlock_Tapped">

    <FlyoutBase.AttachedFlyout>

        <Flyout>

            <!--浮出的UI內容-->

        </Flyout>

    </FlyoutBase.AttachedFlyout>

</TextBlock>

C#代碼：

private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)

{

    FrameworkElement element = sender as FrameworkElement;

    if (element != null)

    {

        FlyoutBase.ShowAttachedFlyout(element);

    }

}

      從上文咱們知道了Flyout控件的兩種建立方式，一種是經過Button控件的Flyout屬性添加，另外的一種就是經過FlyoutBase.AttachedFlyout附件屬性給任何的FrameworkElement對象來添加。那麼在Windows Phone上Flyout控件一共有6種不一樣的類型：Flyout、DatePickerFlyout、TimePickerFlyout、PickerFlyout、ListPickerFlyout和MenuFlyout。

（1）Flyout

      Flyout類型表示用於處理自定義的浮出窗口的。Flyout控件常常會使用的事件是Closed、Opened和Opening事件，分別表示是在關閉、已打開和正在打開的三種時機觸發的時間，在實際的程序開發中一般會在Closed事件處理程序中來獲取用戶的操做結果。同時這三種事件也是其餘類型的Flyout控件的共性，因此你能夠把Flyout類型的Flyout控件是最簡單和最基本的Flyout控件。

（2）DatePickerFlyout和TimePickerFlyout

      DatePickerFlyout類型表示是選擇日期的浮出窗口；TimePickerFlyout表示是選擇時間的浮出窗口。DatePickerFlyout與TimePickerFlyout類型的Flyout控件其實是和TimePicker與DatePicker控件是很是相似的，只不過Flyout控件能夠監控到TimePicker與DatePicker控件的彈出時機。

（3）PickerFlyout和ListPickerFlyout

      PickerFlyout表示是選擇的浮出窗口，能夠在頁面底下添加確認的菜單欄用於用戶進行確認；ListPickerFlyout表示是列表形式展現的浮出窗口，須要經過集合數據綁定來呈現列表的選擇。PickerFlyout和ListPickerFlyout類型的Flyout控件是選擇類型的浮出窗口，它們與其餘的Flyout控件的主要區別是提供了選中確認的時間分別是PickerFlyout對應的Confirmed事件和ListPickerFlyout對應的ItemsPicked事件，而須要注意的是ListPickerFlyout須要經過數據綁定來實現選擇的列表，關於數據綁定的知識在後續的章節還會進行更加詳細的介紹。

（4）MenuFlyout

      MenuFlyout表示是上下文菜單的選擇浮出窗口。一個MenuFlyout會包含若干個MenuFlyoutItem，每一個MenuFlyoutItem表示一個選項，用戶能夠進行單擊，同時同時經過MenuFlyoutItem的Click單擊事件來處理用戶的單擊請求。MenuFlyout還有一個很大的特色就是當用戶當其彈出的時候，會把程序頁面的其餘部分會往裏面凹下去以強調彈出的MenuFlyout浮出層。

    下面給出Flyout控件的示例：6種類型的Flyout控件的使用和Button與非Button控件對Flyout控件的集成。

    代碼清單4-15：Flyout控件（源代碼：第4章\Examples_4_15）

MainPage.xaml文件主要代碼
------------------------------------------------------------------------------------------------------------------
    <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="Option 1" Click="MenuFlyoutItem_Click"/>
                    <MenuFlyoutItem Text="Option 2" Click="MenuFlyoutItem_Click"/>
                    <MenuFlyoutItem Text="Option 3" Click="MenuFlyoutItem_Click"/>
                </MenuFlyout>
            </Button.Flyout>
        </Button>
        <!--浮出選擇日期彈窗，點擊肯定後會觸發DatePicked事件，而後能夠獲取選中的日期-->
        <Button Content="Show DatePicker" >
            <Button.Flyout>
                <Controls:DatePickerFlyout Title="選擇日期："  DatePicked="DatePickerFlyout_DatePicked"/>
            </Button.Flyout>
        </Button>
        <!--浮出選擇時間彈窗，點擊肯定後會觸發TimePicked事件，而後能夠獲取選中的時間--->
        <Button Content="Show TimePicker" >
            <Button.Flyout>
                <Controls:TimePickerFlyout Title="選擇時間："  TimePicked="TimePickerFlyout_TimePicked"/>
            </Button.Flyout>
        </Button>
        <!--浮出選擇彈窗，顯示底下的確認取消菜單欄而且處理其確認事件Confirmed--->
        <Button Content="Show Picker" >
            <Button.Flyout>
                <Controls:PickerFlyout   Confirmed="PickerFlyout_Confirmed" ConfirmationButtonsVisible="True">
                    <TextBlock Text="你肯定嗎？？？？？" FontSize="30" Margin="0 100 0 0"/>
                </Controls:PickerFlyout>
            </Button.Flyout>
        </Button>
        <!--浮出選擇列表彈窗，綁定集合的數據，處理選中的事件ItemsPicked-->
        <Button Content="Show ListPicker">
            <Button.Flyout>
                <Controls:ListPickerFlyout x:Name="listPickerFlyout" Title="選擇手機品牌：" ItemsPicked="listPickerFlyout_ItemsPicked"  >
                    <Controls:ListPickerFlyout.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" FontSize="30"></TextBlock>
                        </DataTemplate>
                    </Controls:ListPickerFlyout.ItemTemplate>
                </Controls:ListPickerFlyout>
            </Button.Flyout>
        </Button>
        <!--使用附加屬性FlyoutBase.AttachedFlyout來實現Flyout控件-->
        <TextBlock Text="請點擊我！" Tapped="TextBlock_Tapped" FontSize="20">
                <FlyoutBase.AttachedFlyout>
                    <Flyout>
                        <TextBox Text="你好！"/>
                    </Flyout>
                </FlyoutBase.AttachedFlyout>
        </TextBlock>
    </StackPanel>

MainPage.xaml.cs文件主要代碼
------------------------------------------------------------------------------------------------------------------
    public MainPage()
    {
        this.InitializeComponent();
        // 綁定ListPickerFlyout的數據源
        listPickerFlyout.ItemsSource = new List<string> { "諾基亞", "三星", "HTC", "蘋果", "華爲" };
    }
    // PickerFlyout的確認事件，在事件處理程序裏面能夠處理相關的確認邏輯
    private async void PickerFlyout_Confirmed(PickerFlyout sender, PickerConfirmedEventArgs args)
    {
        await new MessageDialog("你點擊了肯定").ShowAsync();
    }
    // TimePickerFlyout的時間選中事件，在事件處理程序裏面能夠獲取選中的時間
    private async void TimePickerFlyout_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
    {
        await new MessageDialog(args.NewTime.ToString()).ShowAsync();
    }
    // DatePickerFlyout的日期選中事件，在事件處理程序裏面能夠獲取選中的日期
    private async void DatePickerFlyout_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
    {
        await new MessageDialog(args.NewDate.ToString()).ShowAsync();
    }
    // MenuFlyout的菜單選項的點擊事件，點擊後直接獲取菜單欄的文本顯示到按鈕上
    private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
    {
        menuFlyoutButton.Content = (sender as MenuFlyoutItem).Text;
    }
    // 經過FlyoutBase.ShowAttachedFlyout方法來展現出Flyout控件
    private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
    {
        FrameworkElement element = sender as FrameworkElement;
        if (element != null)
        {
            FlyoutBase.ShowAttachedFlyout(element);
        }
    }
    // ListPickerFlyout的選中事件，點擊列表的某一項便會觸發，在事件處理程序中一般會獲取選中的項目來進行相關邏輯的處理
    private async void listPickerFlyout_ItemsPicked(ListPickerFlyout sender, ItemsPickedEventArgs args)
    {
        if (sender.SelectedItem != null)
        {
            await new MessageDialog("你選擇的是：" + sender.SelectedItem.ToString()).ShowAsync();
        }
    }

本文來源於《深刻淺出Windows Phone 8.1 應用開發》

WP8.1 Runtime文章列表：http://www.cnblogs.com/linzheng/p/3998037.html

源代碼下載：http://vdisk.weibo.com/s/zt_pyrfNHb99O

歡迎關注個人微博@WP林政   微信公衆號：wp開發（號：wpkaifa）

WP8.1技術交流羣：372552293