संक्षिप्त जवाब
Start, Center, Endऔर Fillदृश्य के परिभाषित अपने अंतरिक्ष के भीतर संरेखण ।
Expandपरिभाषित करता है कि क्या यह उपलब्ध होने पर अधिक जगह घेरता है।
सिद्धांत
संरचना LayoutOptions दो अलग-अलग व्यवहारों को नियंत्रित करती है:
संरेखण: पैरेंट दृश्य के भीतर दृश्य को कैसे संरेखित किया जाता है?
Start: ऊर्ध्वाधर संरेखण के लिए दृश्य को शीर्ष पर ले जाया जाता है। क्षैतिज संरेखण के लिए यह आमतौर पर बाएं हाथ की ओर होता है। (लेकिन ध्यान दें, कि दाएं-से-बाएं भाषा सेटिंग वाले डिवाइस पर यह दूसरा तरीका है, यानी दाएं संरेखित।)Center: दृश्य केंद्रित है।End: आमतौर पर दृश्य नीचे या दाएं संरेखित होता है। (दाएं-से-बाएं भाषाओं पर, निश्चित रूप से, बाईं ओर संरेखित।)Fill: यह संरेखण थोड़ा अलग है। दृश्य पैरेंट दृश्य के पूर्ण आकार में फैल जाएगा।
यदि माता-पिता, हालांकि, बड़े नहीं हैं, तो उनके बच्चे, आप उन संरेखण के बीच कोई अंतर नहीं देखेंगे। अतिरिक्त स्थान के साथ माता-पिता के विचारों के लिए संरेखण केवल मायने रखता है।
विस्तार: क्या तत्व उपलब्ध होने पर अधिक स्थान घेरेंगे?
- प्रत्यय
Expand: यदि माता-पिता का दृष्टिकोण अपने सभी बच्चों के संयुक्त आकार से बड़ा है, अर्थात अतिरिक्त स्थान उपलब्ध है, तो उस प्रत्यय के साथ बच्चे के विचारों के बीच स्थान का अनुपात होता है। वे बच्चे अपने स्थान पर "कब्जा" करेंगे, लेकिन जरूरी नहीं कि इसे "भरें"। हम नीचे दिए गए उदाहरण में इस व्यवहार पर एक नज़र डालेंगे।
- कोई प्रत्यय नहीं: प्रत्यय रहित बच्चों को
Expandअतिरिक्त स्थान नहीं मिलेगा, भले ही अधिक स्थान उपलब्ध हो।
फिर, यदि माता-पिता का दृष्टिकोण अपने बच्चों से बड़ा नहीं है, तो विस्तार प्रत्यय से भी कोई फर्क नहीं पड़ता है।
उदाहरण
आइए सभी आठ लेआउट विकल्पों के बीच अंतर को देखने के लिए निम्न उदाहरण पर एक नज़र डालें।
ऐप में StackLayoutआठ नेस्टेड सफेद बटन के साथ एक गहरा ग्रे है , जिनमें से प्रत्येक को इसके ऊर्ध्वाधर लेआउट विकल्प के साथ लेबल किया गया है। बटन में से किसी एक पर क्लिक करने पर, यह स्टैक लेआउट के लिए अपने वर्टिकल लेआउट विकल्प को असाइन करता है। इस तरह हम माता-पिता के साथ, विभिन्न लेआउट विकल्प के साथ विचारों की बातचीत को आसानी से परख सकते हैं।
(कोड की अंतिम कुछ पंक्तियाँ अतिरिक्त पीले बॉक्स जोड़ती हैं। हम एक पल में वापस आ जाएंगे।)
public static class App
{
static readonly StackLayout stackLayout = new StackLayout {
BackgroundColor = Color.Gray,
VerticalOptions = LayoutOptions.Start,
Spacing = 2,
Padding = 2,
};
public static Page GetMainPage()
{
AddButton("Start", LayoutOptions.Start);
AddButton("Center", LayoutOptions.Center);
AddButton("End", LayoutOptions.End);
AddButton("Fill", LayoutOptions.Fill);
AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
AddButton("FillAndExpand", LayoutOptions.FillAndExpand);
return new NavigationPage(new ContentPage {
Content = stackLayout,
});
}
static void AddButton(string text, LayoutOptions verticalOptions)
{
stackLayout.Children.Add(new Button {
Text = text,
BackgroundColor = Color.White,
VerticalOptions = verticalOptions,
HeightRequest = 20,
Command = new Command(() => {
stackLayout.VerticalOptions = verticalOptions;
(stackLayout.ParentView as Page).Title = "StackLayout: " + text;
}),
});
stackLayout.Children.Add(new BoxView {
HeightRequest = 1,
Color = Color.Yellow,
});
}
}
निम्न स्क्रीनशॉट आठ में से प्रत्येक बटन पर क्लिक करने पर परिणाम दिखाते हैं। हम निम्नलिखित अवलोकन करते हैं:
- जब तक माता-पिता
stackLayoutतंग होते हैं ( Fillपृष्ठ नहीं होता है ), प्रत्येक का ऊर्ध्वाधर लेआउट विकल्पButton का नगण्य है।
- ऊर्ध्वाधर लेआउट विकल्प केवल तभी मायने रखता है जब
stackLayoutबड़ा हो (जैसे Fillसंरेखण के माध्यम से ) और व्यक्तिगत बटन में Expandप्रत्यय होता है।
Expandप्रत्यय के साथ सभी बटनों के बीच अतिरिक्त स्थान है । इसे और स्पष्ट रूप से देखने के लिए हमने हर दो पड़ोसी बटनों के बीच पीले रंग की क्षैतिज रेखाएँ जोड़ीं।- उनकी अनुरोधित ऊंचाई से अधिक स्थान वाले बटन जरूरी नहीं कि इसे "भरें"। इस मामले में वास्तविक व्यवहार उनके संरेखण द्वारा नियंत्रित किया जाता है। उदाहरण के लिए, वे या तो अपने स्थान के शीर्ष, केंद्र या बटन पर संरेखित होते हैं या इसे पूरी तरह से भरते हैं।
- सभी बटन लेआउट की पूरी चौड़ाई में फैले हुए हैं, क्योंकि हम केवल संशोधित करते हैं
VerticalOptions।
यहां आपको संबंधित उच्च-रिज़ॉल्यूशन स्क्रीनशॉट मिलते हैं।
