Selettore orario

Il selettore dell'ora offre un modo standardizzato per consentire agli utenti di selezionare un orario usando l'input tramite tocco, mouse o tastiera.

Questo è il controllo giusto?

Usare una selezione ora per consentire a un utente di selezionare un singolo valore di ora.

Per altre info sulla scelta del controllo corretto, vedi l'articolo Controlli data e ora .

Esempi

Il punto di ingresso visualizza l'ora scelta e quando l'utente seleziona il punto di ingresso, una superficie di selezione si espande verticalmente dal centro per consentire all'utente di effettuare una selezione. Il selettore orario si sovrappone alle altre interfacce utente; non sposta altre interfacce utente.

Creare un selettore dell'ora

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Questo esempio illustra come creare un selettore orario semplice con un'intestazione.

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

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

Il selettore dell'ora risultante è simile al seguente:

Formattazione del selettore di orario

Per impostazione predefinita, il selettore di orario mostra un orologio a 12 ore con un selettore AM/PM. È possibile impostare la proprietà ClockIdentifier su "24HourClock" per visualizzare invece un orologio di 24 ore.

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

È possibile impostare la proprietà MinuteIncrement per indicare gli incrementi di tempo visualizzati nella selezione minuti. Ad esempio, 15 specifica che il controllo minuti TimePicker visualizza solo le scelte 00, 15, 30, 45.

<TimePicker MinuteIncrement="15"/>

Valori temporali

Il controllo di selezione dell'ora include le API Time/TimeChanged e SelectedTime/SelectedTimeChanged. La differenza tra questi è che Time non ammette valori Null, mentre SelectedTime ammette valori Null.

Il valore di SelectedTime viene usato per popolare il selettore dell'ora ed è null per impostazione predefinita. Se SelectedTime è null, la proprietà Time viene impostata su TimeSpan pari a 0; in caso contrario, il valore Time viene sincronizzato con il valore SelectedTime. Quando SelectedTime è null, il selettore è "unset" (non impostato) e mostra i nomi dei campi anziché un'ora.

Inizializzazione di un valore temporale

Nel codice è possibile inizializzare le proprietà ora in un valore di tipo TimeSpan:

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

È possibile impostare il valore dell'ora come attributo in XAML. Ciò è probabilmente più semplice se si sta già dichiarando l'oggetto TimePicker in XAML e non si usano binding per il valore del tempo. Usare una stringa nel formato Hh:Mm dove Hh indica le ore e può essere compreso tra 0 e 23 e Mm indica i minuti e può essere compreso tra 0 e 59.

<TimePicker SelectedTime="14:15"/>

L'uso dei valori temporali

Per utilizzare il valore del tempo nell'app, generalmente si utilizza un binding dei dati alla proprietà SelectedTime o Time, si usano le proprietà del tempo direttamente nel codice o si gestisce l'evento SelectedTimeChanged o TimeChanged.

Per un esempio di utilizzo di DatePicker e TimePicker insieme per aggiornare un singolo valore DateTime, vedere Controlli calendario, data e ora: usare insieme una selezione data e una selezione ora.

In questo caso, la proprietà SelectedTime viene usata per confrontare l'ora selezionata con l'ora corrente.

Poiché la proprietà SelectedTime ammette valori Null, è necessario eseguirne il cast esplicito in DateTime, come illustrato di seguito: DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);. La proprietà Time, tuttavia, può essere usata senza cast, come illustrato di seguito: 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);
    }
}

UWP e WinUI per la piattaforma UWP

Le API per questo controllo esistono nello spazio dei nomi Windows.UI.Xaml.Controls .

Ti consigliamo di usare la versione più recente di WinUI per la piattaforma UWP per ottenere gli stili e i modelli più recenti per tutti i controlli. WinUI 2.2 o versioni successive include un nuovo modello per questo controllo che usa angoli arrotondati. Per altre informazioni, vedere Raggio dell'angolo.

Argomenti correlati

• Controlli di data e ora
• Selezione data calendario
• Visualizzazione Calendario
• Selezione data