StackPanel के बच्चों को अधिकतम स्थान नीचे की ओर भरने के लिए कैसे प्राप्त करें?

Question

मैं बस बाईं ओर पाठ और बहती दाईं ओर एक पाठ बॉक्स चाहता हूं।

मदद बॉक्स को नीचे तक सभी तरह से विस्तारित करना चाहिए।

यदि आप बाहरी को बाहर निकालते हैं तो StackPanelयह बहुत अच्छा काम करता है।

लेकिन लेआउट के कारणों के लिए (मैं UserControls गतिशील रूप से सम्मिलित कर रहा हूं) मुझे रैपिंग की आवश्यकता है StackPanel।

मैं GroupBoxनीचे तक विस्तार करने के लिए कैसे प्राप्त StackPanelकर सकता हूं, जैसा कि आप देख सकते हैं कि मैंने कोशिश की है:

• VerticalAlignment="Stretch"
• VerticalContentAlignment="Stretch"
• Height="Auto"

XAML:

<Window x:Class="TestDynamic033.Test3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test3" Height="300" Width="600">
    <StackPanel 
        VerticalAlignment="Stretch" 
        Height="Auto">

        <DockPanel 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Height="Auto" 
            Margin="10">

            <GroupBox 
                DockPanel.Dock="Right" 
                Header="Help" 
                Width="100" 
                Background="Beige" 
                VerticalAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                Height="Auto">
                <TextBlock Text="This is the help that is available on the news screen." TextWrapping="Wrap" />
            </GroupBox>

            <StackPanel DockPanel.Dock="Left" Margin="10" Width="Auto" HorizontalAlignment="Stretch">
                <TextBlock Text="Here is the news that should wrap around." TextWrapping="Wrap"/>
            </StackPanel>

        </DockPanel>
    </StackPanel>
</Window>

उत्तर:

धन्यवाद मार्क, DockPanelबजाय StackPanelइसे मंजूरी दे दी का उपयोग कर। सामान्य तौर पर, मैं खुद DockPanelको WPF लेआउटिंग के लिए अधिक से अधिक उपयोग कर रहा हूं , यहां निश्चित XAML है:

<Window x:Class="TestDynamic033.Test3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test3" Height="300" Width="600" MinWidth="500" MinHeight="200">
    <DockPanel 
        VerticalAlignment="Stretch" 
        Height="Auto">

        <DockPanel 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Height="Auto" 
            MinWidth="400"
            Margin="10">

            <GroupBox 
                DockPanel.Dock="Right" 
                Header="Help" 
                Width="100" 
                VerticalAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                Height="Auto">
                <Border CornerRadius="3" Background="Beige">
                    <TextBlock Text="This is the help that is available on the news screen." TextWrapping="Wrap" 

                Padding="5"/>
                </Border>
            </GroupBox>

            <StackPanel DockPanel.Dock="Left" Margin="10" Width="Auto" HorizontalAlignment="Stretch">
                <TextBlock Text="Here is the news that should wrap around." TextWrapping="Wrap"/>
            </StackPanel>

        </DockPanel>
    </DockPanel>
</Window>

Comments

स्वरूपण निश्चित किया - यह एक सूची से कोड

— ग्रेग

क्या आप अपने आप से एक ग्रुपबॉक्स स्ट्रेच बना सकते हैं? यदि ऐसा है, तो अपने माता-पिता के तत्वों को एक-एक करके जोड़ना शुरू करें, जब तक आपको पता न चल जाए कि लेआउट को कौन तोड़ रहा है।

— ड्रू नॉक

RoBorg: यह जानकर अच्छा लगा, कि मुझे बहुत खुशी हुई, धन्यवाद

— एडवर्ड टंगुए

धन्यवाद। आपके उत्तर का उपयोग करते हुए मैं अपने इसी तरह के मुद्दे को हल करने के लिए 2 नेस्टेड डॉकपैनल का उपयोग करने में सक्षम था!

— याबलारगो

Answer 1

ऐसा लगता है जैसे आप चाहते हैं StackPanelकि अंतिम तत्व सभी शेष स्थान का उपयोग करता है। लेकिन एक का उपयोग क्यों नहीं DockPanel? अन्य तत्वों के DockPanelसाथ सजाने के लिए DockPanel.Dock="Top", और फिर आपका मदद नियंत्रण शेष स्थान को भर सकता है।

XAML:

