Windows Phone ToolkitのPhoneTextBoxを使ってみる
Windows Phone ToolkitのPhoneTextBoxを使うとTextBoxにウォーターマークや文字数制限を設けることができます。PhoneTexBoxを利用するにはMicrosoft.Phone.Controls.Toolkit.dllが必要です。
1.準備
まずはWindows Phone Toolkitを取得してきますが、現時点ではなぜか.msiやNuGetでインストールするとPhoneTextBoxが入らないので、zipになっているファイルを取得しコンパイルして作成します。Windows Phone Toolkit - August 2011 から Silverlight for Windows Phone Toolkit Source & Sample - Aug 2011.zip をダウンロードします。
そして解凍してからPhoneToolkit.slnを開いてビルドします。ビルドが失敗する場合は下記の画像を削除してからビルドしてください。*1
そうするとProjects\Silverlight for Windows Phone Toolkit Source & Sample - Aug 2011/Bin/DebugにMicrosoft.Phone.Controls.Toolkit.dllが作成されるのでこれを利用します。
2.PhoneTextBoxの配置
利用するプロジェクトにMicrosoft.Phone.Controls.Toolkit.dllを参照に追加します。
PhoneTextBoxを配置する前にnamespaceを加えます。
<phone:PhoneApplicationPage ... xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" ...>
そして次のようにPhoneTextBoxを配置します。
<toolkit:PhoneTextBox></toolkit:PhoneTextBox>
3.ウォーターマークの表示
Hintプロパティを設定するとウォーターマークが表示されます。
<toolkit:PhoneTextBox Hint="住所を入力してください"> </toolkit:PhoneTextBox>
・ActualHintVisibilityプロパティを設定することでウォーターマークの表示・非表示を切り替えることができます。
<toolkit:PhoneTextBox Hint="住所を入力してください" ActualHintVisibility="Collapsed"> </toolkit:PhoneTextBox>
4.ウォーターマークのスタイルを変更する
・HintStyleプロパティをセットすることでウォーターマークのスタイルを変更することができます。
<phone:PhoneApplicationPage.Resources> <Style TargetType="ContentControl" x:Key="HintCustomStyle"> <Setter Property="Foreground" Value="RoyalBlue"/> <Setter Property="FontSize" Value="30"/> </Style> </phone:PhoneApplicationPage.Resources> <toolkit:PhoneTextBox Hint="住所を入力してください" HintStyle="{StaticResource HintCustomStyle}"> </toolkit:PhoneTextBox>
5.入力文字数の表示
・LengthIndicatorVisibleプロパティをセットすることで入力した文字数を表示することができます。
<toolkit:PhoneTextBox LengthIndicatorVisible="True"> </toolkit:PhoneTextBox>
・MaxLengthを設定することで最大入力文字数を制限することができます（TextBoxのプロパティです）。
<toolkit:PhoneTextBox LengthIndicatorVisible="True" MaxLength="10"> </toolkit:PhoneTextBox>
・LengthIndicatorThesholdは指定した文字数が入力されたら、入力文字数を表示します。
<toolkit:PhoneTextBox LengthIndicatorVisible="True" MaxLength="10" LengthIndicatorTheshold="5"> </toolkit:PhoneTextBox>
[４文字の場合]
[５文字の場合]
・MaxLengthの代わりにDisplayedMaxLengthプロパティをセットすると、最大入力文字数は表示しますが、入力文字数を超えても入力することができます。
<toolkit:PhoneTextBox LengthIndicatorVisible="True" DisplayedMaxLength="10"> </toolkit:PhoneTextBox>
6.アイコンを表示する
・ActionIconプロパティを設定することでテキストボックス内に画像を表示することができます。
<toolkit:PhoneTextBox ActionIcon="/郵便.png"> </toolkit:PhoneTextBox>
・アイコンをタップしたときのイベントを受け取ることができます。
<toolkit:PhoneTextBox ActionIcon="/郵便.png" ActionIconTapped="PhoneTextBox_ActionIconTapped"> </toolkit:PhoneTextBox>
イベントを受け取ったときのコード
private void PhoneTextBox_ActionIconTapped(object sender, EventArgs e) { MessageBox.Show("アイコンをタップしました"); }
