Pemilih waktu
Pemilih waktu memberi Anda cara standar untuk memungkinkan pengguna memilih nilai waktu menggunakan sentuhan, mouse, atau input keyboard.
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 masuk, permukaan pemilih meluas secara vertikal dari tengah bagi pengguna untuk membuat pilihan. Pemilih waktu melapisi UI lain; itu tidak mendorong UI lain keluar dari jalan.
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 .
- API UWP: Kelas TimePicker, properti SelectedTime
- Buka aplikasi Galeri WinUI 2 dan lihat TimePicker beraksi. Aplikasi Galeri WinUI 2 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 2. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub.
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
- API Penting: Kelas TimePicker, properti SelectedTime
Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari 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:
Memformat pemilih waktu
Secara default, pemilih waktu menunjukkan 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"/>
Anda dapat mengatur properti MinuteIncrement untuk menunjukkan kenaikan waktu yang ditampilkan dalam pemilih menit. Misalnya, 15 menentukan bahwa TimePicker
kontrol menit hanya menampilkan pilihan 00, 15, 30, 45.
<TimePicker MinuteIncrement="15"/>
Nilai waktu
Kontrol pemilih waktu memiliki API TimeChanged/ dan SelectedTime/SelectedTimeChanged. Perbedaan antara ini adalah yang 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, nilai disinkronkan Time
dengan SelectedTime
nilai . Ketika SelectedTime
adalah null
, pemilih 'tidak diatur' dan menunjukkan nama bidang alih-alih waktu.
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 bisa antara 0 dan 23 dan Mm adalah menit dan bisa 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 satuDateTime
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 nullable, Anda harus secara eksplisit melemparkannya ke DateTime
, seperti ini: DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);
. Properti Time
, bagaimanapun, dapat digunakan tanpa pemeran, seperti ini: 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);
}
}
Mendapatkan kode sampel
- Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.
Topik terkait
Windows developer