फिक्स्ड लपेटें पैनल WPF

Question

मैं WPF खिड़की पर काम कर रहा हूँ कि रैपिंग के साथ एक दूसरे अगले मदों की सूची दिखाने के लिए, मैं इस तरह से WrapPanel उपयोग करने के लिए प्रयास किया है:

<Grid> 
    <ItemsControl> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel Orientation="Horizontal"/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 

     <ItemsControl.Items> 
      <Button Content="01" Height="30" Width="70"/> 
      <Button Content="02" Height="35" Width="72"/> 
      <Button Content="03" Height="20" Width="74"/> 
      <Button Content="04" Height="25" Width="76"/> 
      <Button Content="05" Height="18" Width="78"/> 
      <Button Content="06" Height="50" Width="70"/> 
      <Button Content="07" Height="40" Width="72"/> 
      <Button Content="08" Height="55" Width="74"/> 
      <Button Content="09" Height="45" Width="76"/> 
      <Button Content="10" Height="25" Width="78"/> 
      <Button Content="11" Height="20" Width="80"/> 
      <Button Content="12" Height="30" Width="70"/> 
      <Button Content="13" Height="45" Width="72"/> 
      <Button Content="14" Height="30" Width="74"/> 
      <Button Content="15" Height="20" Width="76"/> 
      <Button Content="16" Height="25" Width="78"/> 
      <Button Content="17" Height="35" Width="80"/> 
      <Button Content="18" Height="50" Width="70"/> 
      <Button Content="19" Height="55" Width="72"/> 
      <Button Content="20" Height="45" Width="74"/> 
      <Button Content="21" Height="20" Width="76"/> 
      <Button Content="22" Height="60" Width="78"/> 
      <Button Content="23" Height="20" Width="80"/> 
      <Button Content="24" Height="25" Width="70"/> 
      <Button Content="25" Height="30" Width="72"/> 
     </ItemsControl.Items> 
    </ItemsControl> 
</Grid> 

और इस परिणाम है:

वास्तव में इस परिणाम क्योंकि अगर आप ग्रिड (पंक्तियों और स्तंभों) के रूप में WrapPanel कल्पना आप कोई स्तंभ है कि वहाँ मिल जाएगा, लेकिन वहाँ तय आकार पंक्तियों हैं मेरे लिए असंतोषजनक है। मैं भी WarpPanel या स्तंभों के बिना किसी और कुछ नियंत्रण बनाने के लिए, इस काल्पनिक छवि को देखने की जरूरत है: यदि कोई भी पंक्ति और स्तंभ है

सूचना है कि वहाँ। यह वही है जो मैं बनाना चाहता हूं।

किसी के पास इस मुद्दे को हल करने के लिए विचार हैं?

Answer 1

आप अपनी खुद की कस्टम पैनल कक्षा लिख ​​सकते हैं। वेब पर कुछ ट्यूटोरियल हैं, बस गूगल "wpf कस्टम पैनल"।

यह MeasureOverride और ArrangeOverride विधियों को ओवरराइड करने के लिए उबलता है।

---

अद्यतन: निम्नलिखित सरल कस्टम पैनल कम या ज्यादा क्या आप चाहते हो सकता है।

public class PackPanel : Panel 
{ 
    protected override Size MeasureOverride(Size availableSize) 
    { 
     foreach (UIElement child in InternalChildren) 
     { 
      child.Measure(availableSize); 
     } 

     var positions = new Point[InternalChildren.Count]; 
     var desiredHeight = ArrangeChildren(positions, availableSize.Width); 

     return new Size(availableSize.Width, desiredHeight); 
    } 

    protected override Size ArrangeOverride(Size finalSize) 
    { 
     var positions = new Point[InternalChildren.Count]; 
     ArrangeChildren(positions, finalSize.Width); 

     for (int i = 0; i < InternalChildren.Count; i++) 
     { 
      var child = InternalChildren[i]; 
      child.Arrange(new Rect(positions[i], child.DesiredSize)); 
     } 

     return finalSize; 
    } 

