вторник, 22 марта 2011, Александр Краковецкий

В этой статье рассмотрены свойства, события, а также основные возможности элементов управления Windows Phone 7 DatePicker и TimePicker.

Элементы управления DatePicker и TimePicker входят в состав Silverlight Toolkit. Эти элементы управления состоят из текстового поля (TextBox), при клике на который появляется специальный интерфейс в виде прокрутки для выбора необходимых значений. DatePicker и TimePicker полностью удовлетворяют руководству по созданию интерфейсов (Windows Phone 7 Design Guidelines).

Оба элемента управления являются наследниками класса DateTimePickerBase и имеют одинаковый API. Разницей является формат вывода – TimePicker показывает время в коротком виде (ShortTimePattern), а DatePicker отображает даты.

Для того, чтобы начать использовать DatePicker/TimePicker необходимо добавить ссылку на Microsoft.Phone.Controls.Toolkit.dll, которая устанавливается вместе с Silverlight Toolkit и находится по адресу:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll.

Также вам необходимо будет добавить описание префикса "toolkit". Проверьте, чтобы ваша страница содержала пространство имен toolkit:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Самый простой пример кода выглядит таким образом:

<toolkit:DatePicker x:Name="datePicker" Value="2/3/2010"/>
<toolkit:TimePicker x:Name="timePicker">

Примечание: для того, чтобы иконки корректно отображались в ApplicationBar, необходимо создать в корне папку под названием Toolkit.Content и добавить туда иконки. Несмотря на то, что Toolkit содержит необходимые иконки, их необходимо скопировать себе в проект. Названия иконок должны быть ApplicationBar.Cancel.png и ApplicationBar.Check.png, а в свойствах build action выставлено Content.

Основные свойства и события

Header - устанавливает или возвращает заголовок элемента управления.

Пример:

<toolkit:DatePicker x:Name="datePicker" Header="DatePicker"  Value="2/3/2010"/>

HeaderTemplate – зависимое свойство типа DataTemplate. Устанавливает или возвращает шаблон, который используется для отображения заголовка элемента управления.

PickerPageUri – зависимое свойство типа Uri. Устанавливает или возвращает объект типа Uri, которая будет использоваться для загрузки экземпляра IDateTimePickerPage при нажатии на элемент управления. Об этом читайте более детально ниже в секции "Настройка полноэкранного режима".

Value – зависимое свойство типа DateTime. Устанавливает или возвращает значение DateTime.

Пример:

<toolkit:DatePicker x:Name="datePicker"  Header="DatePicker"  Value="2/3/2010"/>

ValueString - зависимое свойство типа string. Возвращает строку выбранной даты или времени.

Пример:

this.textBlock.Text = datePicker.ValueString;

ValueStringFormat - зависимое свойство типа string. Устанавливает или возвращает специальную строку для конвертирования значения Value в строку (по принципу работы метода string.format).

Примечания:

Строки для форматирования содержат "{" и "}", поэтому если вы хотите использовать их в XAML разметке, то вы должны использовать специальный синтаксис, например ValueStringFormat="{}{0:d}".

Значение по умолчанию свойства ValueStringFormat для DatePicker - "{}{0:d}", что означает, что для США дата будет записана как 15/12/2010.

Значение по умолчанию свойства ValueStringFormat для TimePicker - "{}{0:t}", что означает, что для США время будет записано как 2:00PM.

Если вы хотите изменить формат отображения, то вы можете использовать либо XAML либо C#.

Пример:

XAML:

<toolkit:TimePicker x:Name="timePicker"  ValueStringFormat="{}{0:T}"/>

C#:

this.timePicker.ValueStringFormat = "{0:T}";

Результат: 8:05:00 AM

ValueChanged – событие, которое вызывается когда изменяется значение свойства Value.

Пример:

this.datePicker.ValueChanged += 
    new EventHandler<DateTimeValueChangedEventArgs>(picker_ValueChanged);

void picker_ValueChanged(object sender, DateTimeValueChangedEventArgs e)
{
    DateTime date = (DateTime)e.NewDateTime;
    this.textBlock.Text = date.ToString("d"); 
}

Настройка полноэкранного режима

Вы можете настроить полноэкранный режим путем указания значения свойства DatePicker.PickerPageUri или TimePicker.PickerPageUri,которые должны ссылаться на PhoneApplicationPage, который реализует интерфейс IDateTimePickerPage.

Реализация должна содержать всего одно свойство:

public interface IDateTimePickerPage
{
    /// <summary>
    /// Gets or sets the DateTime to show in the picker page 
    /// and to set when the user makes a selection.
    /// </summary>
    DateTime? Value { get; set; }
}

Давайте создадим простой сценарий с пользовательской страницей, которая устанавливает значение DatePicker в DateTime.Now. Шаги реализации такого сценария следующие:

Добавить новую страницу Windows Phone Partial Page и переименовать ее в "CustomPage".

В коде реализовать интерфейс IDateTimePickerPage. Код приведен ниже.

public partial class CustomPage : PhoneApplicationPage, IDateTimePickerPage
{
    public CustomPage()
    {
        InitializeComponent();
    }

    public DateTime? Value
    {
       get;
       set;
    }
}

Добавить кнопку:

<Border BorderBrush="Red" Background="Orange" Height="200" Width="300">
    <Button Content="DateTime Now" x:Name="btn" Click="btn_Click"/>
</Border>

Следующий шаг – добавление кода, который будет ресетить выбранное значение и устанавливать значение DateTime.Now:

private void btn_Click(object sender, RoutedEventArgs e)
{
    // set date and close picker
    Value = DateTime.Now;
    NavigationService.GoBack();
}

Установить значение свойства PickerPageUri в "/DatePickerDemo;component/CustomPage.xaml":

<toolkit:DatePicker x:Name="datePicker1" Header="Custom DatePicker" Value="2/3/2010"
PickerPageUri="/DatePickerDemo;component/CustomPage.xaml" />

Результат будет такой:

Этого достаточно для того, чтобы создать пользовательскую полноэкранную страницу.

Это все, что касается элементов управления DatePicker и TimePicker. Пример тестового приложения можно скачать по ссылке DateTimePickerDemo.zip.

---