विंडोज फोन ट्यूटोरियल श्रृंखला के हिस्से के रूप में यह 11 वां ट्यूटोरियल है। इस कार्य में, जब भी बटन दबाया जाता है तो आप बैनर में टेक्स्ट को एनिमेट करने के लिए अभिव्यक्ति मिश्रण में एक स्टोरीबोर्ड तैयार करेंगे।
1. एनीमेशन वर्कस्पेस में सक्रिय वर्कस्पेस खोलें। में खिड़की मेनू, इंगित करें कार्यस्थानों और चयन करें एनीमेशन । ध्यान दें कि टाइमलाइन को संपादित करने के लिए उपलब्ध स्थान को अधिकतम करने के लिए यह विंडोज़ को पुनर्व्यवस्थित करता है।
2. यदि आवश्यक हो, तो बटन नियंत्रण टेम्पलेट के संपादन क्षेत्र से बाहर निकलें। ऐसा करने के लिए, क्लिक करें दायरा के बगल में बटन फैंसीबटन (बटन टेम्पलेट) में तत्व ऑब्जेक्ट्स और टाइमलाइन पृष्ठ के तत्व पेड़ को प्रदर्शित करने के लिए पैनल।
3. अब, में ऑब्जेक्ट्स और टाइमलाइन पैनल, क्लिक करें नया एक स्टोरीबोर्ड बनाने के लिए। यह एक + चिह्न वाला लेबल वाला बटन है और पैनल के ऊपरी दाएं कोने में स्थित है।
4. में स्टोरीबोर्ड संसाधन बनाएं संवाद, सेट करें नाम सेवा मेरे AnimateBanner और क्लिक करें ठीक.
5. एनीमेशन में मुख्य फ्रेम बनाने के लिए, क्लिक करें BannerTextBlock तत्व के पेड़ में तत्व ऑब्जेक्ट्स और टाइमलाइन इसे चुनने के लिए पैनल।
6. अब, ऑफ़लाइन पर टाइमलाइन प्लेहेड की वर्तमान स्थिति पर क्लिक करें और खींचें 1 दूसरा।
7. अगला, पर स्विच करें गुण पैनल, का विस्तार करें परिवर्तन श्रेणी, और का चयन करें स्केल बदलना। एक्स संपत्ति मूल्य है -1। यह परिवर्तन क्षैतिज धुरी के साथ तत्व दर्पण करता है।
9। अब, टाइमलाइन प्लेहेड को ऑफसेट में बदलें 2 सेकंड।
10. स्विच करें गुण पैनल, का विस्तार करें परिवर्तन श्रेणी, और का चयन करें स्केल बदलना। के मान को बदलें एक्स वापस संपत्ति 1 तत्व को अपने मूल स्थिति में बहाल करने के लिए। ध्यान दें कि इस बदलाव के कारण स्टोरीबोर्ड टाइमलाइन में एक दूसरा कुंजी फ्रेम दिखाई दिया।
11. डिजाइनर में एनीमेशन का परीक्षण करने के लिए, आपको बैनर में कुछ टेक्स्ट जोड़ना होगा। सबसे पहले, बाईं ओर लाल वृत्त पर क्लिक करें AnimateBanner अस्थायी रूप से रिकॉर्डिंग बंद करने के लिए पैनल के ऊपरी बाएं कोने में स्टोरीबोर्ड नाम-आप नहीं चाहते कि अतिरिक्त टेक्स्ट एनीमेशन का हिस्सा बन जाए।
12. अब, राइट-क्लिक करें BannerTextBlock डिजाइनर सतह पर तत्व और चयन करें लिखाई में बदलाव । बैनर और प्रेस के लिए एक उपयुक्त पाठ दर्ज करें दर्ज.
13. एनीमेशन का परीक्षण करने के लिए, दबाएं प्ले टाइमलाइन के ऊपर बटन। ध्यान दें कि बैनर में पाठ क्षैतिज रूप से अपने मध्य अक्ष के बारे में कैसे घूमता है और आंदोलन पूरे एनीमेशन चक्र में कैसे समान होता है।
14. टाइमलाइन में ग्रे सर्कल आइकन के अंदर क्लिक करके पहला कुंजी फ्रेम चुनें। ध्यान दें कि जब आप एक फ्रेम का चयन करते हैं, तो डिजाइनर यूआई तत्वों की स्थिति को दिखाने के लिए अपडेट को देखते हैं, जैसा कि वे उस फ्रेम में दिखाई देते हैं, इस मामले में, बैनर टेक्स्ट प्रतिबिंबित होता है। अब, में गुण पैनल के तहत, के तहत आसान श्रेणी, सुनिश्चित करें कि EasingFunction चुना गया है, उपलब्ध कार्यों की सूची प्रदर्शित करने के लिए ड्रॉप डाउन सूची का विस्तार करें, और फिर चुनें घन आउट समारोह। यह विशेष आसान कार्य संक्रमण को अपनी दर को कम करने का कारण बनता है क्योंकि यह मुख्य फ्रेम तक पहुंचता है।
15. दूसरे कुंजी फ्रेम के लिए आसान कार्य को कॉन्फ़िगर करने के लिए पिछले चरण में प्रक्रिया को दोहराएं। इस बार चुनते हैं घन इनट संक्रमण धीमी दर से शुरू करने के लिए कार्य करता है, धीरे-धीरे गतिशील होता है, और आखिरकार इसकी गति को कम करता है क्योंकि यह अंतिम फ्रेम तक पहुंचता है।
16. एनीमेशन पर आसान कार्यों के प्रभाव का परीक्षण करने के लिए, दबाएं प्ले टाइमलाइन के ऊपर। नोटिस कैसे बैनर एक उच्च दर पर अपने घूर्णन को शुरू करता है, फिर पाठ धीमा दिखाई देता है, फिर धीमा हो जाता है, फिर यह फिर से गति को उठाता है और आखिर में अपनी मूल स्थिति में वापस आने के लिए धीमा हो जाता है।
17.अब यूजर इंटरफेस का डिज़ाइन पूरा हो गया है, अगला चरण अपडेटेड एक्सएएमएल को मुख्य प्रोजेक्ट में कॉपी कर रहा है।
- सबसे पहले, अभिव्यक्ति मिश्रण में, विंडो के दाहिने हाथ किनारे पर या XAML टैब पर क्लिक करें राय मेन्यू
- इंगित सक्रिय दस्तावेज़ देखें और चयन करें एक्सएएमएल व्यू यह आपको XAML दृश्य में ले जाता है MainPage.xaml दस्तावेज़।
- इसके बाद, रूट के बच्चों को चुनें और कॉपी करें UserControl क्लिपबोर्ड के लिए तत्व। इसमें शामिल है UserControl.Resources खंड और ग्रिड तत्व का नामLayoutRoot लेकिन नहीं UserControl तत्व स्वयं
18. अब, विजुअल स्टूडियो में, खोलें MainPage.xaml XAML दृश्य में दस्तावेज़ और रूट की संपूर्ण बाल सामग्री को प्रतिस्थापित करें नेविगेशन: PhoneApplicationPage क्लिपबोर्ड में पाठ के साथ तत्व यह सुनिश्चित करता है कि रूट तत्व स्वयं अपरिवर्तित बनी हुई है।
19. एक अंतिम चरण के रूप में, में MainPage.xaml फ़ाइल, का पता लगाएं UserControl.Resources टैग शुरू करें और अंत करें और उन्हें बदलें नेविगेशन: PhoneApplicationPage.Resources टैग।
20. प्रेस CTRL + एस बचाने के लिए MainPage.xaml फ़ाइल।
21. अब तक, आपने बैनर टेक्स्ट के लिए एनीमेशन स्टोरीबोर्ड बनाया है, लेकिन यह परियोजना में एक अप्रयुक्त संसाधन के रूप में मौजूद है।एनीमेशन खेलने के लिए, आपको किसी भी घटना के जवाब में स्टोरीबोर्ड को ट्रिगर करने की आवश्यकता है, इस मामले में, जब भी हो मुझे क्लिक करें बटन दबाया जाता है। खोलने के लिए क्लिक करें इस बटन के लिए इवेंट हैंडलर:
- जाओ डिज़ाइन के बारे में देखें MainPage.xaml फ़ाइल
- कोड-बैक फ़ाइल खोलने के लिए डिज़ाइनर सतह पर बटन को डबल-क्लिक करें
- ईवेंट हैंडलर पर कर्सर को स्थिति दें
22. एनीमेशन खेलने के लिए इवेंट हैंडलर को अपडेट करने के लिए, अंतिम कोड स्निपेट को अंतिम ब्रेस से पहले "बोल्ड" स्पेस में डालें।
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
