Xamarin.Forms Datepicker

  • Artykuł

Download Sample Pobieranie przykładu

Xamarin.Forms Widok, który umożliwia użytkownikowi wybranie daty.

Element Xamarin.FormsDatePicker wywołuje kontrolkę selektora dat platformy i umożliwia użytkownikowi wybranie daty. DatePicker definiuje osiem właściwości:

Wyzwala DatePicker zdarzenie DateSelected , gdy użytkownik wybierze datę.

Ostrzeżenie

Podczas ustawiania MinimumDate i MaximumDateupewnij się, że MinimumDate wartość jest zawsze mniejsza niż lub równa MaximumDate. DatePicker W przeciwnym razie zgłosi wyjątek.

Wewnętrznie zapewnia to Date między DatePickerMinimumDate i MaximumDate, włącznie. Jeśli MinimumDate wartość lub MaximumDate jest ustawiona tak, aby Date nie mieściła się między nimi, DatePicker dostosuje wartość Date.

Wszystkie osiem właściwości jest wspieranych przez BindableProperty obiekty, co oznacza, że można je stylizować, a właściwości mogą być obiektami docelowymi powiązań danych. Właściwość Date ma domyślny tryb BindingMode.TwoWaypowiązania , co oznacza, że może być elementem docelowym powiązania danych w aplikacji korzystającej z architektury Model-View-ViewModel (MVVM ).

Inicjowanie właściwości DateTime

W kodzie można zainicjować MinimumDatewłaściwości , MaximumDatei Date na wartości typu DateTime:

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

DateTime Gdy wartość jest określona w języku XAML, analizator XAML używa DateTime.Parse metody z argumentemCultureInfo.InvariantCulture, aby przekonwertować ciąg na DateTime wartość. Daty muszą być określone w dokładnym formacie: dwucyfrowe miesiące, dwa cyfry dni i cztery cyfry lat oddzielone ukośnikami:

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

BindingContext Jeśli właściwość DatePicker właściwości jest ustawiona na wystąpienie modelu viewmodel zawierające właściwości typu DateTime o nazwie MinDate, MaxDatei SelectedDate (na przykład), możesz utworzyć wystąpienie podobne do następującegoDatePicker:

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

W tym przykładzie wszystkie trzy właściwości są inicjowane do odpowiednich właściwości w modelu viewmodel. Date Ponieważ właściwość ma tryb TwoWaypowiązania , każda nowa data wybrana przez użytkownika zostanie automatycznie odzwierciedlona w modelu widoku.

DatePicker Jeśli właściwość nie zawiera powiązaniaDate, aplikacja powinna dołączyć program obsługi do DateSelected zdarzenia, aby zostać poinformowany, gdy użytkownik wybierze nową datę.

Aby uzyskać informacje o ustawianiu właściwości czcionki, zobacz Czcionki.

DatePicker i układ

Można użyć nieskonsekwowanej opcji układu poziomego, takiej jak Center, Start, lub End z DatePicker:

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

Nie jest to jednak zalecane. W zależności od ustawienia Format właściwości wybrane daty mogą wymagać różnych szerokości wyświetlania. Na przykład ciąg formatu "D" powoduje DateTime wyświetlanie dat w długim formacie, a "środa, 12 września 2018" wymaga większej szerokości wyświetlania niż "piątek, 4 maja 2018". W zależności od platformy ta różnica może spowodować DateTime zmianę szerokości widoku w układzie lub obcięcie ekranu.

Napiwek

Najlepiej użyć domyślnego HorizontalOptionsFill ustawienia z wartością DatePicker, a nie używać szerokości Auto podczas umieszczania DatePicker w komórce Grid .

Platforma DatePicker w aplikacji

Przykład DaysBetweenDates zawiera dwa DatePicker widoki na swojej stronie. Mogą one służyć do wybierania dwóch dat, a program oblicza liczbę dni między tymi datami. Program nie zmienia ustawień MinimumDate właściwości i MaximumDate , więc dwie daty muszą należeć do zakresu od 1900 do 2100.

Oto plik XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DaysBetweenDates"
             x:Class="DaysBetweenDates.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0, 20, 0, 0" />
        </OnPlatform>
    </ContentPage.Padding>

    <StackLayout Margin="10">
        <Label Text="Days Between Dates"
               Style="{DynamicResource TitleStyle}"
               Margin="0, 20"
               HorizontalTextAlignment="Center" />

        <Label Text="Start Date:" />

        <DatePicker x:Name="startDatePicker"
                    Format="D"
                    Margin="30, 0, 0, 30"
                    DateSelected="OnDateSelected" />

        <Label Text="End Date:" />

        <DatePicker x:Name="endDatePicker"
                    MinimumDate="{Binding Source={x:Reference startDatePicker},
                                          Path=Date}"
                    Format="D"
                    Margin="30, 0, 0, 30"
                    DateSelected="OnDateSelected" />

        <StackLayout Orientation="Horizontal"
                     Margin="0, 0, 0, 30">
            <Label Text="Include both days in total: "
                   VerticalOptions="Center" />
            <Switch x:Name="includeSwitch"
                    Toggled="OnSwitchToggled" />
        </StackLayout>

        <Label x:Name="resultLabel"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center" />

    </StackLayout>
</ContentPage>

Każda z nich DatePicker ma przypisaną Format właściwość "D" dla formatu daty długiej. Zwróć również uwagę, że endDatePicker obiekt ma powiązanie, które jest obiektem docelowym jego MinimumDate właściwości. Źródło powiązania jest wybraną Date właściwością startDatePicker obiektu. Gwarantuje to, że data zakończenia jest zawsze późniejsza niż lub równa dacie rozpoczęcia. Oprócz dwóch DatePicker obiektów obiekt ma etykietę Switch "Uwzględnij oba dni w sumie".

DatePicker Dwa widoki mają programy obsługi dołączone do DateSelected zdarzenia, a Switch program obsługi jest dołączony do jego Toggled zdarzenia. Te programy obsługi zdarzeń znajdują się w pliku za kodem i wyzwalają nowe obliczenie dni między dwiema datami:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    void OnDateSelected(object sender, DateChangedEventArgs args)
    {
        Recalculate();
    }

    void OnSwitchToggled(object sender, ToggledEventArgs args)
    {
        Recalculate();
    }

    void Recalculate()
    {
        TimeSpan timeSpan = endDatePicker.Date - startDatePicker.Date +
            (includeSwitch.IsToggled ? TimeSpan.FromDays(1) : TimeSpan.Zero);

        resultLabel.Text = String.Format("{0} day{1} between dates",
                                            timeSpan.Days, timeSpan.Days == 1 ? "" : "s");
    }
}

Po pierwszym uruchomieniu przykładu oba DatePicker widoki są inicjowane do dzisiejszej daty. Poniższy zrzut ekranu przedstawia program uruchomiony w systemach iOS i Android:

Days Between Dates Start

Naciśnięcie jednego z ekranów DatePicker wywołuje selektor dat platformy. Platformy implementują ten selektor dat na bardzo różne sposoby, ale każde podejście jest znane użytkownikom tej platformy:

Days Between Dates Select

Napiwek

W systemie Android DatePicker okno dialogowe można dostosować, przesłaniając metodę CreateDatePickerDialog w niestandardowym module renderowania. Umożliwia to na przykład dodanie dodatkowych przycisków do okna dialogowego.

Po wybraniu dwóch dat aplikacja wyświetla liczbę dni między tymi datami:

Days Between Dates Result