[Windows Phone] WindowsPhoneToolkit 紹介 その2 TimePicker

土曜日 , 25, 2月 2012 Leave a comment

 ちょっとづつ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)

 

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です