[WPF] 카카오톡 구현하기 4 - TextBox WaterMarkText, Validating 만들어보기

💻 TextBoxControl.xaml / cs

<UserControl x:Class="WpfLib.Controls.TextBoxControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfLib.Controls" xmlns:converters="clr-namespace:WpfLib.Converters"
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="200"
             Name="root">
    <UserControl.Resources>
        <converters:ValidatingBorderBrushConverter x:Key="ValidatingBorderBrushConverter"/>
        <converters:ValidatingBorderThicknessConverter x:Key="ValidatingBorderThicknessConverter"/>
        <Style x:Key="BaseControl" TargetType="{x:Type FrameworkElement}">
            <Setter Property="Control.FontSize" Value="{Binding FontSize, ElementName=root}"/>
            <Setter Property="Control.FontFamily" Value="{Binding FontFamily, ElementName=root}"/>
        </Style>
        <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource BaseControl}">
            <Setter Property="Text" Value="{Binding WaterMarkText, ElementName=root}"/>
            <Setter Property="Foreground" Value="{Binding WaterMarkTextColor, ElementName=root}"/>
            <Setter Property="Padding" Value="5 0 0 0"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Visibility" Value="Collapsed"/>
            <Style.Triggers>
                <!--데이터가 없을 경우에만 VISIBLE하고, 있을 땐 Collapsed-->
                <DataTrigger Binding="{Binding Text, ElementName=txt}" Value="">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource BaseControl}">
            <Setter Property="Text" Value="{Binding Text, ElementName=root, UpdateSourceTrigger=PropertyChanged}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="BorderThickness">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource ValidatingBorderThicknessConverter}">
                        <Binding Path="Validating" ElementName="root"/>
                        <Binding Path="BorderThickness" ElementName="root"/>
                    </MultiBinding>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource ValidatingBorderBrushConverter}">
                        <Binding Path="Validating" ElementName="root"/>
                        <Binding Path="BorderBrush" ElementName="root"/>
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    
    <Grid>
        <TextBlock/>
        <TextBox x:Name="txt"/>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfLib.Controls
{
    /// <summary>
    /// TextBoxControl.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class TextBoxControl : UserControl
    {
        public TextBoxControl()
        {
            InitializeComponent();
        }

        #region Public Properties

        public new Brush BorderBrush
        {
            get { return (Brush)GetValue(BorderBrushProperty); }
            set { SetValue(BorderBrushProperty, value); }
        }

        public new Thickness BorderThickness
        {
            get { return (Thickness)GetValue(BorderThicknessProperty); }
            set { SetValue(BorderThicknessProperty, value); }
        }

        public string WaterMarkText
        {
            get { return (string)GetValue(WaterMarkTextProperty); }
            set { SetValue(WaterMarkTextProperty, value); }
        }


        public Brush WaterMarkTextColor
        {
            get { return (Brush)GetValue(WaterMarkTextColorProperty); }
            set { SetValue(WaterMarkTextColorProperty, value); }
        }

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }



        public bool Validating
        {
            get { return (bool)GetValue(ValidatingProperty); }
            set { SetValue(ValidatingProperty, value); }
        }

        #endregion

        public static new readonly DependencyProperty BorderBrushProperty =
            DependencyProperty.Register("BorderBrush", typeof(Brush), typeof(TextBoxControl), new UIPropertyMetadata(Brushes.SkyBlue));

        public static new readonly DependencyProperty BorderThicknessProperty =
            DependencyProperty.Register("BorderThickness", typeof(Thickness), typeof(TextBoxControl), new UIPropertyMetadata(new Thickness(1)));

        public static readonly DependencyProperty WaterMarkTextProperty =
            DependencyProperty.Register("WaterMarkText", typeof(string), typeof(TextBoxControl), new PropertyMetadata(null));

        public static readonly DependencyProperty WaterMarkTextColorProperty =
            DependencyProperty.Register("WaterMarkTextColor", typeof(Brush), typeof(TextBoxControl), new UIPropertyMetadata(Brushes.Gray));

        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(TextBoxControl), new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

        public static readonly DependencyProperty ValidatingProperty =
            DependencyProperty.Register("Validating", typeof(bool), typeof(TextBoxControl), new UIPropertyMetadata(false));
    }
}

 

