[WPF] 카카오톡 구현 5 - PasswordBox WaterMarkText, Validating 만들어보기

💻 PasswordBoxControl.xaml

<UserControl x:Class="WpfLib.Controls.PasswordBoxControl"
             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="450" d:DesignWidth="800"
             x: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>
                <DataTrigger Binding="{Binding Text, ElementName=txt}" Value="">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Text" Value="{Binding Password, ElementName=root, UpdateSourceTrigger=PropertyChanged}"/>
            <Setter Property="Visibility" Value="Collapsed"/>
        </Style>

        <Style TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource BaseControl}">
            <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"/>
        <PasswordBox x:Name="pwd"/>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.ComponentModel;
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>
    /// PasswordBoxControl.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class PasswordBoxControl : UserControl
    {

        #region Fields
        private bool _isFirst = true;
        #endregion

        #region Methods
        private void Pwd_PasswordChanged(object sender, RoutedEventArgs e)
        {
            Password = pwd.Password;
        }

        private void Txt_TextChanged(object sender, TextChangedEventArgs e)
        {
            if(_isFirst || DesignerProperties.GetIsInDesignMode(this))
            {
                if(pwd.Password != txt.Text)
                    pwd.Password = txt.Text;

                _isFirst = false;
            }
        }
        #endregion

        public PasswordBoxControl()
        {
            InitializeComponent();
            txt.TextChanged += Txt_TextChanged;
            pwd.PasswordChanged += Pwd_PasswordChanged;
        }


        #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 Password
        {
            get { return (string)GetValue(PasswordProperty); }
            set { SetValue(PasswordProperty, value); }
        }



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

        #endregion

        #region Public Statics
        public static readonly DependencyProperty ValidatingProperty =
            DependencyProperty.Register("Validating", typeof(bool), typeof(PasswordBoxControl), new UIPropertyMetadata(false));
        public static new readonly DependencyProperty BorderBrushProperty =
            DependencyProperty.Register("BorderBrush", typeof(Brush), typeof(PasswordBoxControl), new UIPropertyMetadata(Brushes.SkyBlue));

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

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

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

        public static readonly DependencyProperty PasswordProperty =
            DependencyProperty.Register("Password", typeof(string), typeof(PasswordBoxControl), new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));


        #endregion
    }
}

 

💻 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="True"/>
            <controls:PasswordBoxControl 
                Height="{StaticResource ElementHeight}"
                Background="White"
                WaterMarkText="비밀번호를 입력하세요."
                WaterMarkTextColor="red"
                Password="12345"/>
            <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>