TextBoxを使用して文字入力インターフェイスを作成する(WP7)

| 2011年12月6日 | WindowsPhone7 | 1 Comment
Bookmark this on Hatena Bookmark

Windows Phone7でユーザーに文字を入力させたい場合にはTextBoxクラスを使用します。

TextBoxクラスはユーザーからの文字入力に対して様々な機能を提供するクラスです。

詳細は以下から。

本記事ではTextBoxの使用方法をサンプルを交えながら、以下のユースケースを想定して解説していきます。

  • 入力されている文字列を取得する
  • 複数行入力を可能にする
  • ページ読み込み時にフォーカスを任意のTextBoxに当てる
  • フォーカスが外れたタイミングで処理をする

入力されている文字列を取得する

入力されている文字列を取得するにはTextBox#Textを使用します。

以下のサンプルではボタンが押下されるとTextBoxの入力値を取得してTextBlockに表示されます。
(本記事中のxamlはアプリケーション作成時に自動で生成される部分を省略しています。)

xaml

1
2
3
4
5
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="73" HorizontalAlignment="Left" Margin="-4,71,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="460" />
    <Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="-4,150,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
    <TextBlock Height="59" HorizontalAlignment="Left" Margin="12,6,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="438" FontSize="40" />
</Grid>

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
public partial class MainPage : PhoneApplicationPage
{
    // コンストラクター
    public MainPage()
    {
        InitializeComponent();
    }
 
    private void button1_Click(object sender, RoutedEventArgs e)
    {
        textBlock1.Text = textBox1.Text;
    }
}

また、Textプロパティに対して文字列を代入するtとTextBox内に代入された文字が表示されるようになります。

複数行入力を可能にする

複数行入力はTextBox#AcceptsReturnプロパティを使用します。
このプロパティにtrueを設定すると改行が入力できるようになります。

複数の改行が入力されるとTextBoxの内容が読めなくなってしまいます。
そういう場合はTextBox#VerticalScrollBarVisibilityプロパティにAutoを設定します。
これで可視範囲を超えた入力があった場合にTextBoxの入力領域をスクロールすることができるようになります。。

縦の幅はスクロールによって見やすくなりますが、横幅の場合はスクロールできたとしてもみやすいものではありません。
そこで、Text#TextWrappingプロパティにWrapを設定することで、TextBoxの可視範囲内でテキストを折り返して表示させることができます。

以下のサンプルでは上記のプロパティを全て設定したTextBoxをxamlで記述しています。

xaml

1
2
3
4
5
6
7
8
9
10
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="100"
        Width="460"
        Name="textBox1"
        Text="TextBox"
        VerticalAlignment="Top"
        AcceptsReturn="True"
        VerticalScrollBarVisibility="Auto"
        TextWrapping="Wrap" MaxHeight="100" MaxWidth="460" />
</Grid>

ページ読み込み時にフォーカスを任意のTextBoxに当てる

ページ読み込みを取得するためにはPhoneApplicationPage#Loadedイベントを使用します。
このイベント内で、任意のTextBoxのTextBox#Focusメソッドを呼び出します。

以下のサンプルではページが読み込まれた時に2段目のTextBoxにフォーカスが設定されます。

xaml

1
2
3
4
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="73" HorizontalAlignment="Left" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="460" />
    <TextBox Height="73" HorizontalAlignment="Left" Margin="0,65,0,0" Name="textBox2" Text="TextBox" VerticalAlignment="Top" Width="460" />
</Grid>

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
public partial class MainPage : PhoneApplicationPage
{
    // コンストラクター
    public MainPage()
    {
        InitializeComponent();
    }
 
    private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
    {
        textBox2.Focus();
    }
}

フォーカスが外れたタイミングで処理をする

文字の入力が終わり、フォーカスが外れた時に処理を行うにはTextBox#LostFocusイベントを使用します。

このタイミングの処理は入力値チェックなどによく使用されます。

以下のサンプルではフォーカスが外れたタイミングで、TextBox内の文字列に英文字以外の文字が入力されている場合にエラー文を表示するサンプルです。

xaml

1
2
3
4
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="73" HorizontalAlignment="Left" Name="textBox1" Text="" VerticalAlignment="Top" Width="460" LostFocus="textBox1_LostFocus" />
    <TextBlock Height="56" HorizontalAlignment="Left" Margin="12,65,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="438" FontSize="40" />
</Grid>

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public partial class MainPage : PhoneApplicationPage
{
    // コンストラクター
    public MainPage()
    {
        InitializeComponent();
    }
 
    private void textBox1_LostFocus(object sender, RoutedEventArgs e)
    {
        if (!Regex.IsMatch(textBox1.Text, "^[a-zA-Z].+$"))
        {
            textBlock1.Text = "不正な文字列です";
        }
    }
}

14行目では文字列チェックに正規表現を使用しています。
C#出正規表現を使用するには、Regex#IsMatchメソッドを使用します。
このメソッドは第一引数にチェック対象の文字列を、第二引数に正規表現のパターンを指定すると、正規表現に一致している場合にtrueが返ってきます。
このメソッドを使用するためにはソースコードで“using”句を使用して”System.Text.RegularExpressions“を指定する必要があります。

1
using System.Text.RegularExpressions;

using句は特定のNameSpace(javaでいうところのパッケージ名みたいなもの)のクラスを名称を省略して記述する場合に使用します。
using句は以下の書式で記述します。
using [読み込むNameSpace名];
例として、プロジェクトを作成した時にソースコード先頭行付近に下記のような記述があると思います。

1
using System;

これらの他にも便利な使用方法がありそうなのですが、エミュレータの挙動が安定していない場合があるため、実機デバッグ環境が整ってから追記していきます。

About The Author

kei_i_t

One Comment