WPFでHTMLのプレースホルダーを実装する

今回は、WPFアプリケーションでWEBでよく見るテキスト入力欄のプレースホルダーを実装してみます。

ソースコード
・xaml

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBox Name="txtOne"
                HorizontalAlignment="Center" VerticalAlignment="Center" 
                 Width="120" Height="23"  
                 TextWrapping="Wrap" Text="" 
                 GotFocus="TxtOne_GotFocus" LostFocus="TxtOne_LostFocus" />
    </Grid>
</Window>

・C#

using System.Windows;

namespace WpfApp1
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        private string defaultText = "入力してください";
        public MainWindow()
        {
            InitializeComponent();
            txtOne.Text = defaultText;
        }

        private void TxtOne_GotFocus(object sender, RoutedEventArgs e)
        {
            txtOne.Text = (txtOne.Text == "" || txtOne.Text == defaultText) ? "" : txtOne.Text;
        }

        private void TxtOne_LostFocus(object sender, RoutedEventArgs e)
        {
            txtOne.Text = (txtOne.Text == "") ? defaultText : txtOne.Text;
        }
    }
}

・コードの説明

private void TxtOne_GotFocus(object sender, RoutedEventArgs e)
    {
        txtOne.Text = (txtOne.Text == "" || txtOne.Text == defaultText) ? "" : txtOne.Text;
    }

テキストボックスのフォーカス時に入力欄が空文字もしくはプレースホルダーのテキストであれば空文字を設定し、
入力されていればそのテキストのままにする。

 private void TxtOne_LostFocus(object sender, RoutedEventArgs e)
        {
            txtOne.Text = (txtOne.Text == "") ? defaultText : txtOne.Text;
        }

フォーカスアウト時に入力欄が空文字であれば、プレースホルダーの値にし、そうでない場合は、値を保持する。

次は、最初の文字が入力されるまでプレースホルダーの値を保持するのを考えたいと思います。

タイトルとURLをコピーしました