Condividi tramite


DatePicker

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) DatePicker richiama il controllo selezione data della piattaforma e consente di selezionare una data.

DatePicker definisce otto proprietà:

  • MinimumDate di tipo DateTime, che per impostazione predefinita corrisponde al primo giorno dell'anno 1900.
  • MaximumDate di tipo DateTime, che per impostazione predefinita corrisponde all'ultimo giorno dell'anno 2100.
  • Date di tipo DateTime, la data selezionata, che per impostazione predefinita corrisponde al valore DateTime.Today.
  • Format di tipo string, una stringa di formattazione .NET standard o personalizzata , che per impostazione predefinita è "D", il modello di data estesa.
  • TextColor di tipo Color, il colore utilizzato per visualizzare la data selezionata.
  • FontAttributes di tipo FontAttributes, che per impostazione predefinita è FontAtributes.None.
  • FontFamily di tipo string, che per impostazione predefinita è null.
  • FontSize di tipo double, che per impostazione predefinita è -1.0.
  • CharacterSpacing, di tipo double, è la spaziatura tra i caratteri del DatePicker testo.

Tutte e otto le proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere stilizzati e che le proprietà possono essere destinazioni di data binding. La Date proprietà ha una modalità di associazione predefinita di BindingMode.TwoWay, il che significa che può essere una destinazione di un data binding in un'applicazione che usa il modello Model-View-ViewModel (MVVM).

Avviso

Quando si imposta MinimumDate e MaximumDate, assicurarsi che MinimumDate sia sempre minore o uguale a MaximumDate. In caso contrario, DatePicker genererà un'eccezione.

DatePicker garantisce che Date sia compreso tra MinimumDate e MaximumDate, inclusivo. Se MinimumDate o MaximumDate è impostato in modo che Date non sia compreso tra di essi, DatePicker regola il valore di Date.

Genera DatePicker un DateSelected evento quando l'utente seleziona una data.

Creare un controllo DatePicker

Quando un DateTime valore viene specificato in XAML, il parser XAML usa il DateTime.Parse metodo con un CultureInfo.InvariantCulture argomento per convertire la stringa in un DateTime valore. Le date devono essere specificate in un formato preciso: mesi a due cifre, giorni a due cifre e anni a quattro cifre separati da barre:

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

Se la proprietà di DatePicker è impostata su un'istanza BindingContext di un modello di visualizzazione contenente proprietà di tipo DateTime denominato MinDate, MaxDatee SelectedDate (ad esempio), è possibile creare un'istanza simile alla DatePicker seguente:

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

In questo esempio, tutte e tre le proprietà vengono inizializzate nelle proprietà corrispondenti nel modello di visualizzazione. Poiché la Date proprietà ha una modalità di associazione di TwoWay, qualsiasi nuova data selezionata dall'utente viene riflessa automaticamente nel modello di visualizzazione.

Se l'oggetto DatePicker non contiene un binding sulla relativa Date proprietà, l'app deve associare un gestore all'evento DateSelected da informare quando l'utente seleziona una nuova data.

Nel codice è possibile inizializzare le MinimumDateproprietà , MaximumDatee Date sui valori di tipo DateTime:

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

Per informazioni sull'impostazione delle proprietà dei tipi di carattere, vedere Tipi di carattere.

DatePicker e layout

È possibile usare un'opzione di layout orizzontale senza vincoli, Centerad esempio , Starto End con DatePicker:

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

Tuttavia, questo non è consigliato. A seconda dell'impostazione della proprietà, le Format date selezionate potrebbero richiedere larghezze di visualizzazione diverse. Ad esempio, la stringa di formato "D" causa DateTime la visualizzazione delle date in un formato lungo e "Mercoledì, 12 settembre 2018" richiede una larghezza di visualizzazione maggiore rispetto a "Venerdì, 4 maggio 2018". A seconda della piattaforma, questa differenza potrebbe causare la modifica della DateTime larghezza della visualizzazione nel layout o il troncamento della visualizzazione.

Suggerimento

È consigliabile usare l'impostazione predefinita HorizontalOptions di Fill con DatePickere non usare una larghezza per Auto l'inserimento DatePicker in una Grid cella.

Localizzare un controllo DatePicker in Windows

Per le app destinate a Windows, verificando che le DatePicker date vengano visualizzate in un formato localizzato nelle impostazioni dell'utente, inclusi i nomi di mesi e giorni nella finestra di dialogo della selezione, richiede una configurazione specifica nel file Package.appxmanifest del progetto. La localizzazione degli elementi nel manifesto del pacchetto migliora l'esperienza utente rispettando le norme culturali delle impostazioni locali dell'utente.

La localizzazione dei formati di data e delle stringhe in <xref:Microsoft.Maui.Controls.DatePicker> richiede la dichiarazione delle lingue supportate all'interno del file Package.appxmanifest .

Seguire questa procedura per configurare l'utente per la DatePicker localizzazione in Windows:

  1. Individuare la sezione Risorse.

    Passare alla Platforms\Windows cartella del progetto e aprire il file Package.appxmanifest in un editor di codice o in Visual Studio. Se si usa Visual Studio, assicurarsi di visualizzare il codice XML non elaborato del file. Cercare la <Resources> sezione , che inizialmente può includere:

    <Resources>
        <Resource Language="x-generate" />
    </Resources>
    
  2. Specificare le lingue supportate.

    Sostituire l'elemento <Resource Language="x-generate"> con <Resource /> per ogni lingua supportata. Il codice di lingua deve essere nel formato di un tag di lingua BCP-47, ad esempio en-US per l'inglese (Stati Uniti), per lo spagnolo (Spagna), es-ESfr-FR per il francese (Francia) o de-DE per il tedesco (Germania). Ad esempio, per aggiungere il supporto sia per l'inglese (Stati Uniti) che per lo spagnolo (Spagna), la <Resources> sezione deve essere modificata in modo che sia simile alla seguente:

    <Resources>
        <Resource Language="en-US" />
        <Resource Language="es-ES" />
    </Resources>
    

Questa configurazione garantisce che DatePicker visualizzi i formati di data, i mesi e i giorni in base alle impostazioni locali dell'utente, migliorando significativamente l'usabilità e l'accessibilità dell'app in aree diverse.

Per altre informazioni sulla localizzazione nelle app MAUI .NET, vedere Localizzazione.