हम Win8 / RT, विंडोज फोन के लिए अपना वॉटरमार्क टेक्स्टबॉक्स और पासवर्डबॉक्स लिखते हैं

विषय

दरअसल, यह एक बहुत ही परेशान करने वाला काम है, लेकिन, जिसका सामना करते हुए, आप अपना कीमती समय खो सकते हैं।
तो हमारे पास क्या है:
WinRT XAML टूलकिट ने अपने बोर्ड पर वॉटरमार्क टेक्स्टबॉक्स रखा है, लेकिन इसकी सीमित कार्यक्षमता (वॉटरमार्क कलर स्कीम) है। इसके अलावा, वॉटरमार्क पासवर्डबॉक्स अपसेट की कमी।
निम्नलिखित पाठ को लागू करने और सरल नियंत्रणों के एक जोड़े को स्थापित करके 30 मिनट का समय बचाएगा।) यदि दिलचस्पी है, तो बिल्ली में आपका स्वागत है।

विचार

यह विचार बेहद सरल है: पाठ में प्रवेश के लिए टेक्स्टबॉक्स और वॉटरमार्क प्रदर्शित करने के लिए टेक्स्टब्लॉक। (पासवर्डबॉक्स और टेक्स्टब्लॉक क्रमशः)। यह केवल नियंत्रण की पारदर्शिता को चालाकी से करने के लिए बनी हुई है।
प्रस्तुत उदाहरण विंडोज 8 / आरटी के लिए है। विंडोज फोन के लिए कार्यान्वयन मुश्किल नहीं है।

WatermarkTextBox.xaml

<UserControl x:Class="Test.Controls.WatermarkTextBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Test.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="50" d:DesignWidth="400"> <Border x:Name="brd" Background="#FFE0E0E0" VerticalAlignment="Stretch" Padding="15,5" > <Grid> <TextBlock x:Name="tbWatermark" TextWrapping="Wrap" Foreground="#FF646464" IsHitTestVisible="False" Padding="0" FontSize="14.667" VerticalAlignment="Center" Margin="0" /> <TextBox x:Name="tb" LostFocus="LostFocus" GotFocus="GotFocus" Background="{x:Null}" FontSize="11" TextChanged="Tb_OnTextChanged" Margin="0" VerticalAlignment="Center" BorderThickness="0" Padding="0" /> </Grid> </Border> </UserControl> 

WatermarkTextBox.cs

  public sealed partial class WatermarkTextBox : UserControl { public WatermarkTextBox() { InitializeComponent(); } private void LostFocus(object sender, RoutedEventArgs e) { CheckWatermark(); brd.Background = new SolidColorBrush(Color.FromArgb(255, 224, 224, 224)); } public void CheckWatermark() { var passwordEmpty = string.IsNullOrEmpty(tb.Text); tbWatermark.Opacity = passwordEmpty ? 100 : 0; tb.Opacity = passwordEmpty ? 0 : 100; } private void GotFocus(object sender, RoutedEventArgs e) { tbWatermark.Opacity = 0; tb.Opacity = 100; brd.Background = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255)); } private void Tb_OnTextChanged(object sender, TextChangedEventArgs e) { Text = tb.Text; } #region DependencyProperty /// <summary> /// Watermark /// </summary> public string Watermark { get { return (string)GetValue(WatermarkProperty); } set { SetValue(WatermarkProperty, value); } } public static readonly DependencyProperty WatermarkProperty = DependencyProperty.Register("Watermark", typeof(string), typeof(WatermarkTextBox), new PropertyMetadata("", WatermarkChanged)); private static void WatermarkChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (WatermarkTextBox)d; var val = (string)e.NewValue; controll.tbWatermark.Text = val; } /// <summary> /// TextSize /// </summary> public int TextSize { get { return (int)GetValue(TextSizeProperty); } set { SetValue(TextSizeProperty, value); } } public static readonly DependencyProperty TextSizeProperty = DependencyProperty.Register("TextSize", typeof(int), typeof(WatermarkTextBox), new PropertyMetadata(0, TextSizeChanged)); private static void TextSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (WatermarkTextBox)d; var val = (int)e.NewValue; if (val < 10){val = 10;} controll.tb.FontSize = val; controll.tbWatermark.FontSize = val; } /// <summary> /// Text /// </summary> public string Text { get { return (string)GetValue(TextProperty); } set { SetValue(TextProperty, value); } } public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(WatermarkTextBox), new PropertyMetadata("", TextChanged)); private static void TextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (WatermarkTextBox)d; var val = (string)e.NewValue; if (val == null) { controll.tb.Text = ""; return; } controll.tb.Text = val; } #endregion } 

WatermarkPasswordBox.xaml

 UserControl x:Class="Test.Controls.WatermarkPasswordBox" 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" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Border x:Name="brd" Background="#FFE0E0E0" VerticalAlignment="Stretch" Padding="15,5"> <Grid> <TextBlock x:Name="tbWatermark" TextWrapping="Wrap" Foreground="#FF646464" IsHitTestVisible="False" Padding="0" FontSize="14.667" VerticalAlignment="Center" Margin="0" /> <PasswordBox x:Name="pb" LostFocus="PasswordLostFocus" GotFocus="PasswordGotFocus" Background="{x:Null}" FontSize="11" PasswordChanged="Pb_OnPasswordChanged" Margin="0" VerticalAlignment="Center" BorderThickness="0" Opacity="0" Padding="0" /> </Grid> </Border> </UserControl> 

