WPF के साथ त्वरित शुरुआत। भाग 1. बंधन, INotifyPropertyChanged और MVVM

सभी को नमस्कार!

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

मुझे लगता है कि यह कहना आवश्यक नहीं है कि WPF Microsoft का विकास है :) यह तकनीक विंडोज़ के लिए डेस्कटॉप अनुप्रयोगों को विकसित करने के लिए डिज़ाइन की गई है, जिसकी शुरुआत विंडोज़ एक्सपी से होती है। ऐसा क्यों? यह इस तथ्य के कारण है कि WPF .NET प्लेटफॉर्म के शीर्ष पर चलता है, जिसकी न्यूनतम आवश्यकताएं विंडोज एक्सपी और बाद में हैं। दुर्भाग्य से, WPF अन्य प्लेटफार्मों पर काम नहीं करता है, हालांकि संभावना है कि यह निकट भविष्य में बदल जाएगा: WPF- आधारित एवलोनिया ढांचा विकास के अधीन है ।

WPF के बारे में क्या खास है?

WPF और अन्य डेस्कटॉप बिल्डिंग टूल्स के बीच दो मुख्य अंतर:

• XAML मार्कअप भाषा विंडो इंटरफ़ेस को खुद ही चिह्नित करने के लिए।
• DirectX के माध्यम से प्रतिपादन, हार्डवेयर ग्राफिक्स त्वरण।

मैं विवरण में नहीं जाऊंगा, क्योंकि यह लेख का विषय नहीं है। अगर दिलचस्पी है, तो Google XAML, WPF रेंडरिंग, milcore.dll और DirectX :)

यह लेख किस बारे में है?

इस लेख में WPF तकनीक पर निर्मित एक उदाहरण अनुप्रयोग है:

• MVVM और INotifyPropertyChanged इंटरफ़ेस। पाठ की प्रति।

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

लेख को दोहराने के लिए हमें क्या करने की आवश्यकता है?

C # :) में थोड़ा विकास का अनुभव, आपको कम से कम भाषा वाक्य रचना को अच्छी तरह से समझने की आवश्यकता है। आपको विजुअल स्टूडियो के साथ एक विंडोज मशीन (उदाहरणों में विन 10) की भी आवश्यकता होगी (उदाहरणों में यह 2017 होगा, एक मुक्त सामुदायिक संस्करण है)। वीएस स्थापित करते समय, आपको .NET प्लेटफॉर्म के लिए डेस्कटॉप विकास के लिए समर्थन सक्षम करना होगा

इसके अलावा इस खंड में मैं एक परियोजना के निर्माण का वर्णन करूंगा।

हम वीएस को लॉन्च करते हैं, एक नई परियोजना बनाते हैं, एप्लिकेशन प्रकार का चयन करें डब्ल्यूपीएफ ऐप (.NET फ्रेमवर्क) (आप इसे ऊपरी दाईं ओर खोज बार में दर्ज कर सकते हैं), इसे जो कुछ भी आप चाहते हैं उसे कॉल करें।

एक नई परियोजना बनाने के बाद, इंटरफ़ेस संपादक विंडो खुलती है, यह मेरे लिए ऐसा दिखता है

सबसे नीचे एक लेआउट एडिटर होता है, सबसे ऊपर विंडो इंटरफ़ेस का एक पूर्वावलोकन होता है, लेकिन आप कोड संपादक और इंटरफ़ेस पूर्वावलोकन के सापेक्ष स्थान को बदल सकते हैं ताकि वे इन बटन (दो क्षेत्रों की सीमा के दाईं ओर) का उपयोग करके क्षैतिज क्रम में स्थित हों:

शुरू करने से पहले

विंडो तत्व (उन्हें कंट्रोल शब्द से नियंत्रण भी कहा जाता है) को कंटेनर के अंदर या कंटेंटकंट्रोल प्रकार के किसी अन्य तत्व के अंदर रखा जाना चाहिए। एक कंटेनर एक विशेष नियंत्रण है जो आपको कई बच्चे नियंत्रण को अंदर रखने और उनकी पारस्परिक व्यवस्था को व्यवस्थित करने की अनुमति देता है। कंटेनरों के उदाहरण:

