DatePicker

[アーティクル]
03/05/2024

.NET Multi-platform App UI (.NET MAUI) DatePicker は、プラットフォームの日付選択コントロールを呼び出し、日付を選択できるようにします。

DatePicker では、次の 8 つのプロパティが定義されます。

DateTime 型の MinimumDate は、既定値は 1900 年の最初の日です。
DateTime 型の MaximumDate は、既定値は 2100 年の最後の日です。
DateTime 型の Date は、選択した日付で、既定値は DateTime.Today です。
string 型の Format は、標準またはカスタムの .NET 書式設定文字列で、既定値は "D" (長い形式の日付パターン) です。
Color 型の TextColor は、選択した日付の表示に使用される色です。
FontAttributes (FontAttributes 型): 既定値は FontAtributes.None です。
FontFamily (string 型): 既定値は null です。
FontSize (double 型): 既定値は -1.0 です。
CharacterSpacing: double 型、DatePicker テキストの文字間の間隔。

これらのプロパティはすべて、BindableProperty オブジェクトを基盤としています。つまり、スタイルを指定でき、プロパティがデータバインディングの対象になる場合があります。 Date プロパティには既定の BindingMode.TwoWay バインドモードがあります。つまり、Model-View-ViewModel (MVVM) パターンを使用するアプリケーションのデータバインディングのターゲットにすることができます。

警告

MinimumDate と MaximumDate を設定する場合は、常に MinimumDate が、MaximumDate 以下であることを確認します。それ以外の場合は、DatePicker で例外が発生します。

DatePicker により、Date は、MinimumDate と MaximumDate の間にあり、包括的であることが保証されます。 Date がそれらの間にはなく、MinimumDate または MaximumDate が設定されている場合、DatePicker は Date の値を調整します。

ユーザーが日付を選択すると、DatePicker により DateSelected イベントが発生します。

DatePicker を作成する

XAML で DateTime 値を指定すると、XAML パーサーは CultureInfo.InvariantCulture 引数を持つ DateTime.Parse メソッドを使用して文字列を DateTime 値に変換します。日付は、2 桁の月、2 桁の日、およびスラッシュで区切られた 4 桁の年という正確な形式で指定する必要があります。

<DatePicker MinimumDate="01/01/2022"
            MaximumDate="12/31/2022"
            Date="06/21/2022" />

DatePicker の BindingContext プロパティが (例として) 名前付きの MinDate、MaxDate と SelectedDate の DateTime 型のプロパティを含むビューモデルのインスタンスに設定されている場合は、DatePicker を次のようにインスタンス化できます。

<DatePicker MinimumDate="{Binding MinDate}"
            MaximumDate="{Binding MaxDate}"
            Date="{Binding SelectedDate}" />

この例では、3 つのプロパティはすべて、ビューモデル内の対応するプロパティに初期化されます。 Date プロパティには TwoWay のバインドモードがあるため、ユーザーが選択した新しい日付がビューモデルに自動的に反映されます。

DatePicker で Date プロパティにバインドが含まれていない場合、アプリは、ユーザーが新しい日付を選択したときに通知されるハンドラーを DateSelected イベントにアタッチする必要があります。

コードで、MinimumDate、MaximumDate、Date のプロパティを DateTime 型の値に初期化できます。

DatePicker datePicker = new DatePicker
{
    MinimumDate = new DateTime(2018, 1, 1),
    MaximumDate = new DateTime(2018, 12, 31),
    Date = new DateTime(2018, 6, 21)
};

フォントプロパティの設定については、「フォント」をご覧ください。

DatePicker とレイアウト

DatePicker と共に Center、Start または End のような制約のない水平レイアウトオプションを使用できます。

<DatePicker ···
            HorizontalOptions="Center" />

ただし、これは推奨されません。 Format プロパティの設定によっては、選択した日付に異なる表示幅が必要になる場合があります。たとえば、"D" 書式指定文字列では DateTime に日付が長い形式で表示され、"2018 年 12 月 12 日、水曜日" には "2018 年 5 月 4 日、金曜日" より大きな表示幅が必要です。プラットフォームによっては、この違いにより、DateTime ビューのレイアウトの幅が変更されたり、表示が切り捨てられたりする可能性があります。

ヒント

既定の HorizontalOptions 設定の Fill を DatePicker と共に使用し、Grid セルに DatePicker を入力するときに Auto の幅を使用しないことをお勧めします。

Windows 上の DatePicker をローカライズする

Windows を対象とするアプリの場合、ピッカーのダイアログの月と日の名前を含め、ユーザーの設定に合わせてローカライズされた形式で日付が DatePicker に表示されるようにするには、プロジェクトの Package.appxmanifest ファイルで特定の構成が必要です。パッケージマニフェスト内の要素をローカライズして、ユーザーのロケールのカルチャ規範を順守することで、ユーザーエクスペリエンスが向上します。

<xref:Microsoft.Maui.Controls.DatePicker> の日付形式と文字列をローカライズするには、Package.appxmanifest ファイル内でサポートされる言語を宣言する必要があります。

Windows 上でローカライズ用に DatePicker を構成するには、以下の手順を実行します。

[リソース] セクションに移動します。

プロジェクトの Platforms\Windows フォルダーに移動し、コードエディターまたは Visual Studio で Package.appxmanifest ファイルを開きます。 Visual Studio を使っている場合は、ファイルの生の XML を表示していることを確認します。 <Resources> セクションを探します。初期状態では次のような内容です。
```
<Resources>
    <Resource Language="x-generate" />
</Resources>
```
サポートされる言語を指定します。

<Resource Language="x-generate"> を、サポートされている各言語の <Resource /> 要素に置き換えます。言語コードは、BCP-47 言語タグの形式にする必要があります。たとえば、英語 (米国) の場合は en-US、スペイン語 (スペイン) の場合は es-ES、フランス語 (フランス) の場合は fr-FR、ドイツ語 (ドイツ) の場合は de-DE です。たとえば、英語 (米国) とスペイン語 (スペイン) の両方のサポートを追加するには、<Resources> セクションを次のように変更する必要があります。
```
<Resources>
    <Resource Language="en-US" />
    <Resource Language="es-ES" />
</Resources>
```

このように構成すると、DatePicker にはユーザーのロケールに応じた日付形式、月、日が表示され、さまざまなリージョンでアプリの使いやすさとアクセシビリティが大幅に向上します。

.NET MAUI アプリのローカライズの詳細については、「ローカリゼーション」を参照してください。

DatePicker

DatePicker を作成する

DatePicker とレイアウト

Windows 上の DatePicker をローカライズする

フィードバック

その他のリソース