Xamarin.Forms TimePicker

Xamarin.Forms允許使用者選取時間的檢視。

會 Xamarin.FormsTimePicker 叫用平台的時間選擇器控件，並允許用戶選取時間。 TimePicker 會定義下列屬性：

• Time 類型 TimeSpan為 ，選取的時間預設為 TimeSpan 0。 此 TimeSpan 類型表示自午夜以來的時間持續時間。
• Format 類型 string為，這是 預設為 「t」 的標準 或 自定義 .NET 格式字串，這是短時間模式。
• TextColor 型 Color別 為 ，用來顯示所選時間的色彩，預設為 Color.Default。
• FontAttributes 型 FontAttributes別為 ，預設為 FontAtributes.None。
• FontFamily 型 string別為 ，預設為 null。
• FontSize 型 double別 為 ，預設為 -1.0。
• CharacterSpacing類型 double為 的 ，是文字字元 TimePicker 之間的間距。

所有這些屬性都受到 BindableProperty 物件支援，這表示可以設定樣式，而且屬性可以是數據系結的目標。 屬性 Time 的默認系結模式 BindingMode.TwoWay為 ，這表示它可以是使用 Model-View-ViewModel （MVVM） 架構之應用程式中數據系結的目標。

TimePicker不包含事件，表示新的選取Time值。 如果您需要收到此通知，您可以新增 事件的處理程式 PropertyChanged 。

初始化 Time 屬性

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

TimePicker timePicker = new TimePicker
{
  Time = new TimeSpan(4, 15, 26) // Time set to "04:15:26"
};

Time在 XAML 中指定 屬性時，值會轉換成 TimeSpan 並經過驗證，以確保毫秒數大於或等於 0，且時數小於 24。 時間元件應該以冒號分隔：

<TimePicker Time="4:15:26" />

如果 的 BindingContext TimePicker 屬性設定為 ViewModel 的實例，其中包含 TimeSpan 名為 SelectedTime 的屬性（例如），您可以具現化 TimePicker 如下：

<TimePicker Time="{Binding SelectedTime}" />

在此範例中，屬性 Time 會初始化為 SelectedTime ViewModel 中的 屬性。 Time由於屬性具有的TwoWay系結模式，因此用戶選取的任何新時間都會自動傳播至 ViewModel。

TimePicker如果 不包含其 Time 屬性上的系結，應用程式應該將處理程式附加至PropertyChanged當使用者選取新時間時要通知的事件。

如需設定字型屬性的詳細資訊，請參閱 字型。

TimePicker 和版面配置

您可以使用不受限制的水平版面設定選項， 例如 Center、 Start或 End 搭配 TimePicker：

<TimePicker ···
            HorizontalOptions="Center"
            ··· />

不過，不建議這樣做。 根據屬性的 Format 設定，選取的時間可能需要不同的顯示寬度。 例如，“T” 格式字串會使 TimePicker 檢視以長格式顯示時間，而 “4：15：26 AM” 需要比 “4：15 AM” 短時間格式 （“t”） 更大的顯示寬度。 視平臺而定，此差異可能會導致 TimePicker 檢視在版面配置中變更寬度，或讓顯示器遭到截斷。

提示

最好將預設設定與搭配TimePicker使用，而不是在放入GridTimePicker儲存格時使用的寬度。Fill HorizontalOptionsAuto

應用程式中的 TimePicker

此範例在其頁面上包含 TimePicker、 Entry和 Switch 檢視。 TimePicker可用來選取時間，而當該時間發生時，就會顯示警示對話框，以提醒使用者在 中的Entry文字，前提是Switch已開啟 。 以下是 XAML 檔案：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SetTimer"
             x:Class="SetTimer.MainPage">
    <StackLayout>
        ...
        <Entry x:Name="_entry"
               Placeholder="Enter event to be reminded of" />
        <Label Text="Select the time below to be reminded at." />
        <TimePicker x:Name="_timePicker"
                    Time="11:00:00"
                    Format="T"
                    PropertyChanged="OnTimePickerPropertyChanged" />
        <StackLayout Orientation="Horizontal">
            <Label Text="Enable timer:" />
            <Switch x:Name="_switch"
                    HorizontalOptions="EndAndExpand"
                    Toggled="OnSwitchToggled" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Entry可讓您輸入在選取時間發生時顯示的提醒文字。 會 TimePicker 針對長期格式指派 Format 「T」 的屬性。 它具有附加至 PropertyChanged 事件的事件處理程式，且 Switch 的處理程式已附加至其 Toggled 事件。 這些事件處理程式位於程式代碼後置檔案中，並呼叫 SetTriggerTime 方法：

public partial class MainPage : ContentPage
{
    DateTime _triggerTime;

    public MainPage()
    {
        InitializeComponent();

        Device.StartTimer(TimeSpan.FromSeconds(1), OnTimerTick);
    }

    bool OnTimerTick()
    {
        if (_switch.IsToggled && DateTime.Now >= _triggerTime)
        {
            _switch.IsToggled = false;
            DisplayAlert("Timer Alert", "The '" + _entry.Text + "' timer has elapsed", "OK");
        }
        return true;
    }

    void OnTimePickerPropertyChanged(object sender, PropertyChangedEventArgs args)
    {
        if (args.PropertyName == "Time")
        {
            SetTriggerTime();
        }
    }

    void OnSwitchToggled(object sender, ToggledEventArgs args)
    {
        SetTriggerTime();
    }

    void SetTriggerTime()
    {
        if (_switch.IsToggled)
        {
            _triggerTime = DateTime.Today + _timePicker.Time;
            if (_triggerTime < DateTime.Now)
            {
                _triggerTime += TimeSpan.FromDays(1);
            }
        }
    }
}

方法 SetTriggerTime 會根據 DateTime.Today 屬性值和 TimeSpan 從 TimePicker傳回的值計算定時器時間。 這是必要的，因為 DateTime.Today 屬性會 DateTime 傳回 ，指出目前的日期，但具有午夜的時間。 如果定時器時間今天已經過去，則假設明天為 。

定時器會每秒刻度一次，執行 OnTimerTick 方法來檢查 是否 Switch 開啟，以及目前時間是否大於或等於定時器時間。 定時器時間發生時， DisplayAlert 方法會將警示對話框呈現給使用者作為提醒。

第一次執行範例時，檢視 TimePicker 會初始化為上午 11 點。 TimePicker點選會叫用平台時間選擇器。 平臺會以非常不同的方式實作時間選擇器，但每個方法都熟悉該平台的使用者：

提示

在 Android 上 TimePicker ，您可以覆寫 CreateTimePickerDialog 自定義轉譯器中的 方法來自定義對話方塊。 例如，這允許將其他按鈕新增至對話方塊。

選取時間之後，選取的時間會顯示在 中 TimePicker：

Switch假設 已切換至開啟位置，應用程式會顯示警示對話框，提醒使用者在選取的時間發生時在 中的Entry文字：

一旦顯示警示對話框，就會 Switch 切換至關閉位置。

相關連結

• TimePicker API