列表视图组.以拍摄日期为标题的组照片

本文关键字：标题 日期 照片 视图 列表 | 更新日期: 2023-09-27 18:16:43

所以我目前有一个ListView，其中显示了照片的集合。我希望现在能够按拍摄日期对这些照片进行分组。我的"Photo"对象上有一个可用的日期属性。但是我不确定如何把这些照片分组。我真的不希望组是可扩展/可折叠的。

到目前为止，我有:

<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排序的List

列表视图组.以拍摄日期为标题的组照片

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

首先在窗口或面板的资源部分创建 CollectionViewSource ，其源将绑定到实际源，即在您的情况下的FilteredPhotoFiles。并添加groupdescriptionpropertyname设置为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>
相关文章：