[WPF] Watermark TextBox 만들기 (Resource)

TextBox에 Watermark (PlaceHolder) 를 만들어 보도록 하겠다

ㅋㅋ 근데 아래 자료는 인터넷 검색해서 복사 한 사항이라서 소스에 대한 주석 및 설명은 많이 없다.

ResourceDictionary.xaml

우선 프로젝트에 리소스 사전을 추가 한다.

 

리소스 사전을 선택하고 파일명을 입력 한다.

 

리소스 내용을 추가 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApplication.Resources.Styles">
    <!--DefaultTextBox TextBox Styles (S)-->
    <Style x:Key="DefaultTextBox"  TargetType="{x:Type TextBox}">
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
        <Setter Property="Margin" Value="5"></Setter>
        <Setter Property="Padding" Value="5,0,5,0"></Setter>
    </Style>
    <!--DefaultTextBox TextBox Styles (E)-->
    <!--WatermarkTextBox TextBox Styles (E)-->
    <Style x:Key="WatermarkTextBox" TargetType="{x:Type TextBox}" BasedOn="{StaticResource DefaultTextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Border x:Name="BorderBase" Background="White" BorderThickness="1.4,1.4,1,1" BorderBrush="Silver">
                            <Label x:Name="TextPrompt" 
                                Content="{Binding RelativeSource={RelativeSource  Mode=TemplatedParent}, Path=Tag}" 
                                Background="{TemplateBinding Background}" Visibility="Collapsed" VerticalContentAlignment="Center"
                                Focusable="False" Foreground="Silver"/>
                        </Border>
                        <ScrollViewer Margin="0" x:Name="PART_ContentHost" Foreground="Black"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsFocused" Value="False"/>
                                <Condition Property="Text" Value=""/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Visibility" TargetName="TextPrompt" Value="Visible"/>
                        </MultiTrigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="BorderBrush" TargetName="BorderBase" Value="Black"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="DimGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--WatermarkTextBox TextBox Styles (E)-->
</ResourceDictionary>

기본적으로 프로젝트에 리소스를 추가하게 되면 프로젝트에서 사용 할 수 있도록 등록을 해 줘야 한다.

 

App.xaml

 

리소스 사전 등록 소스

<Application x:Class="WpfApplication.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApplication"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
      <-- 추가 (S) -->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ResourceDictionary.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
      <-- 추가 (E) -->
    </Application.Resources>
</Application>

 

다자인 파일 (xaml) 에서 스타일을 등록 한다.

 

<TextBox x:Name="textBox" Style="{DynamicResource WatermarkTextBox}" Tag="Watermark TextBox" ></TextBox>

"Tag" 값이 Watermark로 보이는 글자이다.

 

실행 후 보여지는 Watermark TextBox

실행 모습, 글씨가 없는 상태에서 포커스를 이동하면 Watermark 가 보인다.