-->텍스트를 입력하면 워터마크 텍스트가 사라지는 것을 볼 수 있다. 

 

💻 LoginControl.xaml

<UserControl x:Class="SunjeongTalk.Controls.LoginControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:SunjeongTalk.Controls" 
             xmlns:fa6="http://schemas.fontawesome.com/icons/svg" xmlns:system="clr-namespace:System;assembly=System.Runtime" xmlns:controls="clr-namespace:WpfLib.Controls;assembly=WpfLib"
             mc:Ignorable="d" 
             d:DesignHeight="550" d:DesignWidth="350"
             Background="{StaticResource ColorPrimary}">

    <UserControl.Resources>
        <system:Double x:Key="ElementHeight">35</system:Double>

        <Style x:Key="BottomButton" TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="{StaticResource ColorGray}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="FontSize" Value="{StaticResource FontSmall}"/>
        </Style>
    </UserControl.Resources>
    
    <Grid Margin="20 40 20 20">
        <Grid.RowDefinitions>
            <RowDefinition Height="1.3*"/>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        
    <!--로고-->
        <fa6:SvgAwesome Icon="Brands_Rocketchat" 
                        Margin="20"
                        PrimaryColor="{StaticResource ColorGray}"/>
        
    <!--Body-->
        <StackPanel Grid.Row="1"
                    Margin="30 10">
            <!--<ComboBox Height="{StaticResource ElementHeight}"/>-->
            <controls:TextBoxControl Background="White" 
                                     Height="35"
                                     WaterMarkText="이메일을 입력하세요"
                                     WaterMarkTextColor="Red"
                                     Text="안녕하세요"
                                     Validating="False"/>
            <PasswordBox Height="{StaticResource ElementHeight}"/>
            <Button Content="로그인" Height="{StaticResource ElementHeight}"
                    Margin="0 10 0 0"/>
            <!--또는 Seperator-->
            <Grid Height="{StaticResource ElementHeight}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Separator Grid.Column="0"/>
                <TextBlock Grid.Column="1" 
                           VerticalAlignment="Center"
                           Text="또는"
                           Margin="8 0"/>
                <Separator Grid.Column="2"/>
            </Grid>
            <Button Content="QR코드 로 그인"
                     Height="{StaticResource ElementHeight}"
                    Margin="0 10 0 0"/>

            <StackPanel Orientation="Horizontal" Height="{StaticResource ElementHeight}">
                <CheckBox Content="자동로그인"
                          VerticalContentAlignment="Center"/>
                <Button BorderThickness="2"
                        Background="#FFEDD607"
                        BorderBrush="#FFA99900"
                        Width="17"
                        Height="17"
                        Margin="5 0">
                    <Button.Resources>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="CornerRadius" Value="30"/>
                        </Style>
                    </Button.Resources>
                    <fa6:SvgAwesome Icon="Solid_Info" PrimaryColor="#FFA99900"/>
                </Button>
            </StackPanel>
        </StackPanel>
        
    <!--Bottom-->
        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="0" 
                    Content="계정찾기"
                    Style="{StaticResource BottomButton}"/>
            <Separator Grid.Column="1" 
                       Width="1"
                       Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}"
                       Margin="0 5"/>

            <Button Grid.Column="2"
                    Content="비밀번호 재설정"
                    Style="{StaticResource BottomButton}"/>

            <Separator Grid.Column="3" 
                       Width="1"
                       Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}"
                       Margin="0 5"/>

            <Button Grid.Column="4"
                    Content="회원가입"
                    Style="{StaticResource BottomButton}"/>
        </Grid>
    </Grid>
</UserControl>

 

 

💻 Converters

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;
using System.Windows.Media;

namespace WpfLib.Converters
{
    public class ValidatingBorderBrushConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            bool? isValidation = values[0] as bool?;
            if(isValidation != null && isValidation == true)
            {
                return Brushes.Red;
            }
            else
            {
                return (Brush)values[1];
            }
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Data;

namespace WpfLib.Converters
{
    public class ValidatingBorderThicknessConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            bool? isValidation = values[0] as bool?;
            if(isValidation != null && isValidation == true)
            {
                return new Thickness(2);
            }
            else
            {
                return values[1];
            }
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}