[Windows 8 App]Windows 8.1新的控制項和功能------TimePicker

2013-12-09

Windows 8 升級至 Windows 8.1有一些新個控制項或是功能的新增

這裡我們介紹【TimePicker】

【TimePicker】提供一個標準的方式

可以讓使用各種方式來挑選時間

可以設定12小時制的或是24小時制的

也可以預設時間

我們透過範例來介紹【TimePicker】

新增一個專案【TimePicker】，開啟【MainPage.xaml】

在【MainPage.xaml】中裡輸入以下程式碼

【MainPage.xaml】完整程式碼：

<Page
    x:Class="TimePicker.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TimePicker"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TimePicker x:Name="arrivalTimePicker" Header="標準的時刻" Margin="500,196,0,438" Height="134" Width="409" FontSize="40"/>
        <TimePicker ClockIdentifier="24HourClock" Header="24小時制時刻" Margin="500,472,0,156" Height="140" Width="372" FontSize="40"/>
    </Grid>
</Page>

【TimePicker】的程式碼很簡單，只要一行就能顯示時間

這裡我們做了二個時間，一個12H的，一個24H的

以往我們要顯示時間的標題都需要新增一個TextBlock的控制項

但是，現在有Header來做標題，這樣就不需要為了移動位置而傷腦筋

12H和24H的差別在於【ClockIdentifier="24HourClock"】多了這一個就能讓時間顯示24小時制的

顯示的時間會隨著電腦上的時間更動

這是【TimePicker】的執行畫面：

那我們如果要預設時間呢?

開啟【MainPage.xaml.cs】

在裡面加入這段程式碼就能預設時間

 protected override void OnNavigatedTo(NavigationEventArgs e)
   {
      // 預設時間為早上8點
      arrivalTimePicker.Time = new TimeSpan(8, 0, 0);
   }

執行預設時間後的【TimePicker】專案畫面：

完整的【MainPage.xaml.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.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=234238

namespace TimePicker
{
    /// <summary>
    /// 可以在本身使用或巡覽至框架內的空白頁面。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // 預設時間為早上8點
            arrivalTimePicker.Time = new TimeSpan(8, 0, 0);
        }
    }
}

回首頁