Share via

Pemilih waktu

  • Artikel

Pemilih waktu memberi Anda cara standar untuk memungkinkan pengguna memilih nilai waktu menggunakan sentuhan, mouse, atau input keyboard.

Contoh pemilih waktu

Apakah ini kontrol yang tepat?

Gunakan pemilih waktu untuk memungkinkan pengguna memilih satu nilai waktu.

Untuk informasi selengkapnya tentang memilih kontrol yang tepat, lihat artikel Kontrol tanggal dan waktu .

Contoh

Titik entri menampilkan waktu yang dipilih, dan ketika pengguna memilih titik entri, permukaan pemilih diperluas secara vertikal dari tengah bagi pengguna untuk membuat pilihan. Pemilih waktu melapisi UI lainnya; itu tidak mendorong UI lain keluar dari jalan.

Contoh pemilih waktu yang diperluas

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat Radius sudut.

Membuat pemilih waktu

Buka aplikasi Galeri WinUI 3 dan lihat TimePicker beraksi.

Aplikasi WinUI 3 Gallery mencakup contoh interaktif sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Contoh ini menunjukkan cara membuat pemilih waktu sederhana dengan header.

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

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

Pemilih waktu yang dihasilkan terlihat seperti ini:

Contoh pemilih waktu

Memformat pemilih waktu

Secara default, pemilih waktu memperlihatkan jam 12 jam dengan pemilih AM/PM. Anda dapat mengatur properti ClockIdentifier ke "24HourClock" untuk menampilkan jam 24 jam sebagai gantinya.

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

Pemilih waktu jam 24.

Anda dapat mengatur properti MinuteIncrement untuk menunjukkan kenaikan waktu yang ditunjukkan dalam pemilih menit. Misalnya, 15 menentukan bahwa TimePicker kontrol menit hanya menampilkan pilihan 00, 15, 30, 45.

<TimePicker MinuteIncrement="15"/>

Pemilih waktu memperlihatkan kenaikan 15 menit.

Nilai waktu

Kontrol pemilih waktu memiliki APITimeChanged/ dan SelectedTime/SelectedTimeChanged. Perbedaan antara ini adalah bahwa Time tidak dapat diubah ke null, sementara SelectedTime nullable.

Nilai digunakan SelectedTime untuk mengisi pemilih waktu dan secara null default. Jika SelectedTime adalah null, Time properti diatur ke Rentang Waktu 0; jika tidak, Time nilai disinkronkan dengan SelectedTime nilai . Ketika SelectedTime adalah null, pemilih 'tidak diatur' dan menampilkan nama bidang alih-alih waktu.

Pemilih waktu tanpa waktu yang dipilih.

Menginisialisasi nilai waktu

Dalam kode, Anda dapat menginisialisasi properti waktu ke nilai jenis TimeSpan:

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

Anda dapat mengatur nilai waktu sebagai atribut di XAML. Ini mungkin paling mudah jika Anda sudah mendeklarasikan TimePicker objek di XAML dan tidak menggunakan pengikatan untuk nilai waktu. Gunakan string dalam bentuk Hh:Mm di mana Hh adalah jam dan dapat antara 0 dan 23 dan Mm adalah menit dan dapat antara 0 dan 59.

<TimePicker SelectedTime="14:15"/>

Catatan

Untuk informasi penting tentang nilai tanggal dan waktu, lihat nilai DateTime dan Kalender di artikel Kontrol tanggal dan waktu .

Menggunakan nilai waktu

Untuk menggunakan nilai waktu di aplikasi, Anda biasanya menggunakan pengikatan data ke properti SelectedTime atau Time , menggunakan properti waktu langsung dalam kode Anda, atau menangani peristiwa SelectedTimeChanged atau TimeChanged .

Untuk contoh penggunaan DatePicker dan bersama-sama untuk memperbarui satu DateTime nilai, lihat Kontrol kalender, tanggal, dan waktu - Menggunakan pemilih tanggal dan pemilih waktu bersama-samaTimePicker.

Di sini, SelectedTime properti digunakan untuk membandingkan waktu yang dipilih dengan waktu saat ini.

Perhatikan bahwa karena SelectedTime properti dapat diubah ke null, Anda harus secara eksplisit melemparkannya ke DateTime, seperti ini: DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);. Properti Time , bagaimanapun, dapat digunakan tanpa cast, seperti ini: DateTime myTime = DateTime.Today + checkTimePicker.Time;.

Pemilih waktu, tombol, dan label teks. 

<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);
    }
}

Dapatkan kode sampel