【萬裏征程——Windows App開發】DatePickerFlyout、TimePickerFlyout的使用
阿新 • • 發佈：2017-06-17
name != edt 知識 spa val edit .text windows 7
已經有挺長時間沒有更新這個專欄了，只是剛才有網友私信問我一個問題如今就火速更新上一篇~
這一篇解說在WP上DataPickerFlyout和TimePickerFlyout的使用。但它們僅僅能在WP上跑哦~
<Grid Background="Blue">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions 後臺事件例如以下：
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
// 令天數加1
datePickerFlyout.Date = DateTimeOffset.Now.AddDays(1);
// 設置可選擇的最大年份和最小年份
datePickerFlyout.MinYear = DateTimeOffset.Now.AddYears(-100);
datePickerFlyout.MaxYear = DateTimeOffset.Now.AddYears(100);
// 此處也能夠令“年“、”月“、”日“中的某一個不顯示
datePickerFlyout.YearVisible = true;
datePickerFlyout.MonthVisible = true;
datePickerFlyout.DayVisible = true;
// 選擇的歷法
// （Gregorian 公歷, Hebrew 希伯來歷, Hijri 回歷, Japanese 日本歷, Julian 羅馬儒略歷, Korean 朝鮮歷, Taiwan 臺灣歷, Thai 泰國歷, UmAlQura 古蘭經歷）
datePickerFlyout.CalendarIdentifier = CalendarIdentifiers.Gregorian;
// Time - TimePicker 控件當前顯示的時間
timePickerFlyout.Time = new TimeSpan(18, 0, 0);
// 設置TimePickerFlyout的分鐘選擇框內數字的增幅
timePickerFlyout.MinuteIncrement = 2;
//設置為24小時制，也能夠為12小時制
timePickerFlyout.ClockIdentifier = ClockIdentifiers.TwentyFourHour;
}
// 當用戶點擊DatePicker的完畢button後激活該事件
private void datePickerFlyout_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
{
textBlockDate.Text = args.NewDate.ToString("yyyy-MM-dd hh:mm:ss");
textBlockDate.Text += Environment.NewLine;
}
// 當用戶點擊DatePicker的取消button或手機的返回button後激活該事件，當點擊完畢button後也將調用該事件
private void datePickerFlyout_Closed(object sender, object e)
{
textBlockDate.Text += "You just close the DatePickerFlyout.";
textBlockDate.Text += Environment.NewLine;
}
// 當用戶點擊TimePicker的完畢button後激活該事件
private void timePickerFlyout_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
{
// e.OldTime - 原時間
// e.NewTime - 新時間
textBlockTime.Text = args.NewTime.ToString("c");
textBlockTime.Text += Environment.NewLine;
}
// 當用戶點擊TimePicker的取消button或手機的返回button後激活該事件，當點擊完畢button後也將調用該事件
private void timePickerFlyout_Closed(object sender, object e)
{
textBlockTime.Text += "You just close the TimePickerFlyout.";
textBlockTime.Text += Environment.NewLine;
}
}時間倉促就記錄到這裏咯。掰掰~
該網友說我剛寫的不是他所須要的。so……重來一遍吧……
簡單的講，Flyout有兩種創建方式，一種就是上面的通過Button的Flyout屬性。還有一種是通過FlyoutBase.AttachedFlyout屬性給不論什麽的FrameworkElement對象加入它。
關於FrameworkElement的很多其它知識。能夠訪問下面鏈接。
https://msdn.microsoft.com/zh-cn/library/vstudio/system.windows.frameworkelement(v=vs.100).aspx
https://msdn.microsoft.com/en-us/library/system.windows.frameworkelement(v=vs.110).aspx
而Flyout則有6種不同的類型：Flyout、DatePickerFlyout、ListPickerFlyout、MenuFlyout、TimePickerFlyout。
時間緊迫就直接Show代碼了。
XAML代碼：
<Page.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="12"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Green"/>
</Style>
</Page.Resources>
<Grid Background="Blue">
<StackPanel Orientation="Vertical">
<!-- Flyout -->
<Button Content="Let‘s Show Flyout">
<Button.Flyout>
<Flyout>
<StackPanel >
<TextBox PlaceholderText="What do you want to say?"/>
<Button HorizontalAlignment="Right" Content="Yup"/>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<!-- DatePickerFlyout -->
<Button Content="Let‘s Show DatePicker" HorizontalAlignment="Right">
<Button.Flyout>
<DatePickerFlyout Title="You need to choose Date: " DatePicked="DatePickerFlyout_DatePicked"/>
</Button.Flyout>
</Button>
<!-- ListPickerFlyout -->
<Button Content="Let‘s Show ListPicker" >
<Button.Flyout>
<ListPickerFlyout x:Name="listPickerFlyout" Title="選擇操作系統：" ItemsPicked="listPickerFlyout_ItemsPicked" >
<ListPickerFlyout.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="30"></TextBlock>
</DataTemplate>
</ListPickerFlyout.ItemTemplate>
</ListPickerFlyout>
</Button.Flyout>
</Button>
<!-- MenuFlyout -->
<Button x:Name="menuFlyoutButton" Content="Let‘s Show MenuFlyout" HorizontalAlignment="Right">
<Button.Flyout >
<MenuFlyout>
<MenuFlyoutItem Text="You just say yes?" Click="MenuFlyoutItem_Click"/>
<MenuFlyoutItem Text="You just say no?"
Click="MenuFlyoutItem_Click"/>
<MenuFlyoutItem Text="You say nothing..." Click="MenuFlyoutItem_Click"/>
</MenuFlyout>
</Button.Flyout>
</Button>
<!-- PickerFlyout -->
<Button Content="Let‘s Show Picker" >
<Button.Flyout>
<PickerFlyout Confirmed="PickerFlyout_Confirmed" ConfirmationButtonsVisible="True">
<TextBlock Text="Are you ok?" FontSize="30" Margin="0 100 0 0"/>
</PickerFlyout>
</Button.Flyout>
</Button>
<!-- TimePickerFlyout -->
<Button Content="Let‘s Show TimePicker" HorizontalAlignment="Right">
<Button.Flyout>
<TimePickerFlyout Title="You need to choose Time: " TimePicked="TimePickerFlyout_TimePicked"/>
</Button.Flyout>
</Button>
<!-- FlyoutBase -->
<TextBlock Text="Game Over" Margin="12" Foreground="Wheat" Tapped="TextBlock_Tapped" FontSize="20">
<FlyoutBase.AttachedFlyout>
<Flyout>
<TextBox Text="哎喲，不錯哦！"/>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>
</StackPanel>
</Grid>後臺C#代碼：
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
// 綁定List數據到ListPickerFlyout
listPickerFlyout.ItemsSource = new List<string> { "Windows 10", "Windows 8/8.1", "Windows 7", "Windows Vista", "Windows XP","Others" };
}
// DatePickerFlyout的日期選中事件，此處事件內有是包括日期的MessageDialog控件
private async void DatePickerFlyout_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
{
await new MessageDialog(args.NewDate.ToString()).ShowAsync();
}
// ListPickerFlyout的選中事件，選擇列表中的一項後會以彈窗的方式顯示出來
private async void listPickerFlyout_ItemsPicked(ListPickerFlyout sender, ItemsPickedEventArgs args)
{
if (sender.SelectedItem != null)
{
await new MessageDialog("You choose: " + sender.SelectedItem.ToString()).ShowAsync();
}
}
// MenuFlyout的菜單選項的點擊事件，將選擇的本文賦值給Content
private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
menuFlyoutButton.Content = (sender as MenuFlyoutItem).Text;
}
// PickerFlyout的確認事件。此處事件內有是包括字符串的MessageDialog控件
private async void PickerFlyout_Confirmed(PickerFlyout sender, PickerConfirmedEventArgs args)
{
await new MessageDialog("You choose ok").ShowAsync();
}
// TimePickerFlyout的時間選中事件。此處事件內有是包括所選時間的MessageDialog控件
private async void TimePickerFlyout_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
{
await new MessageDialog(args.NewTime.ToString()).ShowAsync();
}
// 通過FlyoutBase.ShowAttachedFlyout方法來展示出Flyout控件
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
if (element != null)
{
FlyoutBase.ShowAttachedFlyout(element);
}
}
}好了代碼就到這裏了，來幾張截圖。童鞋們看出來我的手機型號了麽？
那這一篇就結束啦，我的手機是Lumia 638……
感謝您的訪問，希望對您有所幫助。 歡迎大家關註、收藏以及評論。
為使本文得到斧正和提問，轉載請註明出處：
http://blog.csdn.net/nomasp
【萬裏征程——Windows App開發】DatePickerFlyout、TimePickerFlyout的使用