ItemsControl (WrapPanel) Группировка должна разделяться GroupItems

Question

У меня есть элемент управления с WrapPanel как ItemsHost и несколько группировок. Got это происходит до сих пор со следующими шаблонами:

<GroupStyle.ContainerStyle> 
    <Style TargetType="GroupItem"> 
     <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="GroupItem"> 
       <Grid> 
        <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="*" /> 
        </Grid.RowDefinitions> 
        <ContentPresenter Grid.Row="0" x:Name="PART_Header" Content="{TemplateBinding Content}" /> 
        <ItemsPresenter Grid.Row="1" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
     </Setter> 
    </Style> 
</GroupStyle.ContainerStyle> 
<GroupStyle.Panel> 
    <ItemsPanelTemplate> 
     <WrapPanel IsItemsHost="True" Orientation="Vertical" /> 
    </ItemsPanelTemplate> 
</GroupStyle.Panel> 

Теперь у меня есть проблема, что каждая группа делает начать новый столбец, почему я хочу, чтобы продолжить прямо под последним GroupItem и Заверните в Середине GroupItem а не в начале.

Это должно выглядеть как Windows 8 Обзор Apps (не начало страницы, если вы спуститесь к просмотру)

Возможно ли это?

Answer 1

Вместо этого я решил это в ViewModel. Я добавляю GroupItem в ObservableCollection, который имеет стиль (Expandable) GroupHeader. Чем я добавил отдельный DataTemplate для GroupHeader, который устанавливает свойство IsCollapsed в группе. Все элементы теперь имеют ссылку на родительскую группу и привязывают видимость к свойству IsCollapsed родительской группы.

К сожалению, я не смог достичь этого, используя CollectionViewSource.

Это XAML:

<ItemsControl ItemsSource="{Binding Items}"> 
    <ItemsControl.DataContext> 
     <local:ViewModel/> 
    </ItemsControl.DataContext> 
    <ItemsControl.Resources> 
     <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/> 
     <DataTemplate DataType="{x:Type local:GroupViewModel}"> 
      <StackPanel> 
       <CheckBox IsChecked="{Binding IsExtended}" /> 
       <!--Restyle to look like a extender--> 
      </StackPanel> 
     </DataTemplate> 
     <DataTemplate DataType="{x:Type local:ItemViewModel}"> 
      <TextBlock Text="{Binding Name}" 
       Visibility="{Binding Group.IsExtended, Converter={StaticResource BooleanToVisibilityConverter}}"/> 
     </DataTemplate> 
    </ItemsControl.Resources> 
</ItemsControl> 

Это ViewModel:

public class ViewModel 
{ 
    public ViewModel() 
    { 
     //Some Test data 
     GroupViewModel group1 = new GroupViewModel("Group1"); 
     GroupViewModel group2 = new GroupViewModel("Group2"); 

     this.Items = new ObservableCollection<object>(new[] 
     { 
      new ItemViewModel("Item1", group1), 
      new ItemViewModel("Item2", group1), 
      new ItemViewModel("Item3", group2), 
      new ItemViewModel("Item4", group2) 
     }); 

     string groupName = string.Empty; 
     foreach (ItemViewModel item in this.Items.ToArray()) 
     { 
      //Insert Group headers 
      if (item.Group.Name != groupName) 
      { 
       groupName = item.Group.Name; 
       this.Items.Insert(this.Items.IndexOf(item), item.Group); 
      } 
     } 
    } 

    public ObservableCollection<object> Items { get; } 
} 


public class GroupViewModel : ViewModelBase 
{ 
    private bool isExtended = true; 

    public GroupViewModel(string name) 
    { 
     this.Name = name; 
    } 

    public string Name { get; } 

    public bool IsExtended 
    { 
     get { return this.isExtended; } 
     set { this.SetProperty(ref this.isExtended, value); } 
    } 
} 

public class ItemViewModel 
{ 
    public ItemViewModel(string name, GroupViewModel group) 
    { 
     this.Name = name; 
     this.Group = group; 
    } 

    public string Name { get; } 
    public GroupViewModel Group { get; } 
} 

Answer 2

Вы не можете сделать что-то упаковки непосредственно, так как группы находятся в одной панели и элементов в каждой группы в своей панели.

У вас есть два варианта:

• Используйте комбинацию ViewModel и DataTemplates для имитации группировки. ItemsSource не будет сгруппировать CollectionView, просто обычную коллекцию, но элементы будут содержать имя группы. В DataTemplate вы увидите заголовок группы для первого элемента в каждой группе.

• Создайте свой собственный контроль, который организует детей в виде групп из коробки. Довольно много работы, но гораздо лучше повторного использования. Я считаю, что это то, как работают группы WinRT GridView и ListView. Возможно, вы можете найти simmilar сторонние элементы управления в WPF