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

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

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

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

/*
 * 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; }
        }
    }
}