🤷 🤴🏼 💃🏼 विंडोज फोन के विकास के लिए यूआई राज्य प्रबंधन 👨🏿‍🏭 👩🏽‍🤝‍👨🏻 🕝

हाल ही में, हमारी टीम (स्लीम लैंब) ने विंडोज फोन के तहत प्रफिचोव सेवा के लिए एक क्लाइंट जारी किया। विकास के दौरान, हमारे सामने एक प्रश्न था - उपयोगकर्ता को रिक्तियों की सूची कैसे प्रदर्शित करें, जो कई राज्यों में हो सकती है।

इस लेख में, हम अभिव्यक्ति मिश्रण और MVVM पैटर्न का उपयोग करने वाले तत्वों की प्रदर्शन स्थिति को बदलने के लिए एक आसान तंत्र दिखाना चाहते हैं। MVVM लाइट टूलकिट फ्रेमवर्क का उपयोग करके एक उदाहरण दिया जाएगा, लेकिन मुझे लगता है कि दूसरों के साथ मतभेद न्यूनतम होना चाहिए।

यह किस लिए है?

तो, पैनोरमा में रिक्तियों की एक सूची है। इसे लोड, खाली या प्रदर्शित किया जा सकता है। पहले दो राज्यों को एक दृश्य एक में जोड़ा जा सकता है - यह संदेश आउटपुट है। कुल दो राज्य: सूची दिखाएं, संदेश दिखाएं।

लेकिन संदेश कैसे दिखाएं? मानक मैसेजबॉक्स वाले व्यक्ति को डराना अच्छा नहीं है। फिर, मानक अनुप्रयोगों पर ध्यान केंद्रित करते हुए, हमने सभी तत्वों को हटाने और तत्वों के स्थान पर एक संदेश प्रदर्शित करने का निर्णय लिया। हमने स्क्रीनशॉट में भी ऐसा ही किया था।

कैसे लागू करें?

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

इस मामले के लिए, एक्सप्रेशन ब्लेंड ने हमारे लिए एक सुविधाजनक उपकरण तैयार किया है, यह प्रत्येक तत्व के लिए स्टेट (राज्य) है, साथ ही साथ डेटास्टेबहेवियर का व्यवहार भी है।

राज्य - यह आधार के सापेक्ष तत्व की दृश्य स्थिति है, जो तत्व के मापदंडों को स्वयं और उसके बच्चों को संग्रहीत करता है, जैसे कि रंग, स्थान, पारदर्शिता, आदि।

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

कैसे करें इस्तेमाल?

मैं एक छोटा सा उदाहरण दूंगा जिसमें समय के साथ दो राज्यों का निर्माण और स्विच किया जाता है।

MvvmLight टेम्पलेट (WP71) का उपयोग करके एक खाली प्रोजेक्ट बनाएं।
टेम्पलेट MVVM लाइट टूलकिट का हिस्सा है।

MainPage पृष्ठ के ViewModel में तुरंत तर्क बनाएं। एक संपत्ति जोड़ें जो "ओके" पाठ से हर पांच सेकंड को "हैलो वर्ल्ड" में बदल देगी।

MainViewModel.cs खोलें और वहां MessageText गुण बनाएँ:

public const string MessageTextPropertyName = "MessageText"; private string _messageText = "ok"; public string MessageText { get { return _messageText; } set { if (_messageText == value) return; _messageText = value; RaisePropertyChanged(MessageTextPropertyName); } }

संपत्ति को हर पांच सेकंड में बदलने के लिए, कोड को MainViewModel वर्ग के निर्माता में जोड़ें:

 //  var dispatcherTimer = new System.Windows.Threading.DispatcherTimer(); //      dispatcherTimer.Tick += ((a,b) => { MessageText = MessageText == "ok" ? "hello world" : "ok"; }); //    dispatcherTimer.Interval = new TimeSpan(0, 0, 5); //  dispatcherTimer.Start();

पेज के डिज़ाइन पर चलते हैं। ऐसा करने के लिए, एक्सप्रेशन ब्लेंड में प्रोजेक्ट खोलें।

MainPage में एक बटन और एक टेक्स्ट ब्लॉक जोड़ें। जब मैसेज टेक्स्ट प्रॉपर्टी “ओके” होगी, तो बटन दिखाई देगा; अन्य सभी मामलों में, हम मैसेज टेक्स्ट के कंटेंट के साथ एक टेक्स्ट फील्ड प्रदर्शित करते हैं।

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

हमारी MessageText संपत्ति को TextBlock तत्व के पाठ मान में संपत्ति के दाईं ओर वर्ग पर क्लिक करके और डेटाबाइंडिंग आइटम का चयन करके बांधें । खुलने वाली विंडो में, वांछित संपत्ति का चयन करें और "ओके" पर क्लिक करें।

राज्यों को बनाने के लिए आगे बढ़ते हैं। पैनल में स्टेट्स टैब पर क्लिक करें, जो स्क्रीन के ऊपरी बाएं कोने में स्थित है। इसमें Add State group बटन पर क्लिक करें। आधार स्थिति का चयन करें - यह वह है जिसमें से हर कोई निर्माण करेगा।

पाठ फ़ील्ड की दृश्यता गुण को Collapsed में परिवर्तित करें ताकि वह गायब हो जाए।

VisualStateGroup राज्य समूह के दाईं ओर स्थित जोड़ें राज्य बटन को सामान्य नामक राज्य बनाने के लिए, और फिर संदेश का नाम दें।

हम सामान्य स्थिति को छोड़ देते हैं, क्योंकि यह बेस के समान होना चाहिए। और उस पर क्लिक करके Message State लिख दें। स्क्रीनशॉट के रूप में रिकॉर्डिंग के बारे में एक संदेश दिखाई देना चाहिए। उसके बाद, बटन की Visiblity गुण को Collapsed , और पाठ ब्लॉक को Visiblity में बदलें । रिकॉर्डिंग समाप्त करने के लिए, लाल बटन में से एक पर क्लिक करें।

राज्य बनाए जाते हैं, यह उनके बीच एक स्विच जोड़ने के लिए रहता है। ऐसा करने के लिए, व्यवहार श्रेणी में Assets टैब से DataStateBehavior पेज जोड़ें।

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

आप VisualStateGroup में डिफ़ॉल्ट संक्रमण गुण के माध्यम से राज्यों या सरल संक्रमणों के बीच एनिमेशन भी जोड़ सकते हैं।

मैं आपका ध्यान GoToStateAction की ओर आकर्षित करना चाहता हूं , जो किसी भी कार्रवाई के साथ किसी भी स्थिति में जा सकता है, उदाहरण के लिए, जब आप एक बटन पर क्लिक करते हैं।

यह सब है, टिप्पणी करें, मुझे आपके सवालों का जवाब देने में खुशी होगी।

स्रोत कोड: डाउनलोड / देखें

विंडोज फोन के विकास के लिए यूआई राज्य प्रबंधन

यह किस लिए है?

कैसे लागू करें?

कैसे करें इस्तेमाल?

More articles: