对于大部分变成人员来说，弹出层的实现是必须的，不论是做交互还是提升应用可用性，美观性，都是必不可少的。
然后并不像JS实现弹出层那么简单，WP8.1的弹出层比较复杂。然而实现其功能却也是有很多种方法的。
可以先来总结下一些具有弹出效果的控件和类吧：
a.MessageDialog类，这是最简单的弹出框了
b.ContentDialog类，比a弹出框复杂一些，可以自定义，非常实用
b.DatePicker控件和TimePicker控件
e.ContentDialog类
要点一：
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="クリック" Tapped="TextBlock_Tapped" FontSize="20">
<FlyoutBase.AttachedFlyout>
<Flyout>
<TextBlock Text="こんにちは"/>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>上述两种方法不同的是，前者Button控件结合Flyout控件时，Flyout是默认关联到了Click事件上的。
而后者非Button控件结合Flyout控件时，就需要在.CS中写对应的点击事件了。如下代码：
//通过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,ListPickerFlyout,MenuFlyout
第一种很好理解，上文也说过，就不多说了。
第二种和第三种是关于选择日期和时间的弹出层，其实可以参考DatePicker控件和
TimerPicker控件。如下代码：
<!--浮出选择日期弹窗，点击确定后触发DatePicked时间，然后可以获取选中的日期-->
<Button Content="Show DatePicker">
<Button.Flyout>
<DatePickerFlyout x:name="dp" DatePicked="dp_DatePicked"/>
</Button.Flyout>
</Button>
<!--浮出选择时间弹窗，点击确认后触发TimePicked时间，然后可以获取选中的时间-->
<Button Content="Shwo TimePicker">
<Button.Flyout>
<TimePickerFlyout x:name="tp" TimePicked="tp_TimePicked"/>
</Button.Flyout>
</Button>注意在.CS中写法即可：
//DatePickerFlyout的日期选中事件，在事件处理程序里面可以获取选中的日期
private async void dp_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
{
await new MessageDialog(args.NewDate.ToString()).ShowAsync();
}
//TimePickerFlyout的时间选中事件，在事件处理程序里面可以获取选中的时间
private async void tp_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
{
await new MessageDialog(args.NewTime.ToString()).ShowAsync();
}
第四种和第五种都属于选择性的弹出层，弹出的层往往覆盖整个手机屏幕。重要的区别是后台的选中事件是什么。
PickerFlyout------------Confirmed事件
ListPickerFlyout--------ItemsPicked事件(数据绑定部分可以参考listview的
ItemTemplate模板的DataTemplate模板的写法)
代码如下：
XAML：
<!--浮出选择弹窗，显示底下的确认取消菜单栏并且处理器确认时间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="lpf" ItemsPicked="lpf_ItemsPicked">
<ListPickerFlyout.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="40"></TextBlock>
</DataTemplate>
</ListPickerFlyout.ItemTemplate>
</ListPickerFlyout>
</Button.Flyout>
</Button>.CS：
//绑定ListPickerFlyout数据源
listPickerFlyout.ItemsSource = new List<string> { "织田信长","丰成秀吉","德川家康","石田三成"};
//PickerFlyout的确认事件，在事件处理程序里面可以处理相关的确认逻辑
private async void PickerFlyout_Confirmed(PickerFlyout sender, PickerConfirmedEventArgs args)
{
await new MessageDialog("確認をクリックしました").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("選択："+sender.SelectedItem.ToString()).ShowAsync();
}
}
第六种，也就是最后一种，代码如下：
XAML：
<!--浮出上下文菜单，点击后显示获取菜单栏的文本-->
<Button x:Name="menuFlyoutButton" Content="Show MenuFlyout">
<Button.Flyout>
<MenuFlyout>
<MenuFlyoutItem x:name="mfi" Text="汤姆克鲁斯" Click="mfi_Click"/>
<MenuFlyoutItem x:name="mfi" Text="约翰尼德普" Click="mfi_Click"/>
<MenuFlyoutItem x:name="mfi" Text="威尔斯密斯" Click="mfi_Click"/>
</MenuFlyout>
</Button.Flyout>
</Button>
//MenuFlyout的菜单选项的点击事件，点击后显示获取菜单栏的文本
private async void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
await new MessageDialog((sender as MenuFlyoutItem).Text).ShowAsync();
}运行截图：
总界面：
点击第一个按钮：
点击第二个按钮：
选择"汤姆克鲁斯":
点击第三个按钮：(第三个和第四个功能类似，所以这里只测试了DatePickerFlyout)
点击第五个按钮：
点击第六个按钮：
总代码：
XAML：
<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>
.CS：
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));
}
}
}
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