<DockPanel Width="200" Height="200" Background="PowderBlue">
    <TextBlock DockPanel.Dock="Top">Something</TextBlock>
    <TextBlock DockPanel.Dock="Top">Something else</TextBlock>
    <DockPanel
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Height="Auto" 
        Margin="10">

      <GroupBox 
        DockPanel.Dock="Right" 
        Header="Help" 
        Width="100" 
        Background="Beige" 
        VerticalAlignment="Stretch" 
        VerticalContentAlignment="Stretch" 
        Height="Auto">
        <TextBlock Text="This is the help that is available on the news screen." 
                   TextWrapping="Wrap" />
     </GroupBox>

      <StackPanel DockPanel.Dock="Left" Margin="10" 
           Width="Auto" HorizontalAlignment="Stretch">
          <TextBlock Text="Here is the news that should wrap around." 
                     TextWrapping="Wrap"/>
      </StackPanel>
    </DockPanel>
</DockPanel>

यदि आप बिना DockPanelउपलब्ध प्लेटफ़ॉर्म पर हैं (उदाहरण के लिए WindowsStore), तो आप ग्रिड के साथ एक ही प्रभाव बना सकते हैं। इसके बजाय ऊपर दिए गए उदाहरण का उपयोग ग्रिड के बजाय पूरा किया गया है:

<Grid Width="200" Height="200" Background="PowderBlue">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
        <TextBlock>Something</TextBlock>
        <TextBlock>Something else</TextBlock>
    </StackPanel>
    <Grid Height="Auto" Grid.Row="1" Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <GroupBox
            Width="100"
            Height="Auto"
            Grid.Column="1"
            Background="Beige"
            Header="Help">
            <TextBlock Text="This is the help that is available on the news screen." 
              TextWrapping="Wrap"/>
        </GroupBox>
        <StackPanel Width="Auto" Margin="10" DockPanel.Dock="Left">
            <TextBlock Text="Here is the news that should wrap around." 
              TextWrapping="Wrap"/>
        </StackPanel>
    </Grid>
</Grid>

Comments

प्रतिभाशाली! मैंने आखिरी घंटे बिताए यह जानने की कोशिश कर रहा है कि स्टैकपैनल को यह कैसे करना है। अब से, मैं यहाँ अपनी WPF (और अन्य) जानकारी के लिए सबसे पहले देखूँगा।

— पैक्सिडाब्लो

मैं विश्वास नहीं कर सकता कि स्टैकपैनल्स को प्राप्त करने के लिए मैंने कितना समय बिताया है। साझा करने के लिए धन्यवाद! DockPanels वही हैं जो मैं चाहता था।

— डांगलुंड

ऐसा लगता है कि गोलियों के लिए कोई डॉकपेन नहीं है। telerik.com/forums/following-blog-post-and-comparison

— JP Hellemons

विंडोज स्टोर ऐप्स के लिए कोई डॉक पैनल नहीं।

— तेमन शिपाही

अब यह सब यूनिवर्सल ऐप के बारे में है और यूनिवर्सल ऐप अभी तक डॉकपेल का समर्थन नहीं करते हैं?

— 9

Answer 2

ऐसा इसलिए हो रहा है क्योंकि स्टैक पैनल हर बच्चे के तत्व को सकारात्मक अनंतता के साथ मापता है क्योंकि धुरी के लिए बाधा के रूप में यह तत्वों को ढेर कर रहा है। बच्चे के नियंत्रण को वापस लौटना पड़ता है कि वे कितना बड़ा होना चाहते हैं (सकारात्मक अनंत या तो अक्ष में मेजरऑवराइड से वैध रिटर्न नहीं है ) इसलिए वे सबसे छोटे आकार को वापस करते हैं जहां सब कुछ फिट होगा। उनके पास यह जानने का कोई तरीका नहीं है कि उन्हें वास्तव में कितना स्थान भरना है।

यदि आपके विचार में स्क्रॉलिंग सुविधा होने की आवश्यकता नहीं है और ऊपर दिया गया उत्तर आपकी आवश्यकताओं के अनुरूप नहीं है, तो मैं सुझाव दूंगा कि आप अपने स्वयं के पैनल को लागू करें। आप शायद StackPanel से सीधे प्राप्त कर सकते हैं और फिर आपको बस इतना करना होगा कि ArrangeOverride विधि को बदल दें ताकि वह अपने बाल तत्वों के बीच शेष स्थान को विभाजित कर दे (प्रत्येक अतिरिक्त स्थान को समान रूप से दे)। तत्वों को ठीक से प्रस्तुत करना चाहिए यदि वे चाहते थे की तुलना में उन्हें अधिक स्थान दिया जाए, लेकिन यदि आप उन्हें कम देते हैं तो आपको ग्लिट्स दिखाई देने लगेंगे।

