與眾不同 windows phone (50) - 8.1 新增控件: PickerFlyout, ListPickerFlyout

[源碼下載]

與眾不同 windows phone (50) - 8.1 新增控件: PickerFlyout, ListPickerFlyout

作者：webabcd


介紹
與眾不同 windows phone 8.1 之 新增控件

• PickerFlyout - 選取器控件
• ListPickerFlyout - 列表選取器控件

示例
1、演示 PickerFlyout 的應用
PickerFlyoutDemo.xaml

<Page
    x:Class="Demo.Control.PickerFlyoutDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Control"
    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 Orientation="Vertical">

            <!--xaml 方式彈出選取器控件-->
            <Button Content="Show Picker" >
                <Button.Flyout>
                    <PickerFlyout ConfirmationButtonsVisible="True" Confirmed="PickerFlyout_Confirmed" Closed="PickerFlyout_Closed">
                        <TextBlock Text="Xbox One集全方位娛樂及游戲大作於一身的綜合娛樂設備,讓您在各個區間輕松跳轉.讓您在游戲,娛樂及在線視頻間輕松跳轉" 
                                   FontSize="30" Margin="0 20 0 0" TextWrapping="Wrap" />
                    </PickerFlyout>
                </Button.Flyout>
            </Button>

            <!--非 xaml 方式彈出選取器控件-->
            <Button Name="button" Content="Show Picker" Click="button_Click_1" Margin="0 10 0 0" />

            <TextBlock Name="lblMsg" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

PickerFlyoutDemo.xaml.cs

/*
 * PickerFlyout - 選取器控件（wp only）
 *     ConfirmationButtonsVisible - 是否顯示按鈕（一個確認按鈕，一個取消按鈕），不顯示的話則只能通過“返回鍵”返回
 *     Content - 選取器控件顯示的內容
 *     
 *     ShowAtAsync(FrameworkElement target) - 彈出選取器控件
 *     Hide() - 隱藏彈出框
 *     
 *     Confirmed - 點擊確認按鈕后觸發的事件
 *     Opening, Opened, Closed - 幾個顧名思義的事件
 */

using System;
using Windows.UI.Xaml.Controls;

namespace Demo.Control
{
    public sealed partial class PickerFlyoutDemo : Page
    {
        public PickerFlyoutDemo()
        {
            this.InitializeComponent();
        }

        private void PickerFlyout_Confirmed(PickerFlyout sender, PickerConfirmedEventArgs args)
        {
            lblMsg.Text += "confirmed";
            lblMsg.Text += Environment.NewLine;
        }

        // 通過 Confirmed 事件和 Closed 事件的結合，可以判斷出用戶是否點擊了“取消”按鈕或者按了“返回鍵”
        private void PickerFlyout_Closed(object sender, object e)
        {
            lblMsg.Text += "closed";
            lblMsg.Text += Environment.NewLine;
        }

        // 非 xaml 方式彈出選取器控件
        private async void button_Click_1(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            PickerFlyout flyout = new PickerFlyout();
            flyout.Content = new TextBlock { Text="????????????????????????" };
            bool result = await flyout.ShowAtAsync(button);
        }
    }
}

2、演示 ListPickerFlyout 的應用
ListPickerFlyoutDemo.xaml

