時刻の選択コントロールTime picker

TimePicker は、ユーザーがタッチ、マウス、またはキーボード入力を使って時刻値を選択できる標準化された方法です。The time picker gives you a standardized way to let users pick a time value using touch, mouse, or keyboard input.

重要な API:TimePicker クラス時刻プロパティImportant APIs: TimePicker class, Time property

適切なコントロールの選択Is this the right control?

時刻の選択コントロールを使って、ユーザーが 1 つの時刻を選べるようにします。Use a time picker to let a user pick a single time value.

適切なコントロールの選択について詳しくは、「日付と時刻コントロール」をご覧ください。For more info about choosing the right control, see the Date and time controls article.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、TimePicker の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the TimePicker in action.

エントリ ポイントには、選んだ時刻が表示されます。ユーザーがエントリ ポイントを選ぶと、選択ツール サーフェスが中央から縦方向に展開されて、時刻を選べるようになります。The entry point displays the chosen time, and when the user selects the entry point, a picker surface expands vertically from the middle for the user to make a selection. 時刻の選択は他の UI をオーバーレイし、他の UI を別の位置に移動させることはありません。The time picker overlays other UI; it doesn't push other UI out of the way.

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

時刻の選択コントロールの作成Create a time picker

次の例は、ヘッダーを含むシンプルな時刻の選択コントロールを作成する方法を示しています。This example shows how to create a simple time picker with a header.

<TimePicker x:Name=arrivalTimePicker Header="Arrival time"/>
TimePicker arrivalTimePicker = new TimePicker();
arrivalTimePicker.Header = "Arrival time";

結果として、時刻の選択コントロールは、次のように表示されます。The resulting time picker looks like this:

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

注意

日付と時刻の値の重要な情報については、「日付と時刻コントロール」の「DateTime と Calendar の値」をご覧ください。For important info about date and time values, see DateTime and Calendar values in the Date and time controls article.

サンプル コードを入手するGet the sample code