眠るシーラカンスと水底のプログラマー

　ちょっとづつWindows Phone Toolkitのコントロールを紹介していきます。

 

　今回はTimePickerです。

　TimePickerは時間を選択させるコントロールで、日付を選択するDatePickerも含めていろいろと使い勝手の良いコントロールです。

 

 

　導入

　導入の方法は前回のTuggleSwitchと途中までは同じ、参照にMicrosoft.Phone.Controls.Toolkit.dllを参照に追加、xamlコードに以下を追加します。

 

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

 

　SilverlightToolkitの導入は[Windows Phone] WindowsPhoneToolkit 紹介 その0 インストールを参照にしてください。

　基本的なタグは、

 

<toolkit:TimePicker x:Name="timePicker"/>

　時間と分が選択できるTimePickerが表示できました。

　
主なプロパティ

 

Header

　

ヘッダー部を追加します。

 

Value

　TimePickerの中身の数字を変更します。

<toolkit:TimePicker

　　　　HorizontalAlignment="Left"

　　　　Value="14:25"

　　　　Margin="49,49,0,0"

　　　　Name="timePicker1"

　　　　VerticalAlignment="Top"

　　　　Width="284"

　　　　Header="TimePicker"

/>

 

 ValueStringFormat

 DatePickerの表示の書式を指定できる。

xamlコードで書く場合は、

            <toolkit:TimePicker
                ValueStringFormat="{}{0:hh時mm分}"

 

プログラムコードなら、

this.timePicker1.ValueStringFormat = "{0:hh時mm分}";

 

PickerPageUri

 

PickerPageUrlは指定した別ページで、デフォルトの時間選択のインターフェース(下画像)ではなく、

自分で作成したページを利用することができるプロパティです。

 

PagePickerUriに指定があると、

 

 

PickerPageを利用する方法は、まず遷移先のページを作成します。

[ソリューションエクスプローラー]上で右クリック、[追加]→[新しい項目]で[WindowsPhonet縦向きのページ]を追加します。

 

 

pickerPageUriで利用するページは「IDateTimePickerPage」をインターフェイスに持つ必要があります。

IDateTimePickerPageはValueプロパティとしてnull許容型のDateTIme型を持ちます。

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Primitives; // 追加

namespace TimePickerSample
{
    public partial class PickerPage : PhoneApplicationPage, IDateTimePickerPage // 追加
    {
        public DateTime? Value { get; set; } // IDateTimePickerPageインターフェイスはValueプロパティを持つ

        public PickerPage()
        {
            InitializeComponent();
        }

        /// <summary>
        /// ボタンクリックで現在時間をTimePickerに返す。
        /// Valueプロパティに時間を保持して、NavigationService.GoBack()で戻る。
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            this.Value = DateTime.Now;
            NavigationService.GoBack();
        }
    }
}

これで簡単ですが、PagePickerUriプロパティで指定するためのページが作成できました。

続いてPagePickerコントロールを書き換えます。

TimePickerSampleというアプリケーションのPickerPage.xamlというページで画面選択させたい場合以下のように指定します。

 

            <toolkit:TimePicker
                PickerPageUri="/TimePickerSample;component/PickerPage.xaml"
                Name="timePicker2"
                Header="PickerPageUri"
            />

サンプルをダウンロードする

 

動作の確認できるサンプルを用意しましたので以下からダウンロードください。

サンプルをダウンロード(SDK7.1)