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