GridVIew/ListView绑定数据,分组显示

均为x:bind绑定,主要是类的设定.

效果:

gridview xaml

使用了 UWP社区toolkit工具包美化,使用原版GridView同理

                        <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False"  ItemContainerStyle="{StaticResource GridviewContainerStyle}" ItemClick="GridViewItem_Click" x:Name="GridView" SelectionMode="None" ItemsSource="{x:Bind cvsGroups.View,Mode=OneWay}" HorizontalAlignment="Stretch"  Margin="0,0,0,0" Grid.Row="1" VerticalAlignment="Stretch" IsItemClickEnabled="True">



                            <GridView.GroupStyle>
                                <GroupStyle>
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate x:DataType="local:ImageGroup">
                                            <StackPanel Padding="10 35 0 0" VerticalAlignment="Top"  Orientation="Horizontal" Height="65">
                                              
                                                <TextBlock VerticalAlignment="Center" Text="{x:Bind GroupName,Mode=OneWay}" FontWeight="Medium" FontSize="16" Foreground="Black" HorizontalAlignment="Left">
                    
                                                </TextBlock>
                                                <TextBlock VerticalAlignment="Center" FontSize="14" Margin="10 0 3 0" >共</TextBlock>
                                                <TextBlock VerticalAlignment="Center" FontSize="14" Text="{x:Bind ImageObjects.Count}"></TextBlock>
                                                <TextBlock VerticalAlignment="Center" FontSize="14" >张</TextBlock>



                                            </StackPanel>
                                            
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                    <GroupStyle.Panel>
                                        
                                        <ItemsPanelTemplate>
                                    
                                            <controls:StaggeredPanel x:Name="adptiveWidth" HorizontalAlignment="Stretch" VerticalAlignment="Top" DesiredColumnWidth="250" />


                                        </ItemsPanelTemplate>
                                    </GroupStyle.Panel>

                                </GroupStyle>
                            </GridView.GroupStyle>


                            <GridView.ItemTemplate>
                                <DataTemplate x:DataType="local:ImageBrushAndFileInfo">






                                    <controls:ImageEx gif:AnimationBehavior.RepeatBehavior="Forever" Name="ImageExControl" IsCacheEnabled="True" PlaceholderSource="/Assets/loading.png" Stretch="Fill"  Source="{x:Bind bitmapImage,Mode=OneWay}">

                                        <ToolTipService.ToolTip>
                                            <ToolTip>
                                                <StackPanel>
                                                    <TextBlock FontSize="16" Text="{x:Bind file.Name,Mode=OneWay}"></TextBlock>
                                                    <TextBlock Text="{x:Bind file.DateCreated.UtcDateTime,Mode=OneWay}"></TextBlock>
                                                </StackPanel>
                                            </ToolTip>
                                        </ToolTipService.ToolTip>


                                    </controls:ImageEx>

                                </DataTemplate>
                            </GridView.ItemTemplate>
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>

                             
                                    <!--<controls:WrapPanel Orientation="Horizontal"  Padding="0,0,0,0" VerticalSpacing="5" HorizontalSpacing="5" />-->
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                        </GridView>

另外:

    <Page.Resources>
        <CollectionViewSource x:Name="cvsGroups" Source="{x:Bind ImageGroups,Mode=OneWay}" ItemsPath="ImageObjects" IsSourceGrouped="True" >
        </CollectionViewSource>
    </Page.Resources>

后台对应的类

	public class ImageGroup : INotifyPropertyChanged
	{
		public string GroupName { get; set; }
		public ObservableCollection<ImageBrushAndFileInfo> _ImageObjects = new ObservableCollection<ImageBrushAndFileInfo>();
		public ObservableCollection<ImageBrushAndFileInfo> ImageObjects
		{
			get { return _ImageObjects; }
			set { SetProperty(ref _ImageObjects, value); }
		}

		public ImageGroup()
		{

		}
		private bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null)
		{
			if (object.Equals(storage, value)) return false;
			storage = value;
			this.OnPropertyChanged(propertyName);
			return true;
		}
		public event PropertyChangedEventHandler PropertyChanged;
		private void OnPropertyChanged([CallerMemberName] string propertyName = "")
		{
			this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
		}
	}





	public class ImageBrushAndFileInfo : INotifyPropertyChanged
	{
		private BitmapImage _bitmapImage;
		public BitmapImage bitmapImage
		{
			get { return _bitmapImage; }
			set { SetProperty(ref _bitmapImage, value); }
		}
		private StorageFile _file;
		public StorageFile file
		{
			get { return _file; }
			set { SetProperty(ref _file, value); }
		}

		// --------
		private string _foldername="folder";
		public string foldername
		{
			get { return _foldername; }
			set { SetProperty(ref _foldername, value); }
		}
		// --------
		//实现INotify接口
		public event PropertyChangedEventHandler PropertyChanged;
		private bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null)
		{
			if (object.Equals(storage, value)) return false;
			storage = value;
			this.OnPropertyChanged(propertyName);
			return true;
		}
		private void OnPropertyChanged([CallerMemberName] string propertyName = "")
		{
			this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
		}
	}

code behind (MainPage)具属性如下,绑定前面的CollectionViewSource

		public ObservableCollection<ImageGroup> _ImageGroups = new ObservableCollection<ImageGroup>();
		public ObservableCollection<ImageGroup> ImageGroups
		{
			get { return _ImageGroups; }
			set { SetProperty(ref _ImageGroups, value); }
		}

设置CollectionViewSource的items属性理论上可以更灵活的构造后台数据对象.