स्टाइलिंग ListView.GroupStyle एक WrapPanel

Question

ठीक है, यहां मेरी सुंदर समस्या है।

मेरे पास ListView है जो मैंने विंडोज एक्सप्लोरर की तरह दिखने के लिए स्टाइल किया है।

अब, मैं अंदर वस्तुओं को समूहित करना चाहता हूं। इसलिए, मैंने GroupStyle को Expander के साथ समूहित करने के लिए परिभाषित किया है। समूह अब ठीक है।

मुझे जो पसंद नहीं है वह अब है कि मेरा ListView प्रत्येक समूह को एक अलग पंक्ति पर प्रदर्शित करता है, जबकि मैं एक ही पंक्ति पर कई समूहों को प्रदर्शित करने के लिए कुछ विस्तारक-लपेटना चाहता हूं।

एक छवि मुझे लगता है कि कुछ पाठ से बेहतर है।

यहाँ है जो मैं चाहता:

मैं नहीं मिल सकता है जो संपत्ति मैं आदेश GroupItems बनाने के लिए शैली के लिए होनी चाहिए

यहाँ मैं क्या है एक रैपपैनल में फिट, जैसा मैंने आइटम के लिए किया था।

<ResourceDictionary> 

        <!-- Explorer-style layout--> 
        <DataTemplate x:Key="ExplorerView"> 
         <StackPanel Orientation="Horizontal" Height="Auto" Width="150"> 
          <Image Source="{Binding Path=Value.AppConfig.Appli.AppType, Converter={StaticResource TypeToIconConverter}}" Margin="5" 
            Height="50" Width="50"/> 
          <StackPanel VerticalAlignment="Center" Width="90"> 
           <TextBlock Text="{Binding Path=Value.AppConfig.Appli.AppName}" 
        FontSize="13" HorizontalAlignment="Left" TextWrapping="WrapWithOverflow" 
        Margin="0,0,0,1" /> 
           <TextBlock Text="{Binding Path=Value.AppConfig.Appli.AppType}" FontSize="9" 
        HorizontalAlignment="Left" Margin="0,0,0,1" /> 
          </StackPanel> 
         </StackPanel> 
        </DataTemplate> 

        <!-- Group header style--> 
    <Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}"> 


     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type GroupItem}"> 

        <Expander x:Name="exp" IsExpanded="True" Width="310" 
            BorderBrush="CornflowerBlue"> 

         <Expander.Header> 
          <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
             Background="CornflowerBlue" x:Name="expContent" 
             Width="{Binding RelativeSource={RelativeSource 
              Mode=FindAncestor, AncestorType={x:Type Expander}}, 
              Path=Width}" 
             Height="{Binding RelativeSource={RelativeSource 
              Mode=FindAncestor, AncestorType={x:Type ToggleButton}}, 
              Path=ActualHeight}"> 
           <CheckBox IsChecked="False" DockPanel.Dock="Right"/> 
           <TextBlock Text="{Binding Path=Name}" Foreground="White" 
              FontWeight="Bold" HorizontalAlignment="Center" /> 
          </DockPanel> 
         </Expander.Header> 
         <ItemsPresenter /> 
        </Expander> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 



       </ResourceDictionary> 
    <!-- (...) --> 

    <ListView ItemsSource="{Binding GroupedConfig, Mode=TwoWay}" 
       ItemTemplate="{StaticResource ExplorerView}"> 



     <ListView.ItemsPanel> 
      <ItemsPanelTemplate > 
       <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), 
        RelativeSource={RelativeSource 
            AncestorType=Expander}}" 
        ItemWidth="{Binding (ListView.View).ItemWidth, 
        RelativeSource={RelativeSource AncestorType=ListView}}" 

        ItemHeight="{Binding (ListView.View).ItemHeight, 
        RelativeSource={RelativeSource AncestorType=ListView}}" /> 
       <!--MinWidth="{Binding ItemWidth, 
        RelativeSource={RelativeSource Self}}"--> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 

     <ListView.GroupStyle> 
      <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}" /> 
     </ListView.GroupStyle> 


    </ListView> 

कोई भी विचार:

यहाँ मेरी ListView शैली है? मैं GroupItem के लिए परिभाषित शैली में कुछ उचित Setter डालने का प्रयास कर रहा हूं, लेकिन मुझे लगता है कि यह करने का सही तरीका नहीं है।

धन्यवाद!

Answer 1

मुझे अंततः कई कोशिशों के बाद संपादित करने के लिए सही संपत्ति मिली।

मुझे लगता है कि अगर किसी को भी एक ही व्यवहार के साथ कुछ करने के लिए की आवश्यकता होगी यह इसे यहाँ पोस्ट करने के लिए उपयोगी हो सकता है:

इसलिए हम वास्तव में एक संपत्ति PanelGroupStyle जिसमें हम जोड़ सकते हैं में है यह इतना जरूरत WrapPanel:

<ListView.GroupStyle> 
    <GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}"> 
     <GroupStyle.Panel> 
      <ItemsPanelTemplate> 
       <WrapPanel Width="800" /> 
      </ItemsPanelTemplate> 
     </GroupStyle.Panel> 
    </GroupStyle> 
</ListView.GroupStyle> 

Answer 2

मामले में किसी को भी यहाँ है जैसे मैं आइटम ताकि आप ऊपर जवाब की तरह एक चौड़ाई सेट नहीं कर सकता का एक अज्ञात राशि पर आधारित एक ListBox आइटम लपेटें बनाने के लिए कोशिश कर रहा हूँ, लेकिन, यह कैसे मैंने किया है।

<ListBox.ItemsPanel> 
<ItemsPanelTemplate> 
    <WrapPanel Orientation="Vertical" MaxHeight="{Binding Converter={StaticResource ListBoxHeightToItemsPanelHeightConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}"/> 
</ItemsPanelTemplate> 
</ListBox.ItemsPanel> 

मेरे कनवर्टर में मैं हेडर की ऊंचाई के लिए केवल 30 को घटाता हूं।

<ListBox.GroupStyle> 
<GroupStyle> 
    <GroupStyle.HeaderTemplate> 
     <DataTemplate> 
      <TextBlock Margin="8" FontSize="18" TextAlignment="Center" FontWeight="Bold" Foreground="White" > 
       <TextBlock.Text> 
        <Binding Path="Name"/> 
       </TextBlock.Text> 
      </TextBlock> 
     </DataTemplate> 
    </GroupStyle.HeaderTemplate> 
    <GroupStyle.Panel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
    </GroupStyle.Panel> 
</GroupStyle> 
</ListBox.GroupStyle> 
<ListBox.ItemsPanel> 
<ItemsPanelTemplate> 
    <WrapPanel Orientation="Vertical" MaxHeight="{Binding Converter={StaticResource ListBoxHeightToGroupStyleHeightConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}"/> 
</ItemsPanelTemplate> 
</ListBox.ItemsPanel> 
<ListBox.Template> 
<ControlTemplate> 
    <!-- Your template here. --> 
</ControlTemplate> 
</ListBox.Template> 
<ListBox.ItemTemplate> 
<DataTemplate > 
    <!-- Your template here. --> 
</DataTemplate> 
</ListBox.ItemTemplate> 

आशा इस कोई कुछ समय बचाने में मदद करता है:

यहाँ पूरा कोड है!