2015-05-07 28 views
2

我有一个ItemsControl与WrapPanel作为ItemsHost和多个分组。 得到这个迄今为止要与下面的模板:ItemsControl(WrapPanel)分组应该拆分GroupItems

<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应用概览(不是起始页面,如果你走总览)

这可能吗?

+0

你可以添加一些你试图实现的视觉效果(或草图)吗?谢谢。 – Kryptos

+0

所以这是赏金仍然争夺或解决您的罚款吗? –

+0

我很满意我的解决方案。但是,如果您有任何不同的想法,请分享它们 – Console

回答

2

我在ViewModel中解决了这个问题。我将GroupItem添加到样式类似于(Expandable)GroupHeader的ObservableCollection中。 比我为GroupHeader添加了一个单独的DataTemplate,它在该组上设置了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> 

这是视图模型:

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; } 
} 
1

你不能做这种直接包装的,因为组是在一个面板和物品在各小组在他们自己的小组中。

你有两个选择:

  • 视图模型和的DataTemplates使用组合来模拟分组。 ItemsSource不会分组CollectionView,只是普通的集合,但项目将包含组名称。在DataTemplate中,您将为每个组中的第一项显示组标题。

  • 创建您自己的控件,它会将孩子安排在开箱即用的组中。相当多的工作,但更好的可重用性。我相信这是WinRT GridView和ListView分组的工作原理。也许你可以在WPF中找到simmilar第三方控件