Question

所以我目前有一个ListView，它显示了一组照片。我希望能够按照拍摄日期对这些照片进行分组。我在我的＆＃34; Photo＆＃34;宾语。但我不确定如何分组照片。我真的不希望这些群体是可扩展/可折叠的。

到目前为止，我有：

<ListView ItemsSource="{Binding FilteredPhotoFiles}" SelectedItem="{Binding SelectedPhotoVM.SelectedPhoto}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}}}"
                            ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}"
                            MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                            ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}"/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="2,4,2,4">
                            <Grid.Background>
                                <SolidColorBrush Color="LightGray" Opacity="0.5"/>
                            </Grid.Background>
                            <Image Source="{Binding PhotoFileInfo.FullName}" Width="300" Height="170" />                              
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

其中FilteredPhotos是按DateTaken排序的列表

Answer 1

您可以使用CollectionViewSource通过在其中添加GroupDescriptors来对任何属性的集合进行排序。

首先在窗口或面板的资源部分下创建 CollectionViewSource ，其源将绑定到实际源，即您的案例中的FilteredPhotoFiles。并添加PropertyDescriptions，其propertyName设置为DateTaken。

<CollectionViewSource x:Key="cvs" Source="{Binding FilteredPhotoFiles}">
    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="DateTaken"/>
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

其次，您必须在ListView上设置 GroupStyle ，以便您对其进行分组。

<ListView.GroupStyle>
    <GroupStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}"/>
            </DataTemplate>
        </GroupStyle.HeaderTemplate>
    </GroupStyle>
</ListView.GroupStyle>

完整的XAML看起来像这样：

<StackPanel>
    <StackPanel.Resources>
        <CollectionViewSource x:Key="cvs" Source="{Binding FilteredPhotoFiles}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="DateTaken"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
    </StackPanel.Resources>
    <ListView ItemsSource="{Binding Source={StaticResource cvs}}" SelectedItem="{Binding SelectedPhotoVM.SelectedPhoto}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}}}"
                    ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}"
                    MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                    ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="2,4,2,4">
                    <Grid.Background>
                        <SolidColorBrush Color="LightGray" Opacity="0.5"/>
                    </Grid.Background>
                    <Image Source="{Binding PhotoFileInfo.FullName}" Width="300" Height="170" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}"/>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>
</StackPanel>

列表视图组。按拍摄日期分组标题下的图片

1 个答案: