首页 > 代码库 > WP8.1的Flyout控件
WP8.1的Flyout控件
对于大部分变成人员来说,弹出层的实现是必须的,不论是做交互还是提升应用可用
性,美观性,都是必不可少的。
然后并不像JS实现弹出层那么简单,WP8.1的弹出层比较复杂。然而实现其功能却也是有
很多种方法的,一种是类似于WPF中的Popup控件,另一种就是利用WP8.1自带的Flyout控
件,然而如果不想被自带的控件绊住,也可以自己通过变换和动画的结合实现。
当然如果不是用XAML写的话,用HTML5+CSS3+JS也许就不用这么麻烦了。
先来研究下Flyout这个控件到底是怎么用的呢?
要点一:
与MessageDialog这个方法不同,前者要通过后台去写,去实现。简单的交互倒是可以实
现,但是如果要实现很复杂的交互,这种方法并不太适合。
而Flyout控件属于辅助控件,必须与其他控件一起结合起来才能实现其功能。取消的方
法可以通过单击或者点击控件外部即可取消浮出内容。
记住Flyout是用于交互的,所以一开始是不会显示出来的。只有通过用户交互性点击才
能显示
要点二:
准确地说,一般VS中的控件都是可以与Flyout控件结合起来使用的,但是会稍有不同。
对于Button控件,可以直接与Flyout结合,如下代码:
<!--最基本的Flyout控件,自定义其浮出的内容--> <Button Content="Show Flyout"> <Button.Flyout> <Flyout> <StackPanel> <TextBox PlaceholderText="<span style="font-family:KaiTi_GB2312;">名前を書いて下さい</span>"/> <Button HorizontalAlignment="Right" Content="<span style="font-family:KaiTi_GB2312;">確認</span>"/> </StackPanel> </Flyout> </Button.Flyout> </Button>
然后如果不是Button控件的话,其他的控件也可以通过<FlyoutBase.AttachedFlyout>附
加属性将Flyout附加到控件上,如下代码:(这里以TextBlock为例)
<!--使用附加属性FlyoutBase.AttachedFlyout来实现Flyout控件--> <TextBlock Text="<span style="font-family:KaiTi_GB2312;">クリック</span>" Tapped="TextBlock_Tapped" FontSize="20"> <FlyoutBase.AttachedFlyout> <Flyout> <TextBlock Text="<span style="font-family:KaiTi_GB2312;">こんにちは</span>"/> </Flyout> </FlyoutBase.AttachedFlyout> </TextBlock>
上述两种方法不同的是,前者Button控件结合Flyout控件时,Flyout是默认关联到了
Click事件上的,所以无需再后台写啥了。而后者非Button控件结合Flyout控件时,就
需要在后台写对应的点击事件了。如下代码:
//通过FlyoutBase.ShowAttachedFlyout方法来展示出Flyout控件 private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e) { FrameworkElement element = sender as FrameworkElement; if(element!=null) { FlyoutBase.ShowAttachedFlyout(element); } }
要点三:
Flyout一共分为六种
Flyout,DatePickerFlyout,TimePickerFlyout,PickerFlyout,ListPickerFl
yout,MeanFlyout
第一种很好理解,上文也说过,就不多说了。
第二种和第三种是关于选择日期和时间的弹出层,其实可以参考DatePicker控件和
TimerPicker控件。如下代码:
<!--浮出选择日期弹窗,点击确定后触发DatePicked时间,然后可以获取选中的日期--> <Button Content="Show DatePicker"> <Button.Flyout> <DatePickerFlyout<span style="font-family:KaiTi_GB2312;"> x:name="dp"</span> DatePicked="<span style="font-family:KaiTi_GB2312;">dp</span>_DatePicked"/> </Button.Flyout> </Button> <!--浮出选择时间弹窗,点击确认后触发TimePicked时间,然后可以获取选中的时间--> <Button Content="Shwo TimePicker"> <Button.Flyout> <TimePickerFlyout x:name=<span style="font-family:KaiTi_GB2312;">"tp"</span> TimePicked="<span style="font-family:KaiTi_GB2312;">tp</span>_TimePicked"/> </Button.Flyout> </Button>
注意后台写法即可:
//DatePickerFlyout的日期选中事件,在事件处理程序里面可以获取选中的日期 private async void <span style="font-family:KaiTi_GB2312;">dp</span>_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args) { await new MessageDialog(args.NewDate.ToString()).ShowAsync(); } //TimePickerFlyout的时间选中事件,在事件处理程序里面可以获取选中的时间 private async void <span style="font-family:KaiTi_GB2312;">tp</span>_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args) { await new MessageDialog(args.NewTime.ToString()).ShowAsync(); }
第四种和第五种都属于选择性的弹出层,它们弹出的层往往覆盖整个手机屏幕。重要的
区别是后台的选中事件是什么。
PickerFlyout------------Confirmed事件
ListPickerFlyout--------ItemsPicked事件(数据绑定部分可以参考listview的
ItemTemplate模板的DataTemplate模板的写法)
代码如下:
前台:
<!--浮出选择弹窗,显示底下的确认取消菜单栏并且处理器确认时间Confirmed--> <Button Content="Show Picker"> <Button.Flyout> <PickerFlyout Confirmed="PickerFlyout_Confirmed" ConfirmationButtonsVisible="True"> <TextBlock Text="<span style="font-family:KaiTi_GB2312;">確認しますか</span>?" FontSize="30" Margin="0,100,0,0"/> </PickerFlyout> </Button.Flyout> </Button> <!--浮出选择列表弹窗,绑定集合的数据,处理选中的事件ItemsPicked--> <Button Content="Show ListPicker"> <Button.Flyout> <ListPickerFlyout x:Name="<span style="font-family:KaiTi_GB2312;">lpf</span>" ItemsPicked="<span style="font-family:KaiTi_GB2312;">lpf</span>_ItemsPicked"> <ListPickerFlyout.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding}" FontSize="<span style="font-family:KaiTi_GB2312;">40</span>"></TextBlock> </DataTemplate> </ListPickerFlyout.ItemTemplate> </ListPickerFlyout> </Button.Flyout> </Button>
后台:
//绑定ListPickerFlyout数据源 listPickerFlyout.ItemsSource = new List<string> { "织田信长","丰成秀吉","德川家康","石田三成"};
//PickerFlyout的确认事件,在事件处理程序里面可以处理相关的确认逻辑 private async void PickerFlyout_Confirmed(PickerFlyout sender, PickerConfirmedEventArgs args) { await new MessageDialog("<span style="font-family:KaiTi_GB2312;">確認をクリックしました</span>").ShowAsync(); } //ListPickerFlyout的选中事件,点击列表的某一项便会触发,在事件处理程序中通常会获取选中的项目来进行相关逻辑的处理 private async void <span style="font-family:KaiTi_GB2312;">lpf</span>_ItemsPicked(ListPickerFlyout sender, ItemsPickedEventArgs args) { if(sender.SelectedItem!=null) { await new MessageDialog("<span style="font-family:KaiTi_GB2312;">選択</span>:"+sender.SelectedItem.ToString()).ShowAsync(); } }
第六种,也就是最后一种,代码如下:
前台:
<!--浮出上下文菜单,点击后显示获取菜单栏的文本--> <Button x:Name="menuFlyoutButton" Content="Show MenuFlyout"> <Button.Flyout> <MenuFlyout> <MenuFlyoutItem x<span style="font-family:KaiTi_GB2312;">:name="mfi"</span> Text="<span style="font-family:KaiTi_GB2312;">汤姆克鲁斯</span>" Click="<span style="font-family:KaiTi_GB2312;">mfi</span>_Click"/> <MenuFlyoutItem x<span style="font-family:KaiTi_GB2312;">:name="mfi"</span> Text="<span style="font-family:KaiTi_GB2312;">约翰尼德普</span>" Click="<span style="font-family:KaiTi_GB2312;">mfi</span>_Click"/> <MenuFlyoutItem x:name="mfi" Text="<span style="font-family:KaiTi_GB2312;">威尔斯密斯</span>" Click="<span style="font-family:KaiTi_GB2312;">mfi</span>_Click"/> </MenuFlyout> </Button.Flyout> </Button>后台:
//MenuFlyout的菜单选项的点击事件,点击后显示获取菜单栏的文本 private async void MenuFlyoutItem_Click(object sender, RoutedEventArgs e) { await new MessageDialog((sender as MenuFlyoutItem).Text).ShowAsync(); }
运行截图:
总界面:
点击第一个按钮:
点击第二个按钮:
选择"汤姆克鲁斯":
点击第三个按钮:(第三个和第四个功能类似,所以这里只测试了DatePickerFlyout)
点击第五个按钮:
点击第六个按钮:
总代码:
前台:
<Page x:Class="App6.TestPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App6" 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> <!--最基本的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="汤姆克鲁斯" Click="MenuFlyoutItem_Click"/> <MenuFlyoutItem Text="约翰尼德普" Click="MenuFlyoutItem_Click"/> <MenuFlyoutItem Text="威尔斯密斯" Click="MenuFlyoutItem_Click"/> </MenuFlyout> </Button.Flyout> </Button> <!--浮出选择日期弹窗,点击确定后触发DatePicked时间,然后可以获取选中的日期--> <Button Content="Show DatePicker"> <Button.Flyout> <DatePickerFlyout DatePicked="DatePickerFlyout_DatePicked"/> </Button.Flyout> </Button> <!--浮出选择时间弹窗,点击确认后触发TimePicked时间,然后可以获取选中的时间--> <Button Content="Shwo TimePicker"> <Button.Flyout> <TimePickerFlyout TimePicked="TimePickerFlyout_TimePicked"/> </Button.Flyout> </Button> <!--浮出选择弹窗,显示底下的确认取消菜单栏并且处理器确认时间Confirmed--> <Button Content="Show Picker"> <Button.Flyout> <PickerFlyout Confirmed="PickerFlyout_Confirmed" ConfirmationButtonsVisible="True"> <TextBlock Text="確認しますか?" FontSize="30" Margin="0,100,0,0"/> </PickerFlyout> </Button.Flyout> </Button> <!--浮出选择列表弹窗,绑定集合的数据,处理选中的事件ItemsPicked--> <Button Content="Show ListPicker"> <Button.Flyout> <ListPickerFlyout x:Name="listPickerFlyout" ItemsPicked="listPickerFlyout_ItemsPicked"> <ListPickerFlyout.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding}" FontSize="45"></TextBlock> </DataTemplate> </ListPickerFlyout.ItemTemplate> </ListPickerFlyout> </Button.Flyout> </Button> <!--使用附加属性FlyoutBase.AttachedFlyout来实现Flyout控件--> <TextBlock Text="クリック" Tapped="TextBlock_Tapped" FontSize="20"> <FlyoutBase.AttachedFlyout> <Flyout> <TextBlock Text="こんにちは"/> </Flyout> </FlyoutBase.AttachedFlyout> </TextBlock> <Button Content="跳转到MainPage页面" x:Name="goto_btn" Click="goto_btn_Click"/> </StackPanel> </Grid> </Page>
后台:
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Popups; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍 namespace App6 { /// <summary> /// 可用于自身或导航至 Frame 内部的空白页。 /// </summary> public sealed partial class TestPage : Page { public TestPage() { this.InitializeComponent(); //绑定ListPickerFlyout数据源 listPickerFlyout.ItemsSource = new List<string> { "织田信长","丰成秀吉","德川家康","石田三成"}; } /// <summary> /// 在此页将要在 Frame 中显示时进行调用。 /// </summary> /// <param name="e">描述如何访问此页的事件数据。 /// 此参数通常用于配置页。</param> protected override void OnNavigatedTo(NavigationEventArgs e) { } //MenuFlyout的菜单选项的点击事件,点击后显示获取菜单栏的文本 private async void MenuFlyoutItem_Click(object sender, RoutedEventArgs e) { await new MessageDialog((sender as MenuFlyoutItem).Text).ShowAsync(); } //DatePickerFlyout的日期选中事件,在事件处理程序里面可以获取选中的日期 private async void DatePickerFlyout_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args) { await new MessageDialog(args.NewDate.ToString()).ShowAsync(); } //TimePickerFlyout的时间选中事件,在事件处理程序里面可以获取选中的时间 private async void TimePickerFlyout_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args) { await new MessageDialog(args.NewTime.ToString()).ShowAsync(); } //PickerFlyout的确认事件,在事件处理程序里面可以处理相关的确认逻辑 private async void PickerFlyout_Confirmed(PickerFlyout sender, PickerConfirmedEventArgs args) { await new MessageDialog("確認をクリックしました").ShowAsync(); } //ListPickerFlyout的选中事件,点击列表的某一项便会触发,在事件处理程序中通常会获取选中的项目来进行相关逻辑的处理 private async void listPickerFlyout_ItemsPicked(ListPickerFlyout sender, ItemsPickedEventArgs args) { if(sender.SelectedItem!=null) { await new MessageDialog("選択:"+sender.SelectedItem.ToString()).ShowAsync(); } } //通过FlyoutBase.ShowAttachedFlyout方法来展示出Flyout控件 private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e) { FrameworkElement element = sender as FrameworkElement; if(element!=null) { FlyoutBase.ShowAttachedFlyout(element); } } private void goto_btn_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(MainPage)); } } }
WP8.1的Flyout控件