読者です 読者をやめる 読者になる 読者になる

Windowsストアアプリケーションでのプレースホルダの実装

HTML5などでお馴染みのプレースホルダ(Placeholder)ですが、Windows Store ApplicationをC#+XAMLで開発する中で実装としようとしたところ、標準機能では実装されて無いようで少し驚きました。今回は、「プレースホルダみたいなもの」を実装してみたので書きます。


ご存知の通り、プレースホルダですが、HTML5の場合は簡単に実装できます。

<input placeholder="これがプレースホルダ...">

こんな感じで表示されます。
f:id:yomon8:20130724185827p:plain


色々調べてみたところ、C#のコードを書くことで似た機能を実装できるようなのでやってみました。
今回は、「TextBoxForPlaceholder」という名前のTextBoxを作成して、GotFocusとLostFocusのイベントを連携させて実装した例です。

        private void TextBoxForPlaceholder_GotFocus(object sender, RoutedEventArgs e)
        {
            if (TextBoxForPlaceholder.Text.Equals("何か入力してください・・・", StringComparison.OrdinalIgnoreCase))
            {
                TextBoxForPlaceholder.Text = string.Empty;
            }
        }

        private void TextBoxForPlaceholder_LostFocus(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(TextBoxForPlaceholder.Text))
            {
                TextBoxForPlaceholder.Text = "何か入力してください・・・";
            }
        }

項目への入力チェックとの兼ね合いなど、考慮しなければならない点は残りますが、何とかそれらしいものはできました。
f:id:yomon8:20130724185836p:plain



ちなみに、Windows8.1からは標準機能で実現できるようになるようです。
http://msdn.microsoft.com/en-us/library/windows/apps/bg182878.aspx#Placeholder