[WPF] Textbox Watermark(hint) ( 텍스트박스에 힌트 넣기)

입력창, 특히 로그인 창에 회색으로 'ID를 입력하세요' 내지 'example@example.com ' 처럼 예시를 통해

사용자의 입력을 돕는 기능을 흔히 볼 수 있다.

아래는 네이버 로그인 창인데, '아이디' , '비밀번호' 부분을 보면 focus 가 되면 글씨가 사라지고 입력이 없고 focus되지 않으면 나타나 입력을 돕는다.

웹에서는 <input> 태그에서 'placeholder' 속성으로 구현을 하는데, WPF 의 Textbox 에는 이 기능이 없기 때문에 직접 구현해야 한다. 

1. Resource 를 통해 watermark 를 구현

2. 사용하고자 하는 TextBox에 1에서 정의한 Style 을 적용

1.

TextBox 에 스타일을 변경하여 watermark 를 삽입할 'Label' 하나를 추가하는 방법으로 구현한다.

해당 Label 은 Focus되거나 Textbox에 값이 있을 때는 보이지 않도록 Trigger 를 통해 조절한다.

해당 스타일은 별도의 ResourceDictionary 파일로 분리하여 사용했으나 기존에 사용하고 있던 Resource 파일이 있다면 거기에 추가하거나, 혹은 현재 파일 내부에 삽입해도 된다.

코드는 다음과 같으며, stackoverflow 의 게시물 을 참조하였다.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                    xmlns:mwt ="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Add TargetType="{x:Type TextBox}" to make this style the default for all TextBoxes. -->

    <Style x:Key="WatermarkedTextBox" >

        <Setter Property="Control.Template" >

            <Setter.Value>

                <ControlTemplate TargetType="TextBox" >

                    <!-- Template derived from Default TextBoxBase. -->

                    <!-- Added the Label InternalWatermarkLabel together with the surrounding Grid. -->

                    <Grid>

                        <mwt:ListBoxChrome Name="Bd"

                                           Background="{TemplateBinding Panel.Background}" 

                                           BorderBrush="{TemplateBinding Border.BorderBrush}"

                                           BorderThickness="{TemplateBinding Border.BorderThickness}"

                                           RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" 

                                           RenderFocused="{TemplateBinding UIElement.IsKeyboardFocusWithin}" 

                                           SnapsToDevicePixels="True">

                            <ScrollViewer Name="PART_ContentHost"

                                          SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"

                                          />

                        </mwt:ListBoxChrome>

                        <Label x:Name="InternalWatermarkLabel" 

                               Content="{TemplateBinding Tag}" 

                               Visibility="Collapsed" Focusable="False"

                               Foreground="Gray"

                               Background="Transparent"

                               />

                    </Grid>

                    <ControlTemplate.Triggers>

                        <!-- The multitrigger is responsible for showing and hiding the watermark. -->

                        <MultiTrigger>

                            <MultiTrigger.Conditions>

                                <Condition Property="IsFocused" Value="False" />

                                <Condition Property="Text" Value="" />

                            </MultiTrigger.Conditions>

                            <MultiTrigger.Setters>

                                <Setter Property="Visibility" TargetName="InternalWatermarkLabel"

                                        Value="Visible" />

                            </MultiTrigger.Setters>

                        </MultiTrigger>

                        <!-- This trigger mimics the default behavior. -->

                        <Trigger Property="UIElement.IsEnabled" Value="False" >

                            <Setter Property="Panel.Background" TargetName="Bd"

                                    Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />

                            <Setter Property="TextElement.Foreground"

                                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>

중간에 <Grid> 내부에서 Watermark 를 위한 Label 을 선언해주고, 

아래부분의 MultiTrigger 에서 각각 Focus되지 않았을 때(isFocused 부분) 와 내부에 Text가 없을 때(Text 부분) 를 정의해준다. 

Watermark 로 보여주고자 하는 내용은 해당 Textbox 의 'Tag' 속성과 바인딩 시켰다.

2. 

<TextBox> 에 Style="{StaticResource WatermarkedTextBox}" 와 Tag="아이디" 속성 두 개를 추가

여기까지 제대로 적용했다면 다음과 같이 동작하는 것을 확인할 수 있다.