कैनवास ऐप्स में प्रतिक्रियाशील लेआउट बनाएँ
इससे पहले कि आप Power Apps में कैनवास अनुप्रयोग बनाएं, आप निर्दिष्ट करते हैं कि फोन या टैबलेट के लिए अनुप्रयोग को अनुकूल बनाएं या नहीं. यह विकल्प कैनवास के साइज़ और रूप को निर्धारित करता है जिस पर आप अपना अनुप्रयोग बनाएंगे.
उस विकल्प को बनाने के बाद, यदि आप सेटिंग > डिस्प्ले का चयन करते हैं, तो आप कुछ और विकल्प बना सकते हैं. आप पोर्ट्रेट या लैंडस्केप अभिविन्यास और स्क्रीन साइज़ (केवल टैबलेट) चुन सकते हैं. आप अभिमुखता अनुपात (aspect ratio) और समर्थन डिवाइस रोटेशन (या नहीं) को लॉक या अनलॉक भी कर सकते हैं.
वे विकल्प आपके हर दूसरे विकल्प की स्थापना करते हैं जैसा आप स्क्रीन लेआउट डिजाइन करते हैं. यदि आपका अनुप्रयोग एक अलग साइज़ या वेब पर उपकरण पर चलता है, तो आपका पूरा लेआउट उस स्क्रीन पर फिट होता है, जहां अनुप्रयोग चल रहा है. यदि किसी फ़ोन के लिए डिज़ाइन किया गया अनुप्रयोग एक बड़ी ब्राउज़र विंडो में चलता है, उदाहरण के लिए, अनुप्रयोग क्षतिपूर्ति करता है और इसके स्थान के लिए बड़े साइज़ का दिखता है. अनुप्रयोग अधिक नियंत्रण या अधिक सामग्री दिखाकर अतिरिक्त पिक्सेल का लाभ नहीं उठा सकता है.
यदि आप एक रेस्पॉन्सिव लेआउट बनाते हैं, तो नियंत्रण विभिन्न उपकरणों या विंडो के आकार का बन सकता है, जिससे विभिन्न अनुभव अधिक स्वाभाविक लगते हैं. रेस्पॉन्सिव लेआउट प्राप्त करने के लिए, आप कुछ सेटिंग्स को समायोजित करते हैं और अपने पूरे अनुप्रयोग में अभिव्यक्ति बनाते हैं.
फिट करने के लिए स्केल को अक्षम करें
आप प्रत्येक स्क्रीन को कॉन्फ़िगर कर सकते हैं ताकि उसका लेआउट उस वास्तविक स्थान पर लागू हो जाए जिसमें अनुप्रयोग चल रहा है.
आप अनुप्रयोग के फिट करने के लिए स्केल करें को बंद करके रेस्पॉन्सिव को सक्रिय करते हैं, जो डिफ़ॉल्ट रूप से चालू है. जब आप इस सेटिंग को बंद करते हैं, तो आप अभिमुखता अनुपात लॉक करें भी बंद कर देते हैं क्योंकि अब आप विशिष्ट स्क्रीन साइज़ के लिए डिज़ाइन नहीं कर रहे हैं. (आप अभी भी निर्दिष्ट कर सकते हैं कि आपका अनुप्रयोग डिवाइस रोटेशन का समर्थन करता है या नहीं.)
अपने अनुप्रयोग को रेस्पॉन्सिव बनाने के लिए, आपको अतिरिक्त कदम उठाने होंगे, लेकिन यह बदलाव रेस्पॉन्सिव को संभव बनाने की दिशा में पहला कदम है.
ऐप और स्क्रीन आयामों को समझें
अपने अनुप्रयोग के लेआउट को स्क्रीन आयामों में परिवर्तन की प्रतिक्रिया देने के लिए, आप ऐसे फ़ॉर्मूले लिखेंगे जो स्क्रीन की चौड़ाई और ऊंचाई गुणों का उपयोग करते हों. इन गुणों को दिखाने के लिए, Power Apps Studio में अनुप्रयोग खोलें और फिर स्क्रीन चुनें. इन गुणों के लिए डिफ़ॉल्ट फ़ार्मूले दाएं हाथ के फलक के उन्नत टैब पर दिखाई देते हैं.
चौड़ाई = Max(App.Width, App.DesignWidth)
ऊँचाई = Max(App.Height, App.DesignHeight)
ये फ़ॉर्मूले अनुप्रयोग के चौड़ाई, ऊंचाई, DesignWidth और DesignHeight गुणों को संदर्भित करते हैं. अनुप्रयोग की चौड़ाई और ऊंचाई गुण उपकरण या ब्राउज़र विंडो के आयामों से मेल खाते हैं जिसमें आपका अनुप्रयोग चल रहे हैं. यदि उपयोगकर्ता ब्राउज़र विंडो का आकार बदलता है (या उपकरण को घुमाता है यदि आपने अभिविन्यास लॉक करें बंद कर दिया है), तो इन गुणों के मान गतिशील रूप से बदलते हैं. जब ये मान बदलते हैं, तो स्क्रीन की चौड़ाई और ऊंचाई गुणों का पुनर्मूल्यांकन किया जाता है.
DesignWidth और DesignHeight गुण उन आयामों से आते हैं जिन्हें आप सेटिंग्स के डिस्प्ले फ़लक में निर्दिष्ट करते हैं. उदाहरण के लिए, यदि आप पोर्ट्रेट अभिविन्यास में फोन लेआउट का चयन करते हैं, तो DesignWidth 640 है और DesignHeight 1136 है.
"चूंकि वो स्क्रीन की चौड़ाई और ऊंचाई गुणों के लिए फ़ॉर्मूले का उपयोग कर रहे हैं, आप DesignWidth और DesignHeight के न्यूनतम आयामों के बारे में सोच सकते हैं जिसके लिए आप अनुप्रयोग डिज़ाइन करेंगे. यदि आपके अनुप्रयोग के लिए उपलब्ध वास्तविक क्षेत्र इन न्यूनतम आयामों से भी छोटा है, तो स्क्रीन की चौड़ाई और ऊंचाई गुणों के फ़ॉर्मूले यह सुनिश्चित करते हैं कि उनका मान न्यूनतम से कम नहीं होगा. उस स्थिति में, उपयोगकर्ता को स्क्रीन की सभी सामग्री देखने के लिए स्क्रॉल करना होगा.
आप अपने अनुप्रयोग का DesignWidth और DesignHeight स्थापित करने के बाद, आपको (ज्यादातर मामलों में) प्रत्येक स्क्रीन के चौड़ाई और ऊंचाई गुणों के लिए डिफ़ॉल्ट फ़ॉर्मूला बदलने की आवश्यकता नहीं होगी. बाद में, यह विषय उन मामलों पर चर्चा करता है जिनमें आप इन फ़ॉर्मूलों को अनुकूलित करना चाहते हैं.
डायनेमिक लेआउट के लिए सूत्रों का उपयोग करें
रेस्पॉन्सिव डिज़ाइन बनाने के लिए, आप निरपेक्ष (स्थिर) समन्वित मानों के बजाय फ़ॉर्मूलों का उपयोग करके प्रत्येक नियंत्रण का पता लगाते हैं और साइज़ देते हैं. ये फ़ॉर्मूले समग्र स्क्रीन साइज़ या स्क्रीन पर अन्य नियंत्रणों के सापेक्ष प्रत्येक नियंत्रण की स्थिति और साइज़ को व्यक्त करते हैं.
महत्वपूर्ण
नियंत्रण के X, Y, चौड़ाई और ऊंचाई गुण के लिए फ़ॉर्मूले लिखने के बाद, यदि आप बाद में कैनवास एडिटर में नियंत्रण खींचते हैं, तो आपके फ़ॉर्मूले नियतांक मानों के साथ लिखे जाएंगे. जब आप गतिशील लेआउट को प्राप्त करने के लिए फ़ॉर्मूले का उपयोग करना शुरू करते हैं, तो आपको नियंत्रणों को खींचने से बचना चाहिए.
सबसे आसान मामले में, नियंत्रण पूरी स्क्रीन भरता है. इस प्रभाव को बनाने के लिए, नियंत्रण के गुणों को इन मानों पर सेट करें:
| गुण | मान |
|---|---|
| X | 0 |
| Y | 0 |
| चौड़ाई | Parent.Width |
| ऊँचाई | Parent.Height |
ये फ़ॉर्मूले पैरेंट ऑपरेटर का उपयोग करते हैं. स्क्रीन पर सीधे रखे गए नियंत्रण के लिए, पैरेंट स्क्रीन को संदर्भित करता है. इन गुण मानों के साथ, नियंत्रण स्क्रीन के ऊपरी-बाएं कोने में (0, 0) दिखाई देता है और इसमें स्क्रीन के समान चौड़ाई और ऊंचाई है.
इस विषय में बाद में, आप इन सिद्धांतों (और पैरेंट ऑपरेटर) को अन्य कंटेनरों, जैसे कि गैलरियों, समूह नियंत्रण और घटकों के अंदर स्थिति नियंत्रण के लिए लागू करेंगे.
विकल्प के रूप में, नियंत्रण केवल स्क्रीन के शीर्ष आधे भाग को भर सकता है. इस प्रभाव को बनाने के लिए, ऊँचाई संपत्ति को Parent.Height / 2, में सेट करें और अन्य फ़ॉर्मूलों को अपरिवर्तित छोड़ दें.
यदि आप एक ही स्क्रीन के निचले आधे हिस्से को भरने के लिए दूसरा नियंत्रण चाहते हैं, तो आप इसके फ़ॉर्मूलों का निर्माण करने के लिए कम से कम दो अन्य पद्धति अपना सकते हैं. आसानी के लिए, आप यह तरीका अपना सकते हैं:
| नियंत्रण | गुण | सूत्र |
|---|---|---|
| ऊपरी | X | 0 |
| ऊपरी | Y | 0 |
| ऊपरी | चौड़ाई | Parent.Width |
| ऊपरी | ऊँचाई | Parent.Height / 2 |
| लोअर | X | 0 |
| लोअर | Y | Parent.Height / 2 |
| लोअर | चौड़ाई | Parent.Width |
| लोअर | ऊंचाई | Parent.Height / 2 |
इस कॉन्फ़िगरेशन को वह प्रभाव प्राप्त होगा जो आप चाहते हैं, लेकिन आपको प्रत्येक फ़ॉर्मूले को संपादित करने की आवश्यकता होगी यदि आपने नियंत्रण के सापेक्ष साइज़ के बारे में अपना मन बदल दिया है. उदाहरण के लिए, आप यह तय कर सकते हैं कि शीर्ष नियंत्रण को स्क्रीन के केवल एक-तिहाई हिस्से पर कब्जा करना चाहिए, जिसमें निचला नियंत्रण निचले दो तिहाई को भर सकता है.
उस प्रभाव को बनाने के लिए, आपको ऊपरी नियंत्रण की ऊंचाई गुण और निचले नियंत्रण के Y और ऊंचाई गुणों को अद्यतन करना होगा. इसके बजाय, ऊपरी नियंत्रण (और स्वयं) के संदर्भ में निचले नियंत्रण के लिए फ़ॉर्मूले लिखने पर विचार करें, जैसा कि इस उदाहरण में है:
| नियंत्रण | गुण | सूत्र |
|---|---|---|
| ऊपरी | X | 0 |
| ऊपरी | Y | 0 |
| ऊपरी | चौड़ाई | Parent.Width |
| ऊपरी | ऊँचाई | Parent.Height / 3 |
| निचली | X | 0 |
| निचली | Y | Upper.Y + Upper.Height |
| निचली | चौड़ाई | Parent.Width |
| लोअर | ऊंचाई | Parent.Height - Lower.Y |
इन फ़ार्मूलों के साथ, आपको स्क्रीन की ऊंचाई का एक अलग अंश व्यक्त करने के लिए ऊपरी नियंत्रण के ऊंचाई गुण को बदलने की आवश्यकता है. निचला नियंत्रण स्वचालित रूप से चलता है और परिवर्तन के हिसाब से खाते का आकार बदलता है.
आप नियंत्रण के बीच आम लेआउट संबंधों को व्यक्त करने के लिए इन फ़ॉर्मूला पैटर्न का उपयोग कर सकते हैं, जिसका नाम C, और उसके पैरेंट या सिबलिंग नियंत्रण है, जिसका नाम D रखा गया है.
| C और उसके माता-पिता के बीच संबंध | गुण | सूत्र | रेखांकन |
|---|---|---|---|
| C, पैरेंट की चौड़ाई को N मार्जिन से भरता है | X | N |
 |