• ग्रिड - आपको कॉलम और पंक्तियों द्वारा तत्वों को व्यवस्थित करने की अनुमति देता है, प्रत्येक कॉलम या पंक्ति की चौड़ाई व्यक्तिगत रूप से कॉन्फ़िगर की गई है।
• StackPanel - आप बच्चों को एक पंक्ति या स्तंभ में व्यवस्थित करने की अनुमति देता है।

अन्य कंटेनर हैं। चूंकि कंटेनर भी एक नियंत्रण है, कंटेनर के अंदर नेस्टेड कंटेनर हो सकते हैं जिसमें नेस्टेड कंटेनर और इतने पर हों। यह आपको लचीले ढंग से एक दूसरे के सापेक्ष नियंत्रण की व्यवस्था करने की अनुमति देता है। इसके अलावा, कंटेनरों की मदद से, हम खिड़की को आकार देते समय किसी भी लचीले ढंग से नेस्टेड नियंत्रण के व्यवहार को नियंत्रित नहीं कर सकते हैं।

MVVM और INotifyPropertyChanged इंटरफ़ेस। पाठ की प्रति।

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

तो, हमारे पास एक ताज़ा बनाई गई परियोजना है (मैंने इसे एक्स 1 नाम दिया है), लेआउट संपादक पर जाएं और सबसे पहले डिफ़ॉल्ट कंटेनर ( <ग्रिड> </ ग्रिड> ) को <स्टैकपैनल> </ स्टैकपैनल के साथ बदलें। यह कंटेनर पर्याप्त होगा, क्योंकि हमें एक के ऊपर एक दो नियंत्रण लगाने की आवश्यकता होगी। हम स्पष्ट रूप से निर्दिष्ट करते हैं कि संपत्ति को ओरिएंटेशन = "वर्टिकल" जोड़कर घटकों को कैसे व्यवस्थित किया जाएगा। पैनल स्टैक के अंदर कुछ तत्वों को जोड़ें: पाठ दर्ज करने के लिए एक क्षेत्र और पाठ प्रदर्शित करने के लिए एक क्षेत्र। चूंकि इन नियंत्रणों में एम्बेडेड कोड नहीं होगा, इसलिए आप उन्हें स्व-समापन टैग (नीचे कोड देखें) के साथ वर्णन कर सकते हैं। उपरोक्त सभी प्रक्रियाओं के बाद, कंटेनर विवरण कोड और नेस्टेड नियंत्रणों को निम्नलिखित रूप लेना चाहिए:

<StackPanel Orientation="Vertical"> <TextBox /> <TextBlock /> </StackPanel> 

अब इस उदाहरण के उद्देश्य पर ध्यान केंद्रित करते हैं। हम चाहते हैं कि जब टेक्स्टबॉक्स में टाइप किया जाए, तो स्पष्ट प्रतिलिपि संचालन से बचते हुए, उसी टेक्स्ट को टेक्स्ट ब्लॉक में सिंक्रोनाइज़ किया जाए। हमें किसी प्रकार की कनेक्टिंग इकाई की आवश्यकता है, और यहां हम बाध्यकारी के रूप में ऐसी चीज के लिए आते हैं, जिसका उल्लेख ऊपर किया गया था। WPF शब्दावली में बाइंडिंग एक ऐसा तंत्र है जो आपको C # -क्लास ऑब्जेक्ट के कुछ गुणों के साथ नियंत्रण के कुछ गुणों को संबद्ध करने की अनुमति देता है और बंडल के हिस्सों में से एक में इन गुणों को पारस्परिक रूप से अपडेट करता है (यह एक बार, दूसरे, या दोनों दिशाओं में काम कर सकता है)। जो लोग Qt से परिचित हैं, उनके लिए आप स्लॉट्स और सिग्नल्स का एक सादृश्य बना सकते हैं। समय को लंबा नहीं करने के लिए, आइए कोड पर चलते हैं।

तो, बाध्यकारी को व्यवस्थित करने के लिए, आपको नियंत्रण के गुणों और एक निश्चित सी # वर्ग की कुछ संपत्ति की आवश्यकता होती है। सबसे पहले, XAML कोड का पता लगाएं। दोनों नियंत्रणों के पाठ को पाठ संपत्ति में संग्रहीत किया जाता है, इसलिए इन गुणों के लिए एक बंधन जोड़ें। यह इस तरह किया जाता है:

 <TextBox Text="{Binding}"/> <TextBlock Text="{Binding}"/> 

