時刻の選択

タイム ピッカーを使用すると、ユーザーがタッチ、マウス、またはキーボード入力を使用して時間値を選択できるようにする標準化された方法が提供されます。

タイム ピッカーの例

これは適切なコントロールですか?

タイム ピッカーを使用して、ユーザーが 1 つの時間値を選択できるようにします。

適切なコントロールの選択の詳細については、 日付と時刻コントロール に関する記事を参照してください。

例示

エントリポイントには選択した時刻が表示され、ユーザーがエントリポイントを選択すると、選択用のピッカー画面が中央から垂直に拡張され、ユーザーが選択を行えるようになります。 タイム ピッカーは他の UI をオーバーレイします。他の UI は邪魔になりません。

タイム ピッカーの展開の例

タイム ピッカーを作成する

WinUI 3 ギャラリー アイコン

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを参照します。

この例では、ヘッダーを含む単純なタイム ピッカーを作成する方法を示します。

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

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

結果の時間ピッカーは次のようになります。

タイム ピッカーの例

時刻選択ツールの書式設定

既定で、時刻の選択には、12 時間形式の時計と AM/PM セレクターが表示されます。 ClockIdentifier プロパティを "24HourClock" に設定すると、24 時間形式の時計を表示できます。

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

タイム ピッカー 24 時間制。

MinuteIncrement プロパティを設定して、分選択で表示される時間の増分を示すことができます。 たとえば、15 を指定すると、 の分コントロールには 00、15、30、45 のみが選択肢として表示されます。

<TimePicker MinuteIncrement="15"/>

15分刻みの時刻を選択するためのツール。

時刻値

時刻の選択コントロールには、TimeTimeChanged API と SelectedTimeSelectedTimeChanged API の両方が用意されています。 両者の違いは、 では null 値が許容されないのに対して、 では null 値が許容されることです。

の値は、時刻の選択を設定するのに使用され、既定では に指定されています。 が の場合、 プロパティの TimeSpan は 0 に設定されます。それ以外の場合、 の値は の値と同期されます。 が の場合、ピッカーは 'unset' になり、時刻ではなくフィールド名が表示されます。

時刻が選択されていない時間ピッカー。

時刻値の初期化

コードで、時刻のプロパティを 型の値に初期化できます。

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

時刻値を XAML の属性として設定できます。 XAML で オブジェクトを既に宣言しており、時刻値にバインドを使用していない場合は、これが最も簡単な方法です。 Hh:Mm 形式の文字列を使用します。Hh は時間で、0 から 23 までの範囲で指定できます。Mm は分で、0 から 59 の範囲で指定できます。

<TimePicker SelectedTime="14:15"/>

時刻値の使用

時刻値をアプリで使用するには、通常、SelectedTime または Time プロパティへのデータ バインドを使用する、コード内で時間のプロパティを直接使用する、SelectedTimeChanged または TimeChanged イベントを処理する、のいずれかの方法を利用します。

と を一緒に使用して単一の 値を更新する方法の例については、「カレンダー、日付、および時刻コントロール」の「日付の選択と時刻の選択を一緒に使用する」を参照してください。

ここでは、 プロパティを使用して、選択した時刻と現在の時刻を比較します。

プロパティでは null 値が許容されるため、これを に明示的にキャストする必要があることにご注意ください。たとえば、 のようにします。 ただし、 プロパティをキャストなしで使用することもできます。その場合、 のようにします。

タイムピッカー、ボタン、テキストラベル。

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

関連トピック

• 日付と時刻のコントロール
• 予定表の日付の選択
• 予定表ビュー
• 日付の選択