| चौड़ाई | Parent.Width - (N * 2) |
||
| C पैरेंट की ऊंचाई को N मार्जिन से भरता है | Y | N |
 |
| ऊंचाई | Parent.Height - (N * 2) |
||
| C पैरेंट के दाहिने किनारे के साथ, N मार्जिन के साथ संरेखित | X | Parent.Width - (C.Width + N) |
 |
| C पैरेंट के निचले किनारे के साथ, N मार्जिन के साथ संरेखित | Y | Parent.Height - (C.Height + N) |
 |
| C पैरेंट पर क्षैतिज रूप से केंद्रित है | X | (Parent.Width - C.Width) / 2 |
 |
| C पैरेंट पर लंबवत केंद्रित है | Y | (Parent.Height - C.Height) / 2 |
 |
| C और D के बीच संबंध | गुण | सूत्र | रेखांकन |
|---|---|---|---|
| C क्षैतिज रूप से D और D के समान चौड़ाई के साथ संरेखित है | X | D.X |
 |
| चौड़ाई | D.Width |
||
| C लंबवत रूप से D और D के समान ऊंचाई के साथ संरेखित है | Y | D.Y |
 |
| ऊंचाई | D.Height |
||
| C के दाएं किनारे को D के दाएं किनारे से संरेखित किया गया | X | D.X + D.Width - C.Width |
 |
