👃🏾 🧒🏿 👩🏽‍⚕️ उपयोगकर्ता नियंत्रण, विंडोज फोन / स्टोर का उपयोग करके कुकीज़ के साथ टेक्स्टबॉक्स 🎺 🎉 🧙🏿

हैलो, प्रिय habrozhitel!

आज हम अतिरिक्त सुविधाओं के साथ अपना स्वयं का टेक्स्टबॉक्स बनाने का प्रयास करेंगे।

मुझे कहना होगा कि उनमें से केवल दो ही होंगे:
प्लेसहोल्डर, जिसे "डिफ़ॉल्ट पाठ" के रूप में भी जाना जाता है;
स्पष्ट बटन टैबलेट की दुनिया में एक बहुत ही सुविधाजनक चीज है जो आपको हमारे टेक्स्ट बॉक्स की सामग्री को जल्दी से साफ करने की अनुमति देता है।

ट्यूटोरियल के लिए विंडोज फोन एप्लिकेशन का एक उदाहरण दिया गया है, लेकिन मुझे यकीन है कि यह WPF और सिल्वरलाइट दोनों के साथ काम करेगा। विंडोज स्टोर ऐप्स में एक डिफ़ॉल्ट स्पष्ट बटन होता है, लेकिन प्लेसहोल्डर को उसी तरह जोड़ा जाता है।

मैं विंडोज विंडोज टूलकिट के पुस्तकालय घटक के रूप में उत्कृष्ट टिप के लिए @Useless_guy के लिए अपना आभार व्यक्त करना चाहता हूं।
इसके अलावा, मैं आपको Coding4Fun लाइब्रेरी पर ध्यान देने की सलाह देता हूं।
वास्तव में, यदि आपके UserControls को बनाने के लिए कोई विशेष आवश्यकता नहीं है, तो आपको तैयार किए गए कार्य समाधानों का उपयोग करना चाहिए।

तो चलिए शुरू करते है!

प्रविष्टि

यह कोई रहस्य नहीं है कि उपयोगकर्ता इंटरफ़ेस बनाने के लिए XAML एक शक्तिशाली उपकरण है।

लेकिन केवल एक चीज जो नौसिखिए उपयोगकर्ता के लिए बहुत अच्छी नहीं हो सकती है, वह है इसकी अत्यधिकता (जैसा कि यह पहली बार लगता है) जटिलता है, जो स्वाभाविक रूप से गुग्लिंग या स्टैक-वर्मिंग के घंटों के परिणामस्वरूप होती है।

लेकिन वास्तव में, जैसे ही आप समझना शुरू करते हैं, बिट द्वारा जानकारी एकत्र करना, अग्रणी Microsoft डेवलपर्स के बारे में क्या सोच रहे हैं - सब कुछ बहुत स्पष्ट हो जाता है, और आप अब यह नहीं समझ सकते हैं कि आपने इसे अपने बारे में कैसे नहीं सोचा, क्योंकि यह स्पष्ट है ...

लेकिन यह गीत से अभ्यास करने का समय है।

rubimsya

इसलिए, पहली चीज़ जो हमें चाहिए वह है एक नया प्रोजेक्ट और इसमें एक नया उपयोगकर्ता नियंत्रण।

1. विजुअल स्टूडियो लॉन्च करें।

2. "AdvancedTextBoxProject" नाम से एक नया खाली प्रोजेक्ट बनाएं।

3. प्रोजेक्ट बनाने के बाद, सोल्यूशन एक्सप्लोरर पर जाएं और प्रोजेक्ट के नाम पर राइट-क्लिक करें, और संदर्भ मेनू में Add-> नया आइटम चुनें ...

4. नया आइटम जोड़ें संवाद बॉक्स में, उपयोगकर्ता नियंत्रण का चयन करें, इसे "एडवांस्ड टेक्स्टबॉक्स" कहें और "ऐड" बटन पर क्लिक करें।

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

<StackPanel> <Grid> <TextBox x:Name="tbMain"></TextBox> <Button x:Name="bClear" HorizontalAlignment="Right" BorderThickness="0" Content="&#xE10A;" FontFamily="Segoe UI Symbol" Foreground="{StaticResource ApplicationPageBackgroundThemeBrush}" Visibility="Collapsed"></Button> </Grid> </StackPanel>

चलिए क्रम में शुरू करते हैं - StackPanel घटक लाइन द्वारा इसके अंदर की सामग्री को संरेखित करने के लिए आवश्यक है, अन्यथा हमारा ग्रिड घटक के पूरे क्षेत्र तक फैल जाएगा। इसके अंदर, हम एक ग्रिड बनाते हैं जो सीधे हमारे घटक के प्रतिनिधित्व से संबंधित है।

हम TextBox घटक के साथ कुछ भी नहीं करेंगे, इसलिए हम इसे मंच पर फेंक देते हैं और इसे किसी भी सुविधाजनक नाम के साथ कॉल करते हैं ताकि हमारे घटक के कोड से इसे एक्सेस कर सकें।

लेकिन बटन घटक को प्लास्टिक सर्जरी से गुजरना पड़ता है। हम उसे एक सुविधाजनक नाम भी देंगे, लेकिन, इसके अलावा, हम उसे बताएंगे:
1. ताकि यह हमारे घटक (क्षैतिज क्षैतिज संरेखण) के दाहिने किनारे के साथ संरेखित हो।
2. ताकि यह घटक (BorderThickness) के लिए एक अनावश्यक सीमा न हो।
3. ताकि बटन पर एक ही क्रॉस (सामग्री और FontFamily) तैयार हो।
4. ताकि क्रॉस विंडोज डिवाइस (फोरग्राउंड) के हमारे मुख्य विषय का रंग हो।
5. और अंत में, ताकि क्लिनिंग बटन की शुरुआत में दृश्यता (दृश्यता) दिखाई न दे।