यदि आप पूरी चीज़ को स्क्रॉल करने में सक्षम होना चाहते हैं तो मुझे डर है कि चीजें काफी अधिक कठिन होंगी, क्योंकि स्क्रॉलव्यूअर आपको काम करने के लिए एक अनंत स्थान देता है जिसके साथ आपको उसी स्थिति में रखा जाएगा जैसे कि बाल तत्व थे मौलिक रूप से। इस स्थिति में आप अपने नए पैनल पर एक नई प्रॉपर्टी बनाना चाहते हैं जो आपको व्यूपोर्ट का आकार निर्दिष्ट करने की अनुमति देता है, आपको इसे स्क्रॉलव्यूअर के आकार में बांधने में सक्षम होना चाहिए। आदर्श रूप से आप IScrollInfo को लागू करेंगे , लेकिन यदि आप इसे ठीक से लागू करने जा रहे हैं तो यह जटिल होने लगता है।

Comments

+1, मैं आपको और अधिक जानकारी दूंगा, लेकिन केवल 1 की अनुमति है, आपके पहले पैराग्राफ ने इंगित किया है कि कई Microsoft पृष्ठ क्या करने में विफल रहे हैं, अर्थात् अनन्तता एक ऊंचाई / चौड़ाई के रूप में क्यों हो सकती है और इस तथ्य पर कि आप उपलब्ध रिटर्न पर भरोसा नहीं कर सकते हैं ।

— ईदन

एक ग्रिड के अंदर एक StackPanel बड़े आराम से अपनी बल्कि आम जरूरत को हल करता है। यदि आवश्यक हो, तो नीचे बिट को एक स्क्रॉल दृश्य के अंदर रखा जा सकता है। मैं 2006 से WPF कर रहा हूं और केवल एक बार कस्टम पैनल को करने की आवश्यकता है। मुझे नहीं लगता कि अतिरिक्त जटिलता को प्रोत्साहित करने के लिए यह एक अच्छा विचार है।

— क्रिस बॉर्डमैन

@ क्रिसहॉर्डमैन मुझे यकीन नहीं है कि मैं समझता हूं कि ग्रिड के अंदर स्टैक पैनल समस्या का समाधान कैसे करता है। उपलब्ध स्थान को भरने के लिए स्टैक पैनल खिंचाव में एक या एक से अधिक बाल तत्व होने का विचार है। एक ग्रिड के अंदर स्टैक पैनल को रखने से यह ऐसा नहीं होता है?

— कालेब वियर

Answer 3

एक वैकल्पिक विधि एक कॉलम और एन पंक्तियों के साथ ग्रिड का उपयोग करना है । सभी पंक्तियों को ऊँचाई पर सेट करें Auto, और नीचे-सबसे पंक्ति ऊँचाई को 1*।

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

Comments

मेरे लिए सबसे अच्छा समाधान। इसके साथ यह अधिक संभव है तो एक बढ़ती हुई पंक्ति को परिभाषित करना

— niyou

Answer 4

आप SpicyTaco.AutoGrid का उपयोग कर सकते हैं - का एक संशोधित संस्करण StackPanel:

<st:StackPanel Orientation="Horizontal" MarginBetweenChildren="10" Margin="10">
   <Button Content="Info" HorizontalAlignment="Left" st:StackPanel.Fill="Fill"/>
   <Button Content="Cancel"/>
   <Button Content="Save"/>
</st:StackPanel>

पहले बटन भरना होगा।

आप इसे NuGet के माध्यम से स्थापित कर सकते हैं:

Install-Package SpicyTaco.AutoGrid

मैं SpicyTaco.AutoGrid पर एक नज़र लेने की सलाह देता हूं । यह WPF के रूपों के लिए बहुत उपयोगी है DockPanel, StackPanelऔर Gridसमस्या को हल करने के साथ बहुत आसान और सुंदर तरीके से हल करता है। सिर्फ GitHub पर readme को देखें।

<st:AutoGrid Columns="160,*" ChildMargin="3">
    <Label Content="Name:"/>
    <TextBox/>

    <Label Content="E-Mail:"/>
    <TextBox/>

    <Label Content="Comment:"/>
    <TextBox/>
</st:AutoGrid>