与众不同 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 = ; i < ; 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
[源码下载]