WatermarkPasswordBox.cs

  public sealed partial class WatermarkPasswordBox : UserControl { public WatermarkPasswordBox() { this.InitializeComponent(); } private void PasswordLostFocus(object sender, RoutedEventArgs e) { CheckWatermark(); brd.Background = new SolidColorBrush(Color.FromArgb(255, 224, 224, 224)); } public void CheckWatermark() { var passwordEmpty = string.IsNullOrEmpty(pb.Password); tbWatermark.Opacity = passwordEmpty ? 100 : 0; pb.Opacity = passwordEmpty ? 0 : 100; } private void PasswordGotFocus(object sender, RoutedEventArgs e) { tbWatermark.Opacity = 0; pb.Opacity = 100; brd.Background = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255)); } private void Pb_OnPasswordChanged(object sender, RoutedEventArgs e) { Password = pb.Password; } #region DependencyProperty /// <summary> /// Watermark /// </summary> public string Watermark { get { return (string)GetValue(WatermarkProperty); } set { SetValue(WatermarkProperty, value); } } public static readonly DependencyProperty WatermarkProperty = DependencyProperty.Register("Watermark", typeof(string), typeof(WatermarkPasswordBox), new PropertyMetadata("", WatermarkChanged)); private static void WatermarkChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (WatermarkPasswordBox)d; var val = (string)e.NewValue; controll.tbWatermark.Text = val; } /// <summary> /// Password /// </summary> public string Password { get { return (string)GetValue(PasswordProperty); } set { SetValue(PasswordProperty, value); } } public static readonly DependencyProperty PasswordProperty = DependencyProperty.Register("Password", typeof(string), typeof(WatermarkPasswordBox), new PropertyMetadata("", PasswordChanged)); private static void PasswordChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (WatermarkPasswordBox)d; var val = (string)e.NewValue; if (val == null) { controll.pb.Password = ""; return; } controll.pb.Password = val; } /// <summary> /// TextSize /// </summary> public int TextSize { get { return (int)GetValue(TextSizeProperty); } set { SetValue(TextSizeProperty, value); } } public static readonly DependencyProperty TextSizeProperty = DependencyProperty.Register("TextSize", typeof(int), typeof(WatermarkPasswordBox), new PropertyMetadata(0, TextSizeChanged)); private static void TextSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var controll = (WatermarkPasswordBox)d; var val = (int)e.NewValue; if (val < 10) { val = 10; } controll.pb.FontSize = val; controll.tbWatermark.FontSize = val; } #endregion } 

और सरल उपयोग कहीं भी आप चाहते हैं:

 <controls:WatermarkTextBox x:Name="WatermarkTextBox " Text="{Binding Login, Mode=TwoWay}" Watermark="Login" Grid.Row="2" Margin="10,0" TextSize="18"/> <controls:WatermarkPasswordBox x:Name="WatermarkPasswordBox" Watermark="Password" Password="{Binding Password, Mode=TwoWay}" Grid.Row="4" Margin="10,0" TextSize="18" /> 

बस अपनी पसंदीदा लाइन मत भूलना:

 xmlns:controls="using:Test.Controls" 

यह कैसे काम करता है?

प्राप्ति पर, GotFocus / LostFocus को टेक्स्ट / पासवर्ड इनपुट की शुरुआत / अंत में संसाधित किया जाता है। दर्ज किए गए मूल्यों के आधार पर, एक विकल्प बनाया जाता है कि पाठ या वॉटरमार्क (CheckWatermark विधि) प्रदर्शित करना है या नहीं। उपयुक्त क्षेत्र में पाठ / पासवर्ड दर्ज करते समय, हम अपने बनाए गए DependencyProperty (Tb_OnTextChanged / Pb_OnTextChanged तरीकों) को रीडायरेक्ट करते हैं। DependencyProperty की एक छोटी सूची में पाठ वॉटरमार्क, मुख्य इनपुट फ़ील्ड का पाठ, लेबल का फ़ॉन्ट आकार और पाठ शामिल हैं।

हम खुद के लिए समायोजित करना जारी रखते हैं

किसी भी आवश्यक संपत्ति को अपने स्वाद में जोड़ना बिल्कुल भी मुश्किल नहीं है। 10 मिनट बिताए, लेकिन पूरा नियंत्रण मिला। मुझे उम्मीद है कि मैंने किसी का समय बचाया।

टिप्पणी

एक लेख लिखते समय, मैं एक डिपेंडेंसी प्रॉपर्टी जेनरेटर में आया था। उम्मीद है कि इससे समय की भी बचत होगी।

उद्देश्य / पक्षपाती आलोचना का स्वागत है।

अद्यतन

शीर्ष बाएँ - वॉटरमार्कटेक्स्टबॉक्स
निचला बाएँ - वॉटरमार्कपासवर्ड
शीर्ष दाएं - दर्ज किए गए डेटा के साथ वॉटरमार्कटेक्स्टबॉक्स
नीचे दाईं ओर - दर्ज किए गए डेटा और फ़ोकस के साथ वॉटरमार्कप्रासवर्डबॉक्स।