हमने एक बंधन बनाया, लेकिन अब के लिए यह स्पष्ट नहीं है कि क्यों :) हमें इस वस्तु में कुछ वर्ग और कुछ संपत्ति की आवश्यकता है, जिससे बंधन बनाया जाएगा (जैसा कि वे कहते हैं, जिसे आपको बांधने की आवश्यकता है)।

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

हालाँकि, केवल एक दृश्य मॉडल वर्ग लिखना पर्याप्त नहीं है। किसी भी तरह से बाध्यकारी तंत्र को सूचित करना आवश्यक है कि दृश्य मॉडल संपत्ति या दृश्य संपत्ति बदल गई है। ऐसा करने के लिए, एक विशेष इंटरफ़ेस INotifyPropertyChanged है , जिसमें PropertyChanged इवेंट शामिल है। हम इस इंटरफ़ेस को बेस क्लास BaseViewModel के ढांचे में लागू करते हैं। भविष्य में, हम इस बेस क्लास से अपने सभी व्यू मॉडल को इनहेरिट करेंगे ताकि इंटरफ़ेस के कार्यान्वयन की नकल न करें। इसलिए, प्रोजेक्ट में ViewModels निर्देशिका जोड़ें, और इस निर्देशिका में BaseViewModel.cs फ़ाइल जोड़ें। हम निम्नलिखित परियोजना संरचना प्राप्त करते हैं:

आधार दृश्य मॉडल के लिए कार्यान्वयन कोड:

 using System.ComponentModel; namespace Ex1.ViewModels { public class BaseViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } } 

आइए, आधार से विरासत में मिले अपने मेनवॉंडो वर्ग के लिए अपना दृष्टिकोण बनाएं। ऐसा करने के लिए, एक ही ViewModels निर्देशिका में, MainWindowViewModel.cs फ़ाइल बनाएं, जिसके अंदर ऐसा कोड होगा:

 namespace Ex1.ViewModels { public class MainWindowViewModel : BaseViewModel { } } 

बहुत बढ़िया! अब हमें इस दृश्य मॉडल में एक संपत्ति जोड़ने की आवश्यकता है, जिस पर हम अपने नियंत्रणों के पाठ को बांधेंगे। चूंकि यह पाठ है, इस संपत्ति का प्रकार स्ट्रिंग होना चाहिए:

 public string SynchronizedText { get; set; } 

नतीजतन, हमें ऐसा कोड मिलता है

 namespace Ex1.ViewModels { public class MainWindowViewModel : BaseViewModel { public string SynchronizedText { get; set; } } } 

तो, ऐसा लगता है, उन्होंने ऐसा किया। यह इस संपत्ति को देखने के लिए बाध्य करता है और तैयार है। चलो अभी करते हैं:

 <TextBox Text="{Binding Path=SynchronizedText}"/> <TextBlock Text="{Binding Path=SynchronizedText}"/> 

Nishtyak, हम प्रोजेक्ट शुरू करते हैं, हम टेक्स्टबॉक्स में टाइप करते हैं iiiii ... कुछ नहीं होता है))) ठीक है, यह ठीक है, वास्तव में हम सही रास्ते पर जा रहे हैं, हम अभी सही बिंदु पर नहीं पहुंचे हैं।

मैं एक पल के लिए रुकने का प्रस्ताव करता हूं और सोचता हूं कि हम क्या याद कर रहे हैं। हमारे पास एक नजरिया है। Viewmodel भी। ज़बिंदिली जैसे गुण। वांछित इंटरफ़ेस लागू किया गया है। हमने पाठ की एक दयनीय रेखा को कॉपी करने के लिए बहुत काम किया, हमें इसकी आवश्यकता क्यों है ???!! 111!