<Page
    x:Class="Demo.Control.ListPickerFlyoutDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Control"
    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 Orientation="Vertical">

            <!--
                彈出簡單的列表選取器控件
                    Title - 彈出框的標題
                    DisplayMemberPath - 需要顯示的綁定對象中的指定字段
                    SelectedValuePath - 調用 SelectedValue 時，返回的是選中對象中的指定字段的值
                    ItemsPicked - 用戶選中某一 item 后觸發的事件
            -->
            <Button Content="Show ListPicker（simple）">
                <Button.Flyout>
                    <ListPickerFlyout x:Name="listPickerFlyoutSimple" Title="請選擇"
                                      DisplayMemberPath="Title" SelectedValuePath="Title"
                                      ItemsPicked="listPickerFlyoutSimple_ItemsPicked" Closed="listPickerFlyout_Closed">
                    </ListPickerFlyout>
                </Button.Flyout>
            </Button>

            <!--
                彈出單選列表選取器控件
                    Title - 彈出框的標題
                    SelectionMode - 選擇模式（Single 或 Multiple）
                    ItemsPicked - 用戶選中某一 item 后觸發的事件
            -->
            <Button Content="Show ListPicker（single）" Margin="0 10 0 0">
                <Button.Flyout>
                    <ListPickerFlyout x:Name="listPickerFlyoutSingle" Title="請選擇" 
                                      SelectionMode="Single"
                                      ItemsPicked="listPickerFlyoutSingle_ItemsPicked" Closed="listPickerFlyout_Closed">
                        <ListPickerFlyout.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="{Binding ImageUrl}" Width="20" Height="20" />
                                    <TextBlock Text="{Binding Title}" FontSize="20" Margin="10 0 0 0" />
                                </StackPanel>
                            </DataTemplate>
                        </ListPickerFlyout.ItemTemplate>
                    </ListPickerFlyout>
                </Button.Flyout>
            </Button>

            <!--
                彈出多選列表選取器控件（有“完成”按鈕和“取消”按鈕）
                    Title - 彈出框的標題
                    SelectionMode - 選擇模式（Single 或 Multiple）
                    ItemsPicked - 用戶單擊“完成”按鈕后觸發的事件
            -->
            <Button Content="Show ListPicker（multi）" Margin="0 10 0 0">
                <Button.Flyout>
                    <ListPickerFlyout x:Name="listPickerFlyoutMulti" Title="請選擇" 
                                      SelectionMode="Multiple"
                                      ItemsPicked="listPickerFlyoutMulti_ItemsPicked" Closed="listPickerFlyout_Closed">
                        <ListPickerFlyout.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="{Binding ImageUrl}" Width="20" Height="20" />
                                    <TextBlock Text="{Binding Title}" FontSize="20" Margin="10 0 0 0" />
                                </StackPanel>
                            </DataTemplate>
                        </ListPickerFlyout.ItemTemplate>
                    </ListPickerFlyout>
                </Button.Flyout>
            </Button>

            <TextBlock Name="lblMsg" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

ListPickerFlyoutDemo.xaml.cs

/*
 * ListPickerFlyout - 列表選取器控件（wp only）
 *     ItemsSource - 數據源
 *     
 *     ShowAtAsync(FrameworkElement target) - 彈出列表選取器控件
 *     Hide() - 隱藏彈出框
 *     
 *     ItemsPicked - 用戶選中列表中的項后觸發的事件
 *     Opening, Opened, Closed - 幾個顧名思義的事件
 */

using System;
using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace Demo.Control
{
    public sealed partial class ListPickerFlyoutDemo : Page
    {
        private ObservableCollection<ItemModel> _items = new ObservableCollection<ItemModel>();

        public ListPickerFlyoutDemo()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // 構造並綁定數據
            for (int i = 0; i < 10; i++)
            {
                _items.Add(new ItemModel()
                {
                    Title = (i.ToString()),
                    ImageUrl = "/Assets/Kid.png"
                });
            }
            listPickerFlyoutSimple.ItemsSource = _items;
            listPickerFlyoutSingle.ItemsSource = _items;
            listPickerFlyoutMulti.ItemsSource = _items;            
        }

        // 用戶選中某一 item 后觸發的事件
        private void listPickerFlyoutSimple_ItemsPicked(ListPickerFlyout sender, ItemsPickedEventArgs args)
        {
            lblMsg.Text += "selected value: " + sender.SelectedValue;
            lblMsg.Text += Environment.NewLine;
        }

        // 用戶選中某一 item 后觸發的事件
        private void listPickerFlyoutSingle_ItemsPicked(ListPickerFlyout sender, ItemsPickedEventArgs args)
        {
            lblMsg.Text += "selected title: " + ((ItemModel)sender.SelectedItem).Title;
            lblMsg.Text += Environment.NewLine;
        }

        // 用戶單擊“完成”按鈕后觸發的事件
        private void listPickerFlyoutMulti_ItemsPicked(ListPickerFlyout sender, ItemsPickedEventArgs args)
        {
            // 此次多選操作刪除的 items
            foreach (var item in args.RemovedItems)
            {
                lblMsg.Text += "removed item title: " + ((ItemModel)item).Title;
                lblMsg.Text += Environment.NewLine;
            }

            // 此次多選操作新增的 items
            foreach (var item in args.AddedItems)
            {
                lblMsg.Text += "added item title: " + ((ItemModel)item).Title;
                lblMsg.Text += Environment.NewLine;
            }
        }

        // 通過 ItemsPicked 事件和 Closed 事件的結合，可以判斷出用戶是否點擊了“取消”按鈕或者按了“返回鍵”
        private void listPickerFlyout_Closed(object sender, object e)
        {
            lblMsg.Text += "closed";
            lblMsg.Text += Environment.NewLine;
        }


        class ItemModel
        {
            public string Title { get; set; }
            public string ImageUrl { get; set; }
        }
    }
}

OK
[源碼下載]