Xamarin.Forms TimePicker

  • Статья

Download Sample Скачайте пример

Представление Xamarin.Forms , позволяющее пользователю выбрать время.

Вызывает Xamarin.FormsTimePicker элемент управления выбора времени платформы и позволяет пользователю выбрать время. TimePicker определяет следующие свойства:

  • Time типа TimeSpan, выбранное время, которое по умолчанию имеет TimeSpan значение 0. Тип TimeSpan указывает длительность времени с полуночи.
  • Formatтип string, стандартная или настраиваемая строка форматирования .NET, которая по умолчанию имеет значение t, короткий шаблон времени.
  • TextColor тип Color, цвет, используемый для отображения выбранного времени, которое по умолчанию Color.Default.
  • FontAttributes тип FontAttributes, для которого по умолчанию используется FontAtributes.Noneзначение .
  • FontFamily тип string, для которого по умолчанию используется nullзначение .
  • FontSize тип double, который по умолчанию соответствует -1.0.
  • CharacterSpacing с типом double представляет собой интервал между знаками текста TimePicker.

Все эти свойства поддерживаются BindableProperty объектами, что означает, что их можно стильировать, а свойства могут быть целевыми объектами привязки данных. Свойство Time имеет режим BindingMode.TwoWayпривязки по умолчанию, что означает, что это может быть цель привязки данных в приложении, использующем архитектуру Model-View-ViewModel (MVVM).

Не TimePicker включает событие, указывающее новое выбранное Time значение. Если вам нужно уведомить об этом, можно добавить обработчик для PropertyChanged события.

Инициализация свойства Time

В коде можно инициализировать Time свойство в значение типа TimeSpan:

TimePicker timePicker = new TimePicker
{
  Time = new TimeSpan(4, 15, 26) // Time set to "04:15:26"
};

Time При указании свойства в XAML значение преобразуется TimeSpan в и проверяется, чтобы число миллисекунд было больше или равно 0, а количество часов меньше 24. Компоненты времени должны быть разделены двоеточиями:

<TimePicker Time="4:15:26" />

BindingContext Если для свойства TimePicker задан экземпляр ViewModel, содержащий свойство типа TimeSpan с именем SelectedTime (например), можно создать TimePicker экземпляр следующим образом:

<TimePicker Time="{Binding SelectedTime}" />

В этом примере Time свойство инициализируется SelectedTime свойством в ViewModel. Time Так как свойство имеет режим TwoWayпривязки, любой новый раз, когда пользователь выбирает, автоматически распространяется на ViewModel.

TimePicker Если привязка для его Time свойства не содержится, приложение должно присоединить обработчик к PropertyChanged событию, чтобы получать сведения, когда пользователь выбирает новое время.

Сведения о настройке свойств шрифта см. в разделе "Шрифты".

TimePicker и макет

Можно использовать неограниченный горизонтальный макет, например Center, Startили End с TimePicker:

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

Однако это делать не рекомендуется. В зависимости от параметра Format свойства выбранные времена могут потребовать разных ширин отображения. Например, строка формата "T" приводит TimePicker к отображению времени в длинном формате, а "4:15:26" требует больше ширины отображения, чем короткий формат времени ("t") "4:15 AM". В зависимости от платформы это различие может привести TimePicker к изменению ширины представления в макете или усечения дисплея.

Совет

Рекомендуется использовать параметр по умолчанию HorizontalOptions и TimePickerне использовать ширину Auto при вводе TimePicker в ячейкуGrid.Fill

TimePicker в приложении

Пример SetTimer включает в себя EntryTimePickerи Switch представления на своей странице. Можно TimePicker использовать для выбора времени и при появлении этого диалогового окна оповещения, которое напоминает пользователю текста в Entryтексте, если Switch он включен. Ниже приведен XAML-файл:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SetTimer"
             x:Class="SetTimer.MainPage">
    <StackLayout>
        ...
        <Entry x:Name="_entry"
               Placeholder="Enter event to be reminded of" />
        <Label Text="Select the time below to be reminded at." />
        <TimePicker x:Name="_timePicker"
                    Time="11:00:00"
                    Format="T"
                    PropertyChanged="OnTimePickerPropertyChanged" />
        <StackLayout Orientation="Horizontal">
            <Label Text="Enable timer:" />
            <Switch x:Name="_switch"
                    HorizontalOptions="EndAndExpand"
                    Toggled="OnSwitchToggled" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Позволяет Entry ввести текст напоминания, который будет отображаться при выборе времени. Свойство TimePicker "T" назначается Format для длительного формата. Он имеет обработчик событий, подключенный к PropertyChanged событию, и Switch обработчик подключен к его Toggled событию. Эти обработчики событий находятся в файле программной части и вызывают SetTriggerTime метод:

public partial class MainPage : ContentPage
{
    DateTime _triggerTime;

    public MainPage()
    {
        InitializeComponent();

        Device.StartTimer(TimeSpan.FromSeconds(1), OnTimerTick);
    }

    bool OnTimerTick()
    {
        if (_switch.IsToggled && DateTime.Now >= _triggerTime)
        {
            _switch.IsToggled = false;
            DisplayAlert("Timer Alert", "The '" + _entry.Text + "' timer has elapsed", "OK");
        }
        return true;
    }

    void OnTimePickerPropertyChanged(object sender, PropertyChangedEventArgs args)
    {
        if (args.PropertyName == "Time")
        {
            SetTriggerTime();
        }
    }

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

    void SetTriggerTime()
    {
        if (_switch.IsToggled)
        {
            _triggerTime = DateTime.Today + _timePicker.Time;
            if (_triggerTime < DateTime.Now)
            {
                _triggerTime += TimeSpan.FromDays(1);
            }
        }
    }
}

Метод SetTriggerTime вычисляет время таймера на DateTime.Today основе значения свойства и TimeSpan значения, возвращаемого из объекта TimePicker. Это необходимо, так как DateTime.Today свойство возвращает текущую DateTime дату, но с временем полуночи. Если таймер уже прошел сегодня, то предполагается, что завтра будет.

Таймер тикает каждую секунду, выполняя OnTimerTick метод, который проверка Switch указывает, включен ли текущий момент времени больше или равно времени таймера. Когда происходит время таймера, DisplayAlert метод представляет диалоговое окно оповещения пользователю в качестве напоминания.

При первом запуске TimePicker примера представление инициализируется до 11 утра. Касание TimePicker вызывает средство выбора времени платформы. Платформы реализуют средство выбора времени очень разными способами, но каждый подход знаком пользователям этой платформы:

Select Time

Совет

В Android диалоговое TimePicker окно можно настроить, переопределив CreateTimePickerDialog метод в пользовательском отрисовщике. Это позволяет, например, добавлять дополнительные кнопки в диалоговое окно.

После выбора времени выбранное время отображается в следующих TimePickerэлементах:

Time Selected

При условии, что Switch переключатель переключается на положение, приложение отображает диалоговое окно оповещения, напоминающее пользователю о тексте при Entry возникновении выбранного времени:

Timer Popup

После отображения Switch диалогового окна генерации оповещений переключается на положение выключения.