ठीक है, एक तरफ मजाक करता है। हम एक दृश्य मॉडल ऑब्जेक्ट और कुछ और बनाना चाहते हैं (बाद में उस पर अधिक)। हमने स्वयं कक्षा का वर्णन किया है, लेकिन इसका कोई मतलब नहीं है, क्योंकि हमारे पास इस वर्ग की वस्तुएं नहीं हैं। ठीक है, आपको इस ऑब्जेक्ट का लिंक कहाँ संग्रहीत करने की आवश्यकता है? उदाहरण की शुरुआत के करीब, मैंने WPF में उपयोग किए जाने वाले एक निश्चित DataContext का उल्लेख किया। इसलिए, किसी भी दृश्य में एक DataContext संपत्ति होती है, जिससे हम अपने दृश्य मॉडल के लिए लिंक असाइन कर सकते हैं। चलो करते हैं। ऐसा करने के लिए, MainWindow.xaml फ़ाइल खोलें और इस दृश्य के लिए कोड खोलने के लिए F7 दबाएं। यह लगभग खाली है, इसमें केवल एक विंडो क्लास कंस्ट्रक्टर है। हमारे दृश्य मॉडल के निर्माण को इसमें जोड़ें और इसे विंडो के डेटाकोटेक्स्ट में रखें (वांछित नाम स्थान के साथ उपयोग करना न भूलें):

 public MainWindow() { InitializeComponent(); this.DataContext = new MainWindowViewModel(); } 

यह सरल था, लेकिन अभी भी पर्याप्त नहीं है। फिर भी, जब अनुप्रयोग शुरू होता है, तो कोई पाठ सिंक्रनाइज़ेशन नहीं होता है। और क्या करने की जरूरत है?

जब SynchronizedText गुण परिवर्तित होता है, तो आपको PropertyChanged इवेंट को उठाना होगा और उस दृश्य को सूचित करना चाहिए जिससे उसे इस ईवेंट की निगरानी करनी चाहिए। इसलिए, घटना को चालू करने के लिए, दृश्य मॉडल कोड को संशोधित करें:

 public class MainWindowViewModel : BaseViewModel { private string _synchronizedText; public string SynchronizedText { get => _synchronizedText; set { _synchronizedText = value; OnPropertyChanged(nameof(SynchronizedText)); } } } 

हमने यहाँ क्या किया है? हमने पाठ को संग्रहीत करने के लिए एक छिपे हुए फ़ील्ड को जोड़ा, इसे एक मौजूदा संपत्ति में लपेटा, और इस संपत्ति को बदलते समय हम न केवल छिपे हुए फ़ील्ड को बदलते हैं, बल्कि आधार दृश्य मॉडल में परिभाषित ऑनप्रोपर्टीचेंज्ड विधि को भी कॉल करते हैं और INOTifyPropertyChanged इंटरफ़ेस में घोषित प्रॉपर्टीचेंस्ड इवेंट को भी आधार में लागू करते हैं। मॉडल देखें। यह पता चलता है कि हर बार पाठ को बदलने के बाद, PropertyChanged घटना होती है, जिसमें दृश्य मॉडल के गुण का नाम बदल दिया गया था।

खैर, लगभग सब कुछ, फिनिश लाइन! यह उस दृश्य को निर्दिष्ट करने के लिए बनी हुई है जिसे उसे संपत्ति की घटना को सुनना चाहिए:

 <TextBox Text="{Binding Path=SynchronizedText, UpdateSourceTrigger=PropertyChanged, Mode=OneWayToSource}"/> <TextBlock Text="{Binding Path=SynchronizedText, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"/> 

इस तथ्य के अलावा कि हमने संकेत दिया कि किस ट्रिगर को अपडेट करना चाहिए, हमने यह भी संकेत दिया कि यह अद्यतन किस दिशा में ट्रैक किया जा रहा है: देखने के लिए मॉडल या इसके विपरीत। चूंकि हम टेक्स्टबॉक्स में पाठ दर्ज करते हैं, हम केवल दृश्य में परिवर्तन में रुचि रखते हैं, इसलिए हम OneWayToSource मोड का चयन करते हैं। पाठ ब्लॉक के मामले में, सब कुछ बिल्कुल विपरीत है: हम उन्हें देखने के लिए दृश्य मॉडल में बदलाव में रुचि रखते हैं, इसलिए हम वनवे मोड का चयन करते हैं। यदि हम चाहते हैं कि दोनों दिशाओं में परिवर्तन किए जाएं, तो हम मोड को बिल्कुल भी निर्दिष्ट नहीं कर सकते, या TwoWay को स्पष्ट रूप से निर्दिष्ट नहीं कर सकते।

तो, प्रोग्राम चलाएं, टेक्स्ट टाइप करें और voi-la! पाठ तुल्यकालिक रूप से बदलता है, और हमने कहीं भी कुछ भी कॉपी नहीं किया!

आपके ध्यान के लिए धन्यवाद, जारी रखने के लिए। हम DataTemplate और कमांड पैटर्न से निपटेंगे।