क्या wpf wrappanel

Question

में भिन्न चौड़ाई के आइटम प्रदर्शित करने का कोई तरीका है, मैं विंडोज 8 टाइल्स की तरह कुछ कोशिश कर रहा हूं और विभिन्न चौड़ाई और/या ऊंचाई की टाइल प्रदर्शित करना चाहता हूं। WrapPanel छोटे कॉलम के चारों ओर खाली रिक्त स्थान छोड़कर प्रत्येक कॉलम बराबर चौड़ाई और ऊंचाई बनाता है। क्या StackPanel जैसी वस्तुओं को प्रदर्शित करने के लिए कोई तरीका या पैनल है जहां प्रत्येक आइटम में व्यक्तिगत आयाम हो सकते हैं और WrapPanel की तरह लपेट सकते हैं?

संपादित करें: यह मेरा ItemsControl है। मैंने टाइल डेटा टेम्पलेट को एक साधारण Border और TextBlock के साथ बदल दिया। चौड़ाई auto है और टाइल्स ठीक दिखती है WrapPanel बराबर आकार वाली कोशिकाओं को बनाते हैं।

  <ItemsControl ItemsSource="{Binding Path=Contents}" HorizontalContentAlignment="Left"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel Orientation="Vertical" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Border Background="#B1DBFC" Height="200px" BorderBrush="#404648" Margin="5"> 
         <TextBlock VerticalAlignment="Center" Text="{Binding Path=Name}" /> 
        </Border> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 

आप छवि से देख सकते हैं कि प्रत्येक स्तंभ के width व्यापक आइटम की चौड़ाई है।

यदि मैं सीमा पर स्पष्ट रूप से चौड़ाई निर्धारित करता हूं, तो चीजें अधिक बदसूरत हो जाती हैं।

Answer 1

व्यवहार आप देख रहे हैं WrapPanel की डिफ़ॉल्ट व्यवहार के रूप में निम्न नमूना से देखा जा सकता है।

<WrapPanel > 
    <WrapPanel.Resources> 
     <Style TargetType="{x:Type Rectangle}"> 
      <Setter Property="Width" 
        Value="80" /> 
      <Setter Property="Height" 
        Value="80" /> 
      <Setter Property="Margin" 
        Value="3" /> 
      <Setter Property="Fill" 
        Value="#4DB4DD" /> 
     </Style> 
    </WrapPanel.Resources> 

    <Rectangle Width="150" /> 
    <Rectangle /> 
    <Rectangle /> 
    <Rectangle /> 
    <Rectangle Width="200"/> 
    <Rectangle /> 
    <Rectangle /> 
    <Rectangle /> 
    <Rectangle Width="220"/> 
    <Rectangle /> 
    <Rectangle /> 

</WrapPanel> 

निम्नलिखित में से कौन परिणाम पैदा करता है:

आप देख सकते हैं, प्रत्येक आइटम की चौड़ाई सम्मानित किया है।

आपकी समस्या WrapPanel से Vertical पर आपके टेम्पलेट में अभिविन्यास सेट करने के कारण होती है। यह बाएं से दाएं की बजाय वस्तुओं को ऊपर से नीचे तक रख रहा है जिसका अर्थ है कि यह Height संपत्ति है जिसे आपको सेटिंग करने की आवश्यकता है (या आप मेरे उदाहरण में क्षैतिज लेआउट पर वापस लौट सकते हैं)।

अपने आउटपुट की तुलना अपने स्क्रीनशॉट पर करें जहां पैनल क्षैतिज अभिविन्यास पर सेट है; प्रत्येक पंक्ति उच्चतम Rectangle का आकार है। मेरा विश्वास मत करो? Rectangle'sHeight संपत्ति को एक बड़े मूल्य पर सेट करने का प्रयास करें और आप देखेंगे कि पंक्ति का आकार बढ़ जाएगा और Rectangles अब लंबवत रेखाबद्ध नहीं होगा।

अपनी टिप्पणी पढ़ना मुझे लगता है कि सबसे अच्छा तरीका है आरंभ करने के लिए निम्न कार्य करने के लिए है:

• एक WrapPanel कि क्षैतिज अपनी सामग्री बाहर देता है।
• आइटमों में वर्दी Height होना चाहिए।
• WrapPanel के को एक निश्चित आकार में रोकें ताकि आपको ऊर्ध्वाधर स्क्रॉलबार न मिले।

की ऊंचाई अपने WrapPanel निम्न सूत्र का उपयोग कर बाहर काम किया जाना चाहिए:

((मद की ऊंचाई + शीर्ष मार्जिन + निचला हाशिया) x पंक्तियों की संख्या))

प्रत्येक आइटम की चौड़ाई को थोड़ा सा विचार भी चाहिए ताकि पैनल मेट्रो इंटरफ़ेस (क्षैतिज की बजाय पंक्तिबद्ध) की तरह आइटम को क्षैतिज रूप से बाहर रखे।

दो टाइल आकार हैं; छोटा एक 80px चौड़ा है और बड़ा 166 पीएक्स चौड़ा है। बड़े टाइल की चौड़ाई इस तरह बाहर काम किया है:

(आइटम चौड़ाई * 2) + (बाएं मार्जिन + सही मार्जिन)

यह सुनिश्चित करता है टाइल्स सही ढंग से लाइन अप।

<ScrollViewer HorizontalScrollBarVisibility="Auto" 
       VerticalScrollBarVisibility="Disabled"> 
    <StackPanel Orientation="Horizontal" 
       Margin="10,0"> 
     <StackPanel.Resources> 
      <Style TargetType="{x:Type Rectangle}"> 
       <Setter Property="Width" 
         Value="80" /> 
       <Setter Property="Height" 
         Value="80" /> 
       <Setter Property="Margin" 
         Value="3" /> 
       <Setter Property="Fill" 
         Value="#4DB4DD" /> 
      </Style> 
      <Style TargetType="{x:Type WrapPanel}"> 
       <Setter Property="Margin" 
         Value="0,0,25,0" /> 
       <Setter Property="MaxWidth" 
         Value="516" /> 
      </Style> 
     </StackPanel.Resources> 
     <WrapPanel Height="258"> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
     </WrapPanel> 
     <WrapPanel Height="258"> 
      <Rectangle /> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle /> 
      <Rectangle Width="166" /> 
      <Rectangle /> 
     </WrapPanel> 
    </StackPanel> 
</ScrollViewer> 

निम्नलिखित में से कौन परिणाम पैदा करता है:

यह आपको एक में फिर से कारक को यह शुरू करने के लिए पर्याप्त जानकारी देना चाहिए

तो अब मेरी XAML कुछ इस तरह दिखता पूर्ण नियंत्रण। यदि आप ऐसा करते हैं तो रख निम्न बातों का ध्यान:

• लेआउट गुणों (छोटे आइटम आकार, बड़े आइटम आकार, अंतराल आदि) नहीं बल्कि मुश्किल से गणना की जानी चाहिए कोडित ताकि आप उदाहरण के लिए, को बदलना चाहते हैं, मार्जिन, लेआउट अभी भी सही तरीके से काम करेगा (आईई टाइल्स अभी भी लाइन अप होगा)।
• मैं प्रदर्शित किए जा सकने वाले 'टाइल्स' की संख्या को सीमित कर दूंगा (वर्तमान उदाहरण में, यदि टाइल्स लेआउट में फिट नहीं होते हैं तो वे आसानी से छुपाए जाते हैं जो शायद आप नहीं चाहते हैं)।