| C के निचले किनारे को D के निचले किनारे के साथ संरेखित किया गया | Y | D.Y + D.Height - C.Height |
 |
| C क्षैतिज रूप से D के सापेक्ष केंद्रित है | X | D.X + (D.Width - C.Width) / 2 |
 |
| C लंबवत रूप से D के सापेक्ष केंद्रित है | Y | D.Y + (D.Height - C.Height) /2 |
 |
| C, N के अंतराल के साथ D के दाईं ओर स्थित है | X | D.X + D.Width + N |
 |
| C, N के अंतराल के साथ D के नीचे स्थित है | Y | D.Y + D.Height + N |
 |
| C, D और पैरेंट के दाहिने किनारे के बीच जगह भरता है | X | D.X + D.Width |
 |
| चौड़ाई | Parent.Width - C.X |
||
| C, D और पैरेंट के निचले किनारे के बीच की जगह भरता है | Y | D.Y + D.Height |
 |
| ऊंचाई | Parent.Height - C.Y |
पदानुक्रमित लेआउट
जब आप ऐसी स्क्रीन का निर्माण करते हैं जिसमें अधिक नियंत्रण होते हैं, तो यह स्क्रीन या सिबलिंग नियंत्रण के सापेक्ष के बजाय, पैरेंट के नियंत्रण के सापेक्ष स्थिति को और अधिक सुविधाजनक (या आवश्यक भी) बना देगा. अपने नियंत्रणों को पदानुक्रमित संरचना में व्यवस्थित करके, आप अपने फ़ॉर्मूलों को लिखना और बनाए रखना आसान बना सकते हैं.
गैलरी
यदि आप अपने अनुप्रयोग में गैलरी का उपयोग करते हैं, तो आपको गैलरी के टेम्पलेट के भीतर नियंत्रण रखना होगा. आप इन नियंत्रणों को पैरेंट ऑपरेटर का उपयोग करने वाले फ़ार्मूले बनाकर रख सकते हैं, जो कि गैलरी टेम्पलेट को संदर्भित करेगा. गैलरी टेम्पलेट के भीतर नियंत्रणों के फ़ॉर्मूले में, Parent.TemplateHeight और Parent.TemplateWidth गुणों का उपयोग करें; Parent.Width और Parent.Height का उपयोग न करें, जो गैलरी के समग्र साइज़ को संदर्भित करता है.
कंटेनर नियंत्रण
आप पैरेंट कंट्रोल के तौर पर लेआउट कंटेनर कंट्रोल का इस्तेमाल कर सकते हैं.
स्क्रीन के शीर्ष पर हेडर के उदाहरण पर विचार करें. शीर्षक और कई आइकन के साथ हेडर रखना आम बात है जिससे आपके उपयोगकर्ता बातचीत कर सकते हैं. आप कंटेनर नियंत्रण का उपयोग करके इस तरह के हेडर का निर्माण कर सकते हैं, जिसमें लेबल नियंत्रण और दो आइकन नियंत्रण शामिल हों:
इन मूल्यों के नियंत्रण के लिए गुण सेट करें:
| गुण | हेडर | मेनू | बंद करें | पद |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| Y | 0 |
0 |
0 |
0 |
| चौड़ाई | Parent.Width |
Parent.Height |
Parent.Height |
Close.X - Title.X |
| ऊँचाई | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
हेडर नियंत्रण के लिए, Parent स्क्रीन को संदर्भित करता है. दूसरों के लिए, Parent का अर्थ है हेडर नियंत्रण से है.
इन फ़ॉर्मूलों को बनाने के बाद, आप इसके गुणों के लिए फ़ॉर्मूला बदलकर हेडर नियंत्रण के साइज़ या स्थिति को समायोजित कर सकते हैं. चाइल्ड कंट्रोल के साइज़ और स्थिति स्वचालित रूप से तदनुसार समायोजित हो जाएंगे.
ऑटो-लेआउट कन्टेनर नियंत्रण
आप चाइल्ड घटकों को स्वचालित रूप से लेआउट करने के लिए एक सुविधा, ऑटो-लेआउट कंटेनर नियंत्रण का उपयोग कर सकते हैं। इन कन्टेनर्स द्वारा चाइल्ड कम्पोनेन्ट्स की स्थिति निर्धारित की जाती है ताकि आपको कन्टेनर के अंदर किसी कम्पोनेन्ट के लिए X, Y सेट न करना पड़े. साथ ही, यह सेटिंग्स के आधार पर अपने चाइल्ड कम्पोनेन्ट्स को उपलब्ध स्थान वितरित कर सकता है, साथ ही चाइल्ड कम्पोनेन्ट्स के वर्टिकल और हॉरिज़ोन्टल अलाइनमेन्ट, दोनों को निर्धारित करता है. और अधिक जानकारी : ऑटो-लेआउट कन्टेनर नियंत्रण
घटक
यदि आप कंपोनेंट्स नामक किसी अन्य सुविधा का उपयोग करते हैं, तो आप बिल्डिंग ब्लॉक्स का निर्माण कर सकते हैं और उन्हें अपने ऐप में पुन: उपयोग कर सकते हैं। जैसा कि कंटेनर नियंत्रण के साथ, घटक के भीतर होने वाले नियंत्रण को Parent.Width और Parent.Height पर उनकी स्थिति और साइज़ के फ़ॉर्मूलों को आधार बनाना चाहिए, जो घटक के साइज़ को संदर्भित करता है. अधिक जानकारी: एक घटक बनाएँ.
उपकरण के साइज़ और अभिविन्यास के लिए लेआउट को अपनाना
अब तक, आपने सीखा है कि उपलब्ध स्थान के सापेक्ष प्रत्येक नियंत्रण के साइज़ को बदलने के लिए फ़ॉर्मूलों का उपयोग कैसे करें, जबकि नियंत्रण एक दूसरे के सापेक्ष संरेखित रखते हैं. लेकिन आप अलग-अलग उपकरण के आकार और अभिविन्यास के सापेक्ष अधिक पर्याप्त लेआउट परिवर्तन करना चाह सकते हैं या करने की आवश्यकता हो सकती है. जब उपकरण को पोर्टेट से लैंडस्केप अभिविन्यास में घुमाया जाता है, उदाहरण के लिए, आप लंबवत लेआउट से क्षैतिज पर स्विच करना चाह सकते हैं. बड़े उपकरण पर, आप अधिक आकर्षक सामग्री प्रस्तुत कर सकते हैं या अधिक आकर्षक लेआउट प्रदान करने के लिए इसे पुनर्व्यवस्थित कर सकते हैं. छोटे उपकरण पर, आपको कई स्क्रीन पर सामग्री को विभाजित करने की आवश्यकता हो सकती है.
डिवाइस ओरिएंटेशन
किसी स्क्रीन की चौड़ाई और ऊंचाई गुणों के लिए डिफ़ॉल्ट फ़ॉर्मूले, जैसा कि इस विषय में पहले वर्णित है, जरूरी नहीं कि उपयोगकर्ता को उपकरण रोटेट करने पर अच्छा अनुभव हो. उदाहरण के लिए, पोर्ट्रेट अभिविन्यास में फ़ोन के लिए डिज़ाइन किए गए अनुप्रयोग में 640 का DesignWidth और 1136 का DesignHeight है. लैंडस्केप अभिविन्यास में फ़ोन पर एक ही अनुप्रयोग के पास ये गुण मान होंगे:
- स्क्रीन का चौड़ाई गुण
Max(App.Width, App.DesignWidth)पर सेट है. अनुप्रयोग की चौड़ाई (1136) इसके DesignWidth (640) से बड़ी है, इसलिए फ़ॉर्मूला 1136 का मूल्यांकन करता है. - स्क्रीन का ऊंचाई गुण
Max(App.Height, App.DesignHeight)पर सेट है. अनुप्रयोग की ऊंचाई (640) इसके DesignHeight (1136) से छोटी है, इसलिए फ़ॉर्मूला 1136 का मूल्यांकन करता है.
1136 की स्क्रीन ऊंचाई और 640 की उपकरण ऊंचाई (इस अभिविन्यास में), उपयोगकर्ता को अपनी सभी सामग्री दिखाने के लिए स्क्रीन को लंबवत रूप से स्क्रॉल करना होगा, इससे वह अनुभव नहीं हो सकता जो आप चाहते हैं.
उपकरण के अभिविन्यास के लिए स्क्रीन के चौड़ाई और ऊंचाई गुणों को अनुकूलित करने के लिए, आप इन फ़ार्मूलों का उपयोग कर सकते हैं:
चौड़ाई = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
ऊँचाई = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
ये फ़ॉर्मूले अनुप्रयोग की DesignWidth और DesignHeight मानों की अदला-बदली करते हैं, इस आधार पर कि उपकरण की चौड़ाई उसकी ऊंचाई (चित्र अभिविन्यास) से कम है या उसकी ऊंचाई (परिदृश्य अभिविन्यास) से अधिक है.
स्क्रीन के चौड़ाई और ऊंचाई फ़ार्मूलों को समायोजित करने के बाद, आप उपलब्ध स्थान का बेहतर उपयोग करने के लिए अपनी स्क्रीन के भीतर नियंत्रणों को फिर से व्यवस्थित करना चाहते हैं. उदाहरण के लिए, यदि प्रत्येक दो नियंत्रण स्क्रीन के आधे हिस्से पर हैं, तो आप उन्हें चित्र में लंबवत रूप से स्टैक कर सकते हैं, लेकिन परिदृश्य में उनको साथ-साथ व्यवस्थित कर सकते हैं.
आप स्क्रीन को लंबवत या क्षैतिज रूप से अभिविन्यस्त करने के लिए स्क्रीन के अभिविन्यास गुण का उपयोग कर सकते हैं.
नोट
लैंडस्केप अभिविन्यास में, ऊपरी और निचला नियंत्रण, लेफ्ट और राइट नियंत्रण के रूप में दिखाई देते हैं.
| नियंत्रण | गुण | सूत्र |
|---|---|---|
| ऊपरी | X | 0 |
| ऊपरी | Y | 0 |
| ऊपरी | चौड़ाई | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| ऊपरी | ऊँचाई | If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height) |
| निचली | X | If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width) |
| निचली | Y | If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0) |
| निचली | चौड़ाई | Parent.Width - Lower.X |
| लोअर | ऊंचाई | Parent.Height - Lower.Y |
स्क्रीन साइज़ और ब्रेकपॉइंट्स
आप उपकरण के साइज़ के आधार पर अपने लेआउट को समायोजित कर सकते हैं. स्क्रीन का साइज़ गुण वर्तमान डिवाइस आकार को वर्गीकृत करता है. साइज़ सकारात्मक पूर्णांक है; ScreenSize प्रकार पठनीयता के साथ मदद करने के लिए नामित नियतांक प्रदान करता है. तालिका नियतांक को सूचीबद्ध करती है:
| निरंतर | मान | विशिष्ट उपकरण प्रकार (डिफ़ॉल्ट अनुप्रयोग सेटिंग्स का उपयोग करके) |
|---|---|---|
| ScreenSize.Small | 1 | फ़ोन |
| ScreenSize.Medium | 2 | टैबलेट, लंबवत रूप से रखा गया |
| ScreenSize.Large | 3 | टैबलट, क्षैतिज रूप से रखा गया |
| ScreenSize.ExtraLarge | 4 | डेस्कटॉप कंप्यूटर |
अपने अनुप्रयोग के लेआउट के बारे में निर्णय लेने के लिए इन साइज़ का उपयोग करें. उदाहरण के लिए, यदि आप चाहते हैं कि कोई नियंत्रण फ़ोन के आकार के उपकरण पर छिपा हो, लेकिन अन्यथा दिखाई दे, तो आप इस फ़ॉर्मूले पर नियंत्रण का दृश्यमान गुण सेट कर सकते हैं:
Parent.Size >= ScreenSize.Medium
यह फ़ॉर्मूला सच का मूल्यांकन करता है जब साइज़ मध्यम या बड़ा होता है और अन्यथा गलत का.
यदि आप स्क्रीन के आकार के आधार पर स्क्रीन चौड़ाई के भिन्न अंश पर कब्जा करना चाहते हैं, तो इस फ़ॉर्मूले पर नियंत्रण का चौड़ाई गुण सेट करें:
Parent.Width *
Switch(
Parent.Size,
ScreenSize.Small, 0.5,
ScreenSize.Medium, 0.3,
0.25
)
यह फ़ॉर्मूला नियंत्रण की चौड़ाई को स्क्रीन की आधी स्क्रीन की चौड़ाई, मध्यम स्क्रीन पर स्क्रीन चौड़ाई के तीन-दसवें हिस्से और अन्य सभी स्क्रीन पर स्क्रीन की चौड़ाई का एक चौथाई सेट करता है.
कस्टम ब्रेकप्वाइंट
स्क्रीन की साइज़ गुण की गणना स्क्रीन की चौड़ाई गुण की तुलना अनुप्रयोग के SizeBreakpoints गुण के मानों से की जाती है. यह गुण संख्याओं का एकल-स्तंभ तालिका है जो चौड़ाई ब्रेकपॉइंट्स को इंगित करता है जो नामित स्क्रीन आकारों को अलग करता है:
टैबलेट या वेब के लिए बनाए गए अनुप्रयोग में, अनुप्रयोग के SizeBreakpoints गुण में डिफ़ॉल्ट मान [600, 900, 1200] हैं. फ़ोन के लिए बनाए गए अनुप्रयोग में, मान [1200, 1800, 2400] हैं. (फोन अनुप्रयोग के लिए मान दोगुना हो जाता है क्योंकि ऐसे अनुप्रयोग उन निर्देशांक का उपयोग करते हैं जो अन्य अनुप्रयोगों में उपयोग किए जाने वाले निर्देशांक को प्रभावी रूप से दोगुना करते हैं.)
आप अनुप्रयोग के SizeBreakpoints गुण में मानों को बदलकर अपने अनुप्रयोग के ब्रेकपॉइंट्स को अनुकूलित कर सकते हैं. ट्री दृश्य में अनुप्रयोग का चयन करें, गुण सूची में SizeBreakpoints का चयन करें और फिर फ़ॉर्मूला पट्टी में मानों को संपादित करें. आप उतने ब्रेकपॉइंट्स बना सकते हैं, जितने की आपके अनुप्रयोग को ज़रूरत है, लेकिन केवल 4 के माध्यम से 1 साइज़ नामित स्क्रीन साइज़ के अनुरूप होता है. फ़ॉर्मूलों में, आप उनके सांख्यिक मानों (5, 6, और उसके बाद) के अतिरिक्त ExtraLarge से परे के साइज़ का उल्लेख कर सकते हैं.
आप कम ब्रेकपॉइंट्स भी निर्दिष्ट कर सकते हैं. उदाहरण के लिए, आपके अनुप्रयोग को केवल तीन आकारों (दो ब्रेकपॉइंट्स) की आवश्यकता हो सकती है, इसलिए संभावित स्क्रीन छोटा, मध्यम और बड़ा होगा.
ज्ञात सीमाएँ
संलेखन कैनवास निर्मित साइज़ के फ़ॉर्मूलों पर प्रतिक्रिया नहीं देता है. रेस्पॉन्सिव व्यवहार का परीक्षण करने के लिए, अपने अनुप्रयोग को सहेजें और प्रकाशित करें और फिर इसे उपकरणों पर या विभिन्न साइज़ और अभिविन्यासों के ब्राउज़र विंडो में खोलें.
यदि आप किसी नियंत्रण के X, Y, चौड़ाई, और ऊंचाई गुणों में अभिव्यक्तियां या फ़ॉर्मूले लिखते हैं, तो आप उन अभिव्यक्तियों या फ़ार्मूलों को ओवरराइट कर देंगे, यदि आप बाद में नियंत्रण को किसी भिन्न स्थान पर खींचते हैं या इसकी सीमा खींचकर नियंत्रण का साइज़ बदलते हैं.
नोट
क्या आप हमें अपनी दस्तावेज़ीकरण भाषा वरीयताओं के बारे में बता सकते हैं? एक छोटा सर्वेक्षण पूरा करें. (कृपया ध्यान दें कि यह सर्वेक्षण अंग्रेज़ी में है)
सर्वेक्षण में लगभग सात मिनट लगेंगे. कोई भी व्यक्तिगत डेटा एकत्र नहीं किया जाता है (गोपनीयता कथन).
प्रतिक्रिया
जल्द आ रहा है: 2024 के दौरान हम सामग्री के लिए फीडबैक तंत्र के रूप में GitHub मुद्दों को चरणबद्ध तरीके से समाप्त कर देंगे और इसे एक नई फीडबैक प्रणाली से बदल देंगे. अधिक जानकारी के लिए, देखें: https://aka.ms/ContentUserFeedback.
के लिए प्रतिक्रिया सबमिट करें और देखें