# 使用華麗麗的字體 所有的TextBlock等都用的默認字體，大家是否會感覺很千篇一律很枯燥呢？對于FontFamily，我們見過一些可以用的字體，但這個屬性不像Foreground等有下拉框，所以我們在應用中見過的許多有意思的字體卻沒法用，因為不知道名字。   代碼的話也貼張圖示意一下吧。  好了，我就不再多說廢話啦，名字都是從這里來的——>>>>>  注意： 1）除了微軟雅黑外，大部分字體只能在Windows 8/8.1/10上體現出來，在WP8/8.1上無法發揮作用。這是因為這個字體庫太大，微軟沒有放到手機上。  2）大部分中文字體可以作用在英文文本上，而英文字體則無法作用在中文文本上。（經驗之談，如果特例，請告知，謝謝。） # DatePickerFlyout等的使用 這一篇講解在WP上DataPickerFlyout和TimePickerFlyout的使用，但它們只放在WP上哦，也正因此才將這一節放到最后一章的。 ~~~ <Grid Background="Blue"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Grid.Row="0" Margin="12" Orientation="Vertical"> <Button Content="Let's Show DatePicker" > <Button.Flyout> <DatePickerFlyout x:Name="datePickerFlyout" Title="選擇日期" DatePicked="datePickerFlyout_DatePicked" Closed="datePickerFlyout_Closed" /> </Button.Flyout> </Button> <DatePicker Header="Date" Margin="4" /> <TextBlock Name="textBlockDate" FontSize="20" Margin="4" /> </StackPanel> <StackPanel Grid.Row="1" Margin="12" Orientation="Vertical"> <Button Content="Let's Show TimePicker" > <Button.Flyout> <TimePickerFlyout x:Name="timePickerFlyout" Title="選擇時間" TimePicked="timePickerFlyout_TimePicked" Closed="timePickerFlyout_Closed" /> </Button.Flyout> </Button> <TimePicker Header="Time" Margin="4" /> <TextBlock Name="textBlockTime" FontSize="20" Margin="4"/> </StackPanel> </Grid> ~~~ 后臺事件如下： ~~~ 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的完成按鈕后激活該事件 private void datePickerFlyout_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args) { textBlockDate.Text = args.NewDate.ToString("yyyy-MM-dd hh:mm:ss"); textBlockDate.Text += Environment.NewLine; } // 當用戶點擊DatePicker的取消按鈕或手機的返回按鈕后激活該事件，當點擊完成按鈕后也將調用該事件 private void datePickerFlyout_Closed(object sender, object e) { textBlockDate.Text += "You just close the DatePickerFlyout."; textBlockDate.Text += Environment.NewLine; } // 當用戶點擊TimePicker的完成按鈕后激活該事件 private void timePickerFlyout_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args) { // e.OldTime - 原時間 // e.NewTime - 新時間 textBlockTime.Text = args.NewTime.ToString("c"); textBlockTime.Text += Environment.NewLine; } // 當用戶點擊TimePicker的取消按鈕或手機的返回按鈕后激活該事件，當點擊完成按鈕后也將調用該事件 private void timePickerFlyout_Closed(object sender, object e) { textBlockTime.Text += "You just close the TimePickerFlyout."; textBlockTime.Text += Environment.NewLine; } } ~~~ 簡單的講，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/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](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); } } } ~~~ 好了代碼就到這里了，來幾張截圖。