वर्चुअल रूप से एक रैपपैनल पर सूची आइटम और एकाधिक कॉलम का लाभ लें

Question

मुझे आइटम (सभी आकार के समान) को लंबवत (स्क्रॉलव्यूअर के साथ) सूचीबद्ध करने की आवश्यकता है। मैं आइटम एक्स कॉलम के माध्यम से फैल करना चाहते हैं तो कंटेनर काफी बड़ी एक्स कॉलम

मैं पहली बार करने की कोशिश की प्रदर्शित करने के लिए है कि:

<ScrollViewer> 
    <toolkit:WrapPanel Orientation="Horizontal" ItemHeight="30" ItemWidth="100"> 
     <Button Content="1" /> 
     <Button Content="2" /> 
     <Button Content="3" /> 
     <Button Content="4" /> 
     <Button Content="5" /> 
    </toolkit:WrapPanel> 
</ScrollViewer> 

परिणाम - WrapPanel काम करता है जैसे मैं चाहता हूं लेकिन मेरे आइटम "बाएं से दाएं" से क्रमबद्ध हैं (लंबवत

तब मैं WrapPanel करने के लिए "कार्यक्षेत्र" के अभिविन्यास seet करने की कोशिश की:

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

यहाँ कैसे मैं आइटम चाहते हैं प्रदान करने की है:

मैं वास्तव में/बनाने के लिए अपने आकार के आधार पर स्तंभों को निकालने के नियंत्रण आकार की निगरानी कोड लिखने के लिए होने से बचने के लिए करना चाहते हैं।

Answer 1

आप Vertical करने के लिए Orientation सेट करते हैं तो आप भी ऊंचाई प्रस्तुत करना स्थापित करना चाहिए। उदाहरण के लिए WrapPanel, Height="150" पर।

Answer 2

WrapPanel के साथ ऐसा करने का एकमात्र तरीका स्पष्ट रूप से Height सेट करना है।

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

Answer 3

व्यवहार उस तरह परिभाषित करने अपने Height

एक वैकल्पिक आप इस्तेमाल कर सकते हैं एक Grid, जहां OnLoaded और OnSizeChanged में, यह गणना करता है कि कितने कॉलम फिट होगा है, तो पंक्ति सेट के बिना एक WrapPanel साथ संभव नहीं है/कोड-बैक में प्रत्येक ऑब्जेक्ट की ग्रिड और Grid.Row/Grid.Column की कॉलम परिभाषाएं। यह सुंदर नहीं है, लेकिन इसे एक साथ रखना और काम करना काफी सरल होना चाहिए।

दूसरा विकल्प अपना स्वयं का कस्टम पैनल कि आइटम आप चाहते हैं की व्यवस्था बनाने की जाएगी। तुम भी पहले से ही है कि कि

Answer 4

अंत में कुछ है कि काम करता है मिल गया है, लेकिन यह कोड की जरूरत है कुछ ऑनलाइन उपलब्ध खोजने के लिए सक्षम हो सकता है। मैं आप सभी के साथ सहमत जब आप कहते हैं कि हम उस काम करता है बनाने के लिए WrapPanel की ऊंचाई नाप बदलना होगा।

<ScrollViewer x:Name="scroll1" SizeChanged="ScrollViewer_SizeChanged" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> 
    <toolkit:WrapPanel x:Name="wp1" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" ItemHeight="30" ItemWidth="250" > 
     <Button Content="1" /> 
     <Button Content="2" /> 
     <Button Content="3" /> 
     <Button Content="4" /> 
     <Button Content="5" /> 
     <Button Content="6" /> 
     <Button Content="7" /> 
     <Button Content="8" /> 
    </toolkit:WrapPanel> 
</ScrollViewer> 

यहाँ codebehind है: यहाँ मेरी हल है

private void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    // Stupid magical number because ViewPortHeight is sometimes not accurate 
    Double MAGICALNUMBER = 2; 

    // Ensure ViewPortSize is not 0 
    if (scroll1.ViewportWidth <= MAGICALNUMBER || scroll1.ViewportHeight <= MAGICALNUMBER) 
     return; 

    Size contentSize = new Size(scroll1.ViewportWidth - MAGICALNUMBER, scroll1.ViewportHeight - MAGICALNUMBER); 
    Size itemSize = new Size(wp1.ItemWidth, wp1.ItemHeight); 

    Size newSize = CalculateSizeBasedOnContent(contentSize, wp1.Children.Count, itemSize); 

    wp1.Width = newSize.Width; 
    wp1.Height = newSize.Height; 
} 


private Size CalculateSizeBasedOnContent(Size containerSize, int itemsCount, Size itemSize) 
{ 

    int iPossibleColumns = (int)Math.Floor(containerSize.Width/itemSize.Width); 
    int iPossibleRows = (int)Math.Floor(containerSize.Height/itemSize.Height); 

    // If all items can fit in first column without scrolling (or if container is narrow than the itemWidth) 
    if (itemsCount <= iPossibleRows || containerSize.Width < itemSize.Width) 
    return new Size(itemSize.Width, (itemsCount * itemSize.Height)); 

    // If all items can fit in columns without scrollbar 
    if (iPossibleColumns * iPossibleRows > itemsCount) 
    { 
    int columnsNeededForDisplay = (int)Math.Ceiling((itemsCount/(Double) iPossibleRows)); 
    return new Size(columnsNeededForDisplay * itemSize.Width, containerSize.Height); 
    } 

    // Here scrolling is needed even after spreading in columns 
    int itemsPerColumn = (int)Math.Ceiling(wp1.Children.Count/(Double)iPossibleColumns); 
    return new Size(containerSize.Width, itemsPerColumn * itemSize.Height); 

}