カレンダーの日付の選択コントロール

カレンダーの日付の選択コントロールは、カレンダーの曜日や埋まり具合などのコンテキスト情報が必要となるカレンダー ビューから単一の日付を選ぶ用途に最適なドロップダウン コントロールです。 追加のコンテキストを提供したり、使用可能な日付を制限したりするように、カレンダーを変更することもできます。

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

カレンダーの日付の選択コントロールを使うと、ユーザーはコンテキストに沿ったカレンダー ビューから 1 つの日付を選ぶことができます。 予定日や出発日の選択などに使います。

ユーザーが誕生日などの既知の日付 (カレンダーのコンテキストとしては重要ではない日) を選べるようにするには、日付の選択コントロールを使うことを検討してください。

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

例

日付が設定されていない場合、エントリ ポイントにはプレースホルダー テキストが表示されます。設定されている場合は、選んだ日付が表示されます。 ユーザーがエントリ ポイントを選ぶと、カレンダー ビューが展開されて、ユーザーが日付を選べるようになります。 カレンダー ビューは他の UI をオーバーレイし、他の UI を別の位置に移動させることはありません。

UWP と WinUI 2

重要

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

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

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

• UWP API:CalendarDatePicker クラス、 Date プロパティ、 DateChanged イベント
• WinUI 2 ギャラリー アプリを開き、CalendarDatePicker の動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

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

予定表の日付ピッカーを作成する

• 重要な API:CalendarDatePicker クラス、 Date プロパティ、 DateChanged イベント

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

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

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Calendar"/>

CalendarDatePicker arrivalCalendarDatePicker = new CalendarDatePicker();
arrivalCalendarDatePicker.Header = "Calendar";

結果として、カレンダーの日付の選択コントロールは、次のように表示されます。

カレンダーの日付の選択コントロールの内部には、日付選択用の CalendarView があります。 CalendarDatePicker には IsTodayHighlighted や FirstDayOfWeek のような CalendarView プロパティのサブセットが存在し、内部の CalendarView に転送されるため、このサブセットを使って内部の CalendarView を変更できます。

ただし、複数選択を許可するために、内部の CalendarView の SelectionMode を変更することはできません。 ユーザーが複数の日付を選べるようにしたり、カレンダーを常に表示しておく必要がある場合、カレンダーの日付の選択コントロールではなく、カレンダー ビューを使うことを検討してください。 カレンダー表示を変更する方法について詳しくは、「カレンダー ビュー」をご覧ください。

日付の選択

選んだ日付を取得または設定するには、Date プロパティを使います。 既定では、Date プロパティは null です。 ユーザーがカレンダー ビューで日付を選ぶと、このプロパティが更新されます。 日付をクリアするには、カレンダー ビュー内で選んだ日付をクリックして選択を解除します。

次のようなコードで日付を設定できます。

myCalendarDatePicker.Date = new DateTime(1977, 1, 5);

コードで Date を設定するときに、その値は MinDate プロパティと MaxDate プロパティの制約を受けます。

• Date の値が MinDate よりも小さい場合、Date の値は MinDate に設定されます。
• Date の値が MaxDate よりも大きい場合、Date の値は MaxDate に設定されます。

Date 値が変化したときに通知を受け取るには、DateChanged イベントを処理します。

注意

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

ヘッダーとプレースホルダー テキストの設定

Header (ラベル) と PlaceholderText (透かし) をカレンダーの日付の選択コントロールに追加すると、ユーザーに用途を示すことができます。 ヘッダーの外観をカスタマイズするには、Header ではなく HeaderTemplate プロパティを設定します。

既定のプレースホルダー テキストは、"日付を選択" です。 PlaceholderText プロパティに空の文字列を設定してこのテキストを削除するか、次のようにカスタム テキストを指定することもできます。

<CalendarDatePicker x:Name="arrivalCalendarDatePicker" Header="Arrival date"
                    PlaceholderText="Choose your arrival date"/>

サンプル コードの入手

• WinUI ギャラリーのサンプル - 対話型形式ですべての XAML コントロールを表示します。

関連記事

• 日付と時刻コントロール
• カレンダー ビュー
• 日付の選択コントロール
• 時刻の選択コントロール