    private double ArrangeChildren(Point[] positions, double availableWidth) 
    { 
     var lastRowStartIndex = -1; 
     var lastRowEndIndex = 0; 
     var currentWidth = 0d; 
     var desiredHeight = 0d; 

     for (int childIndex = 0; childIndex < InternalChildren.Count; childIndex++) 
     { 
      var child = InternalChildren[childIndex]; 
      var x = 0d; 
      var y = 0d; 

      if (currentWidth == 0d || currentWidth + child.DesiredSize.Width <= availableWidth) 
      { 
       x = currentWidth; 
       currentWidth += child.DesiredSize.Width; 
      } 
      else 
      { 
       currentWidth = child.DesiredSize.Width; 
       lastRowStartIndex = lastRowEndIndex; 
       lastRowEndIndex = childIndex; 
      } 

      if (lastRowStartIndex >= 0) 
      { 
       int i = lastRowStartIndex; 

       while (i < lastRowEndIndex - 1 && positions[i + 1].X < x) 
       { 
        i++; 
       } 

       while (i < lastRowEndIndex && positions[i].X < x + child.DesiredSize.Width) 
       { 
        y = Math.Max(y, positions[i].Y + InternalChildren[i].DesiredSize.Height); 
        i++; 
       } 
      } 

      positions[childIndex] = new Point(x, y); 
      desiredHeight = Math.Max(desiredHeight, y + child.DesiredSize.Height); 
     } 

     return desiredHeight; 
    } 
} 

Answer 2

आप कैनवास उपयोग कर सकते हैं:

या उपयोग ग्रिड और प्रत्येक बटन के मार्जिन सेट requirenment

 <Canvas > 
     <Button Content="s" Width="50" Canvas.Left="17" Canvas.Top="20" /> 
     <Button Canvas.Left="73" Canvas.Top="32" Content="s" Width="60" Height="42" /> 
     <Button Canvas.Left="139" Canvas.Top="10" Content="s" Height="42" Width="60" /> 
    </Canvas> 

     <Grid > 
      <Button Content="01" Height="30" Width="70" Margin="20,12,414,268" /> 
      <Button Content="02" Height="35" Width="72" Margin="426,148,6,128" /> 
      <Button Content="03" Height="20" Width="74" Margin="190,122,240,170" /> 
      <Button Content="04" Height="25" Width="76" Margin="386,26,40,260" /> 
      <Button Content="05" Height="18" Width="78" Margin="376,202,48,92" /> 
      <Button Content="06" Height="50" Width="70" Margin="385,64,48,196" /> 
      <Button Content="07" Height="40" Width="72" Margin="162,202,269,68" /> 
      <Button Content="08" Height="55" Width="74" Margin="20,154,408,102" /> 
      <Button Content="09" Height="45" Width="76" Margin="21,95,406,171" /> 
      <Button Content="10" Height="25" Width="78" Margin="44,47,382,239" /> 
      <Button Content="11" Height="20" Width="80" Margin="386,120,38,170" /> 
      <Button Content="12" Height="30" Width="70" Margin="95,13,338,268" /> 
      <Button Content="13" Height="45" Width="72" Margin="290,6,140,260" /> 
      <Button Content="14" Height="30" Width="74" Margin="210,38,220,244" /> 
      <Button Content="15" Height="20" Width="76" Margin="128,48,299,242" /> 
      <Button Content="16" Height="25" Width="78" Margin="265,189,160,97" /> 
      <Button Content="17" Height="35" Width="80" Margin="176,154,246,122" /> 
      <Button Content="18" Height="50" Width="70" Margin="100,146,333,116" /> 
      <Button Content="19" Height="55" Width="72" Margin="270,121,160,135" /> 
      <Button Content="20" Height="45" Width="74" Margin="348,148,81,118" /> 
      <Button Content="21" Height="20" Width="76" Margin="94,78,332,212" /> 
      <Button Content="22" Height="60" Width="78" Margin="270,60,155,192" /> 
      <Button Content="23" Height="20" Width="80" Margin="176,74,247,216" /> 
      <Button Content="24" Height="25" Width="70" Margin="194,95,238,191" /> 
      <Button Content="25" Height="30" Width="72" Margin="117,104,314,177" /> 

    </Grid>