時刻の選択コントロール

  • [アーティクル]

TimePicker は、ユーザーがタッチ、マウス、またはキーボード入力を使って時刻値を選択できる標準化された方法です。

時刻の選択コントロールの例

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

時刻の選択コントロールを使って、ユーザーが 1 つの時刻を選べるようにします。

適切なコントロールの選択について詳しくは、「日付と時刻コントロール」をご覧ください。

例

エントリ ポイントには、選んだ時刻が表示されます。ユーザーがエントリ ポイントを選ぶと、選択ツール サーフェスが中央から縦方向に展開されて、時刻を選べるようになります。 時刻の選択は他の UI をオーバーレイし、他の UI を別の位置に移動させることはありません。

展開した時刻の選択コントロールの例

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。 プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

このコントロールの API は 、Windows.UI.Xaml.Controls 名前空間に 存在します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。 WinUI 2.2 以降には、丸い角を使用するこのコントロール用の新しいテンプレートが含まれています。 詳しくは、「角の半径」をご覧ください。

時刻の選択コントロールの作成

WinUI 3 ギャラリー アプリを開き、TimePicker の動作を確認します。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 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 に指定すると、TimePicker の分のコントロールには選択肢として 00、15、30、45 のみが表示されます。

<TimePicker MinuteIncrement="15"/>

15 分の増分で表示された時刻の選択。

時刻値

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

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

時刻が選択されていない時刻の選択。

時刻値の初期化

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

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

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

<TimePicker SelectedTime="14:15"/>

注意

日付と時刻の値の重要な情報については、「日付と時刻コントロール」の「DateTime と Calendar の値」をご覧ください。

時刻値の使用

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

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

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

SelectedTime プロパティでは null 値が許容されるため、これを DateTime に明示的にキャストする必要があることにご注意ください。たとえば、DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime); のようにします。 ただし、Time プロパティをキャストなしで使用することもできます。その場合、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);
    }
}

サンプル コードを入手する