時間選擇器

時間選取器提供了一種標準化方法，讓使用者可以使用觸控、滑鼠或鍵盤輸入來選擇時間值。

這是正確的控制項嗎？

使用時間選擇器讓用戶挑選單一時間值。

如需如何選擇正確文字控制項的詳細資訊，請參閱日期和時間控制項文章。

範例

進入點會顯示所選時間，當使用者選擇入口點時，選擇器介面會從中間垂直展開，供使用者進行選擇。 時間選擇器會重疊在其他 UI 上; 不會推擠其他 UI。

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

此控制項的 API 位在 Windows.UI.Xaml.Controls 命名空間中。

• UWP API：TimePicker 類別、SelectedTime 屬性
• 開啟 WinUI 2 資源庫應用程式，並查看 TimePicker 運作情形。 WinUI 2 資源庫應用程式包含大部分 WinUI 2 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 Github 上取得原始程式碼。

建議使用最新的 WinUI 2 來取得所有控制項的最新樣式和範本。 WinUI 2.2 或更新版本包含此使用圓角之控制項的新範本。 如需詳細資訊，請參閱圓角半徑。

建立時間選擇器

• 重要 API：DatePicker 類別、SelectedTime 屬性

開啟 WinUI 3 資源庫應用程式，並查看 TimePicker 運作情形。

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

此範例會示範如何建立具有標題的簡單時間選取器。

<TimePicker x:Name="arrivalTimePicker" Header="Arrival time"/>

TimePicker arrivalTimePicker = new TimePicker();
arrivalTimePicker.Header = "Arrival time";

產生的時間選取器看起來會像這樣：

格式化時間選取器

預設情況下，時間選擇器顯示帶有 AM/PM 選擇器的 12 小時時鐘。 您可以將 ClockIdentifier 屬性設定為「24HourClock」以顯示 24 小時時鐘。

<TimePicker Header="24HourClock" SelectedTime="18:21" ClockIdentifier="24HourClock"/>

您可以設定 MinuteIncrement 屬性來指示分鐘選擇器中顯示的時間增量。 例如，15 指定TimePicker分鐘控制項僅顯示選項 00、15、30、45。

<TimePicker MinuteIncrement="15"/>

時間值

時間選擇器控制項同時具有 TimeChanged/ 和 SelectedTime/SelectedTimeChanged API。 它們之間的差異在於 Time 不可為 Null，而 SelectedTime 可為 Null。

SelectedTime 的值用於填入時間選取器，預設為 null。 如果 SelectedTime 為 null，則 Time 屬性會設定為 0 的 TimeSpan；否則，Time 值會與 SelectedTime 值同步處理。 當 SelectedTime 是 null 時，選取器處於「未設定」狀態，並顯示欄位名稱而不是時間。

初始化時間值

在程式碼中，您可以將時間屬性初始化為 TimeSpan 類型的值：

TimePicker timePicker = new TimePicker
{
    SelectedTime = new TimeSpan(14, 15, 00) // Seconds are ignored.
};

您可以將時間值設定為 XAML 中的屬性。 如果您已經在 XAML 中宣告 TimePicker 物件，而且未針對時間值使用系結，這可能最容易。 使用 Hh:Mm 形式的字串，其中 Hh 是小時，可以介於 0 到 23 之間，Mm 是分鐘，可以介於 0 到 59 之間。

<TimePicker SelectedTime="14:15"/>

注意

注意如需有關日期和時間值的重要資訊，請參閱日期和時間控制項文章中的 DateTime 與 Calendar 值。

使用時間值

到 SelectedTime 或 Time 屬性，直接在程式碼中使用時間屬性，或處理 SelectedTimeChanged 或 TimeChanged 事件。

有關一起使用 DatePicker 和 TimePicker 來更新單一 DateTime 值的範例，請參閱行事曆、日期和時間控制項 - 將日期選取器和時間選取器一起使用。

在這裡，SelectedTime 屬性可用來比較選取的時間與目前時間。

請注意，由於 SelectedTime 屬性可為空，因此您必須將其明確轉換為 DateTime，如下所示：DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);。 不過，Time 屬性可以在不使用轉換的情況下使用，如下所示：DateTime myTime = DateTime.Today + checkTimePicker.Time;。

<StackPanel>
    <TimePicker x:Name="checkTimePicker"/>
    <Button Content="Check time" Click="{x:Bind CheckTime}"/>
    <TextBlock x:Name="resultText"/>
</StackPanel>

private void CheckTime()
{
    // Using the Time property.
    // DateTime myTime = DateTime.Today + checkTimePicker.Time;
    // Using the SelectedTime property (nullable requires cast to DateTime).
    DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);
    if (DateTime.Now >= myTime)
    {
        resultText.Text = "Your selected time has already past.";
    }
    else
    {
        string hrs = (myTime - DateTime.Now).Hours.ToString();
        string mins = (myTime - DateTime.Now).Minutes.ToString();
        resultText.Text = string.Format("Your selected time is {0} hours, {1} minutes from now.", hrs, mins);
    }
}

取得範例程式碼

• WinUI 資源庫範例 - 以互動式格式查看所有 XAML 控制項。

相關主題

• 日期和時間控制項
• 行事曆日期選擇器
• 行事曆檢視表
• 日期選取器