आपको याद दिला दूं कि इस चित्र और StandardStyles.xaml फ़ाइल (विंडोज स्टोर एप्लिकेशन से एक शैली फ़ाइल) के संयोजन से बिंदु 3 प्राप्त किया गया था।

खैर, हमने प्रदर्शन का पता लगा लिया, अब कोड करने का समय आ गया है।

शुरू करने के लिए, हम प्लेसहोल्डर के सही प्रसंस्करण को व्यवस्थित करेंगे, और उसके बाद ही सबसे सरल एक स्पष्ट बटन है।

हम अपने TextBox का चयन करते हैं, गुण विंडो में ईवेंट चुनें और GotFocus इवेंट पर डबल-क्लिक करें।

चूँकि हमने अभी तक कुछ भी उपयोगी नहीं लिखा है, कोड में हमारे पास केवल हमारी कक्षा का विवरण है, इसके निर्माण के लिए एकमात्र InitializeComponent () विधि और GotFocus () ईवेंट हैंडलर जो हमने अभी बनाया है।

चूंकि हमारे पास घटक में कोई फ़ील्ड नहीं है जो प्लेसहोल्डर के लिए ज़िम्मेदार होगा, हमें पहले इसे बनाना होगा:

 private string placeholder=""; public string Placeholder { get { return this.placeholder; } set { this.placeholder = value; tbMain.Text = this.placeholder; } }

ठीक है, अब आप GotFocus () ईवेंट हैंडलर के विवरण पर लौट सकते हैं:

 if (tbMain.Text.Trim() == this.placeholder) { tbMain.Text = ""; } bClear.Visibility = System.Windows.Visibility.Visible;

यहां हम अपने टेक्स्टबॉक्स के ट्रिम किए गए (ट्रिम ()) लाइन की जांच करते हैं - क्या यह वहां मौजूद डिफ़ॉल्ट टेक्स्ट है? यदि ऐसा है, तो फ़ील्ड को साफ़ करें और उपयोगकर्ता को जो भी वह चाहता है उसे दर्ज करने दें। ठीक है, उसी समय हम उसे टेक्स्ट फील्ड खाली करने के लिए बटन दिखाते हैं।

अगला, हमें उस घटना को संभालने की आवश्यकता है जब उपयोगकर्ता इनपुट फ़ील्ड से कहीं और स्विच करता है, इसके लिए हम फिर से अपने घटक के डिजाइन को खोलते हैं, टेक्स्टबॉक्स का चयन करें और एक इवेंट हैंडलर लॉस्टफोकस () बनाएं, जिसमें सब कुछ समान है, लेकिन इसके विपरीत

 if (tbMain.Text.Trim() == "") { tbMain.Text = this.placeholder; } bClear.Visibility = System.Windows.Visibility.Collapsed;

अब हमें स्पष्ट बटन के क्लिक इवेंट को संभालने की आवश्यकता है और हम पहले से ही अपने नए घटक का परीक्षण कर सकते हैं!

ऐसा करने के लिए, हम डिज़ाइनर के पास जाएंगे, लेकिन चूँकि बटन prying आँखों (और हमारे रास्ते से) से छिपा हुआ है, हमें XAML कोड पर जाने की ज़रूरत है, हमारे बटन की घोषणा पर क्लिक करें और हमारे बटन की घटनाएँ Properties विंडो में दिखाई देंगी। क्लिक करें और हैंडलर में लिखें:

 tbMain.Text = string.Empty; tbMain.Focus();

बटन क्लिक इवेंट हैंडलर में, हम अपने टेक्स्टबॉक्स को साफ करते हैं और उस पर ध्यान केंद्रित करते हैं। यह आवश्यक है क्योंकि जब बटन दबाया जाता है, तो हमारे टेक्स्टबॉक्स का लॉस्टफोकस इवेंट स्वचालित रूप से चालू हो जाता है, और इसलिए हमें फ़ोकस वापस करने की आवश्यकता होती है।

परीक्षण

ठीक है, अब इस तरह की अविश्वसनीय कठिनाई के साथ हमने जो कुछ भी लिखा है, उसका परीक्षण करना संभव है।

हम अपने आवेदन के मुख्य पृष्ठ के डिज़ाइनर के पास जाते हैं और XAML पृष्ठ घोषणा में एक और नाम स्थान जोड़ते हैं:

 xmlns:local="using:AdvancedTextBoxProject"

एक बार हो जाने के बाद, हम अंततः अपने कंपोनेंट को फॉर्म में जोड़ सकते हैं:

 <local:AdvancedTextBox Placeholder="Enter Some Text"></local:AdvancedTextBox>

हमारा डिफ़ॉल्ट पाठ तुरंत इनपुट फ़ील्ड में फ़ॉर्म पर दिखाई देगा और हम अपना एप्लिकेशन लॉन्च कर सकते हैं और देख सकते हैं कि यह कैसे काम करता है।

वैसे, हमारे UserControl के माध्यम से नेस्टेड घटकों के क्षेत्रों को बदलने में सक्षम होने के लिए, आपको उदाहरण के लिए, हमें आवश्यक गेट्टर और सेटर के साथ एक सार्वजनिक फ़ील्ड जोड़ना होगा:

 public string Text { get { return tbMain.Text; } set { tbMain.Text = value; } }

सभी को शुभकामनाएँ और जल्द ही मिलते हैं!

उपयोगकर्ता नियंत्रण, विंडोज फोन / स्टोर का उपयोग करके कुकीज़ के साथ टेक्स्टबॉक्स

प्रविष्टि

rubimsya

परीक्षण

More articles: