UWP Composition API - GroupListView（一）
需求：
光看标题大家肯定不知道是什么东西，先上效果图：
这不就是ListView的Group效果吗？？ 看上去是的。但是请听完需求.
1.Group中的集合需要支持增量加载ISupportIncrementalLoading
2.支持UI Virtualization
oh，no。ListView 自带的Group都不支持这2个需求。好吧，只有靠自己撸Code了。。
实现前思考：
仔细想了下，其实要解决的主要问题有2个
数据源的处理 和 GroupHeader的UI的处理
1.数据源的处理
因为之前在写 UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View的时候已经做过这种处理源的工作了，所以方案出来的比较快。
不管有几个group，其实当第1个hasMore等false的时候，我们就可以加载第2个group里面的集合。
我为此写了一个类GroupObservableCollection<T> 它是继承 ObservableCollection<T>, IGroupCollection
public class GroupObservableCollection<T> : ObservableCollection<T>, IGroupCollection { private List<IList<T>> souresList; private List<int> firstIndexInEachGroup = new List<int>(); private List<IGroupHeader> groupHeaders; bool _isLoadingMoreItems = false; public GroupObservableCollection(List<IList<T>> souresList, List<IGroupHeader> groupHeaders) { this.souresList = souresList; this.groupHeaders = groupHeaders; } public bool HasMoreItems { get { if (CurrentGroupIndex < souresList.Count) { var source = souresList[currentGroupIndex]; if (source is ISupportIncrementalLoading) { if (!(source as ISupportIncrementalLoading).HasMoreItems) { if (!_isLoadingMoreItems) { if (this.Count < GetSourceListTotoalCount()) { int count = 0; int preCount = this.Count; foreach (var item in souresList) { foreach (var item1 in item) { if (count >= preCount) { this.Add(item1); if (item == source && groupHeaders[currentGroupIndex].FirstIndex==-1) { groupHeaders[currentGroupIndex].FirstIndex = this.Count - 1; } } count++; } } } groupHeaders[currentGroupIndex].LastIndex = this.Count - 1; return false; } else { return true; } } else { return true; } } else { if (CurrentGroupIndex == source.Count - 1) { if (this.Count < GetSourceListTotoalCount()) { int count = 0; int preCount = this.Count; foreach (var item in souresList) { foreach (var item1 in item) { if (count >= preCount) { this.Add(item1); if (item == source && groupHeaders[currentGroupIndex].FirstIndex == -1) { groupHeaders[currentGroupIndex].FirstIndex = this.Count - 1; } } count++; } } } groupHeaders[currentGroupIndex].LastIndex = this.Count - 1; return false; } else { return true; } } } else { return false; } } } int GetSourceListTotoalCount() { int i = 0; foreach (var item in souresList) { i += item.Count; } return i; } public List<int> FirstIndexInEachGroup { get { return firstIndexInEachGroup; } set { firstIndexInEachGroup = value; } } public List<IGroupHeader> GroupHeaders { get { return groupHeaders; } set { groupHeaders = value; } } public IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count) { return FetchItems(count).AsAsyncOperation(); } private int currentGroupIndex; public int CurrentGroupIndex { get { int count = 0; for (int i = 0; i < souresList.Count; i++) { var source = souresList[i]; count += source.Count; if (count > this.Count) { currentGroupIndex = i; return currentGroupIndex; } else if (count == this.Count) { currentGroupIndex = i; if ((source is ISupportIncrementalLoading)) { if (!(source as ISupportIncrementalLoading).HasMoreItems) { if (!_isLoadingMoreItems) { groupHeaders[i].LastIndex = this.Count - 1; if (currentGroupIndex + 1 < souresList.Count) { currentGroupIndex = i + 1; } } } } else { //next if (currentGroupIndex + 1 < souresList.Count) { currentGroupIndex = i + 1; } } return currentGroupIndex; } else { continue; } } currentGroupIndex = 0; return currentGroupIndex; } } private async Task<LoadMoreItemsResult> FetchItems(uint count) { var source = souresList[CurrentGroupIndex]; if (source is ISupportIncrementalLoading) { int firstIndex = 0; if (groupHeaders[currentGroupIndex].FirstIndex != -1) { firstIndex = source.Count; } _isLoadingMoreItems = true; var result = await (source as ISupportIncrementalLoading).LoadMoreItemsAsync(count); for (int i = firstIndex; i < source.Count; i++) { this.Add(source[i]); if (i == 0) { groupHeaders[currentGroupIndex].FirstIndex = this.Count - 1; } } _isLoadingMoreItems = false; return result; } else { int firstIndex = 0; if (groupHeaders[currentGroupIndex].FirstIndex != -1) { firstIndex = source.Count; } for (int i = firstIndex; i < source.Count; i++) { this.Add(source[i]); if (i == 0) { groupHeaders[currentGroupIndex].FirstIndex = this.Count - 1; } } groupHeaders[currentGroupIndex].LastIndex = this.Count - 1; return new LoadMoreItemsResult() { Count = (uint)source.Count }; } } }
而IGroupCollection是个接口。
public interface IGroupCollection: ISupportIncrementalLoading { List<IGroupHeader> GroupHeaders { get; set; } int CurrentGroupIndex { get; } } public interface IGroupHeader { string Name { get; set; } int FirstIndex { get; set; } int LastIndex { get; set; } double Height { get; set; } } public class DefaultGroupHeader : IGroupHeader { public string Name { get; set; } public int FirstIndex { get; set; } public int LastIndex { get; set; } public double Height { get; set; } public DefaultGroupHeader() { FirstIndex = -1; LastIndex = -1; } }
IGroupHeader 是用来描述Group header的，你可以继承它，添加一些绑定GroupHeader的属性（注意请给FirstIndex和LastIndex赋值-1的初始值）
比如：在效果图中，如果只有全部评论，没有精彩评论，那么后面的导航的按钮是应该不现实的，所以我加了GoToButtonVisibility属性来控制。
public class MyGroupHeader : IGroupHeader, INotifyPropertyChanged { public string Name { get; set; } public int FirstIndex { get; set; } public int LastIndex { get; set; } public double Height { get; set; } public string GoTo { get; set; } private Visibility _goToButtonVisibility = Visibility.Collapsed; public Visibility GoToButtonVisibility { get { return _goToButtonVisibility; } set { _goToButtonVisibility = value; OnPropertyChanged("GoToButtonVisibility"); } } public MyGroupHeader() { FirstIndex = -1; LastIndex = -1; } public event PropertyChangedEventHandler PropertyChanged; void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }
数据源的处理还是比较简单的。
2.GroupHeader的UI的处理
首先我想到的是加一个Grid，然后这些GroupHeader放在里面，通过ScrollViewer的ViewChanged来处理它们。
比较了下ListView的Group效果，Scrollbar是会挡住GroupHeader的，所以我把这个Grid放进了ScrollViewer的模板里面。
GroupListView的模板，这里大家可以看到我加入了个ProgressRing，这个是后面做导航功能需要的，后面再讲。
<ControlTemplate TargetType="local:GroupListView"> <Grid BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> <ScrollViewer x:Name="ScrollViewer" Style="{StaticResource GroupListViewScrollViewer}" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"> <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}" FooterTemplate="{TemplateBinding FooterTemplate}" Footer="{TemplateBinding Footer}" HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/> </ScrollViewer> <ProgressRing x:Name="ProgressRing" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate>
ScrollViewer的模板
<Grid Background="{TemplateBinding Background}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <ScrollContentPresenter x:Name="ScrollContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" Grid.RowSpan="2"/> <Grid x:Name="GroupHeadersCanvas" Grid.RowSpan="2" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> <ContentControl x:Name="TopGroupHeader" Grid.RowSpan="2" Grid.ColumnSpan="2" VerticalAlignment="Top" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/> <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}"/> <ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/> <Border x:Name="ScrollBarSeparator" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" Grid.Column="1" Grid.Row="1"/> </Grid>
下面就是实现对GroupHeader显示的控制了。
很快代码写好了。。运行起来效果还可以。。但是童鞋们说。。你这个跟Composition API 一毛钱关系都没有啊。。
大家别急。。听我说。。模拟器里面运行还行，拿实体机器上运行的时候，当我快速向上或者向下滑动的时候，GroupHeader会出现顿一顿的感觉，卡一下，不会有惯性的感觉。
看到这个，我立马明白了。。不管是ViewChanging或者ViewChanged事件，它们跟Manipulation都不是同步的。
看了上一盘 UWP Composition API - PullToRefresh的童鞋会说，好吧，隐藏的真深。
那我们还是用Composition API来建立GroupHeader和ScrollViewer之间的关系。
1.首先我想的是，当进入Viewport再用Composition API来建立关系，但是很快被我否决了。还是因为ViewChanged这个事件是有惯性的原因，这样没法让创建GroupHeader和ScrollViewer之间的关系的初始数据完全准确。
就是说GroupHeader因为初始数据不正确的情况会造成没放在我想要的位置，只有当惯性停止的时候获取的位置信息才是准确的。
在PrepareContainerForItemOverride中判断是否GroupHeader 的那个Item已经准备添加到ItemsPanel里面。
protected override void PrepareContainerForItemOverride(DependencyObject element, object item) { base.PrepareContainerForItemOverride(element, item); ListViewItem listViewItem = element as ListViewItem; listViewItem.SizeChanged -= ListViewItem_SizeChanged; if (listViewItem.Tag == null) { defaultListViewItemMargin = listViewItem.Margin; } if (groupCollection != null) { var index = IndexFromContainer(element); var group = groupCollection.GroupHeaders.FirstOrDefault(x => x.FirstIndex == index || x.LastIndex == index); if (group != null) { if (!groupDic.ContainsKey(group)) { ContentControl groupheader = CreateGroupHeader(group); ContentControl tempGroupheader = CreateGroupHeader(group); ExpressionAnimationItem expressionAnimationItem = new ExpressionAnimationItem(); expressionAnimationItem.VisualElement = groupheader; expressionAnimationItem.TempElement = tempGroupheader; groupDic[group] = expressionAnimationItem; var temp = new Dictionary<IGroupHeader, ExpressionAnimationItem>(); foreach (var keyValue in groupDic.OrderBy(x => x.Key.FirstIndex)) { temp[keyValue.Key] = keyValue.Value; } groupDic = temp; if (groupHeadersCanvas != null) { groupHeadersCanvas.Children.Add(groupheader); groupHeadersCanvas.Children.Add(tempGroupheader); groupheader.Measure(new Windows.Foundation.Size(this.ActualWidth, this.ActualHeight)); group.Height = groupheader.DesiredSize.Height; groupheader.Height = tempGroupheader.Height = group.Height; groupheader.Width = tempGroupheader.Width = this.ActualWidth; if (group.FirstIndex == index) { listViewItem.Tag = listViewItem.Margin; listViewItem.Margin = GetItemMarginBaseOnDeafult(groupheader.DesiredSize.Height); listViewItem.SizeChanged += ListViewItem_SizeChanged; } groupheader.Visibility = Visibility.Collapsed; tempGroupheader.Visibility = Visibility.Collapsed; UpdateGroupHeaders(); } } else { if (group.FirstIndex == index) { listViewItem.Tag = listViewItem.Margin; listViewItem.Margin = GetItemMarginBaseOnDeafult(group.Height); listViewItem.SizeChanged += ListViewItem_SizeChanged; } else { listViewItem.Margin = defaultListViewItemMargin; } } } else { listViewItem.Margin = defaultListViewItemMargin; } } else { listViewItem.Margin = defaultListViewItemMargin; } }
在UpdateGroupHeader方法里面去设置Header的状态
internal void UpdateGroupHeaders(bool isIntermediate = true) { var firstVisibleItemIndex = this.GetFirstVisibleIndex(); foreach (var item in groupDic) { //top header if (item.Key.FirstIndex <= firstVisibleItemIndex && (firstVisibleItemIndex <= item.Key.LastIndex || item.Key.LastIndex == -1)) { currentTopGroupHeader.Visibility = Visibility.Visible; currentTopGroupHeader.Margin = new Thickness(0); currentTopGroupHeader.Clip = null; currentTopGroupHeader.DataContext = item.Key; if (item.Key.FirstIndex == firstVisibleItemIndex) { if (item.Value.ScrollViewer == null) { item.Value.ScrollViewer = scrollViewer; } var isActive = item.Value.IsActive; item.Value.StopAnimation(); item.Value.VisualElement.Clip = null; item.Value.VisualElement.Visibility = Visibility.Collapsed; if (!isActive) { if (!isIntermediate) { item.Value.VisualElement.Margin = new Thickness(0); item.Value.StartAnimation(true); } } else { item.Value.StartAnimation(false); } } ClearTempElement(item); } //moving header else { HandleGroupHeader(isIntermediate, item); } } }
这里我简单说下几种状态：
1. 在ItemsPanel里面
1）全部在Viewport里面
动画开启，Clip设置为Null
2）部分在Viewport里面
动画开启，并且设置Clip
3）没有在viewport里面
动画开启，Visible 设置为Collapsed
2. 没有在ItemsPanel里面
动画停止。
关于GroupHeader初始状态的设置，这里是最坑的，遇到很多问题。
public void StartAnimation(bool update = false) { if (update || expression == null || visual == null) { visual = ElementCompositionPreview.GetElementVisual(VisualElement); //if (0 <= VisualElement.Margin.Top && VisualElement.Margin.Top <= ScrollViewer.ActualHeight) //{ // min = (float)-VisualElement.Margin.Top; // max = (float)ScrollViewer.ActualHeight + min; //} //else if (VisualElement.Margin.Top < 0) //{ //} //else if (VisualElement.Margin.Top > ScrollViewer.ActualHeight) //{ //} if (scrollViewerManipProps == null) { scrollViewerManipProps = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer); } Compositor compositor = scrollViewerManipProps.Compositor; // Create the expression //expression = compositor.CreateExpressionAnimation("min(max((ScrollViewerManipProps.Translation.Y + VerticalOffset), MinValue), MaxValue)"); ////Expression = compositor.CreateExpressionAnimation("ScrollViewerManipProps.Translation.Y +VerticalOffset"); //expression.SetScalarParameter("MinValue", min); //expression.SetScalarParameter("MaxValue", max); //expression.SetScalarParameter("VerticalOffset", (float)ScrollViewer.VerticalOffset); expression = compositor.CreateExpressionAnimation("ScrollViewerManipProps.Translation.Y + VerticalOffset"); ////Expression = compositor.CreateExpressionAnimation("ScrollViewerManipProps.Translation.Y +VerticalOffset"); //expression.SetScalarParameter("MinValue", min); //expression.SetScalarParameter("MaxValue", max); VerticalOffset = ScrollViewer.VerticalOffset; expression.SetScalarParameter("VerticalOffset", (float)ScrollViewer.VerticalOffset); // set "dynamic" reference parameter that will be used to evaluate the current position of the scrollbar every frame expression.SetReferenceParameter("ScrollViewerManipProps", scrollViewerManipProps); } visual.StartAnimation("Offset.Y", expression); IsActive = true; //Windows.UI.Xaml.Media.CompositionTarget.Rendering -= OnCompositionTargetRendering; //Windows.UI.Xaml.Media.CompositionTarget.Rendering += OnCompositionTargetRendering; }
注释掉了的代码是处理：
当GroupHeader进入Viewport的时候才启动动画，离开之后就关闭动画，表达式就是一个限制，这个就不讲了。
expression = compositor.CreateExpressionAnimation("ScrollViewerManipProps.Translation.Y + VerticalOffset");
可以看到我给表达式加了一个VericalOffset。。嗯。其实Visual的Offset是表示 Visual 相对于其父 Visual 的位置偏移量。
举2个例子，整个Viewport的高度是500，现在滚动条的VericalOffset是100。
1.如果我想把Header（header高度为50）放到Viewport的最下面（Header刚好全部进入Viewport），那么初始的参数应该是哪些呢？
Header.Margin = new Thickness(450);
Header.Clip=null;
expression = compositor.CreateExpressionAnimation("ScrollViewerManipProps.Translation.Y +100");
这样向上滚ScrollViewerManipProps.Translation.Y（-450），Header 就会滚Viewport的顶部。
2.如果我想把Header（header高度为50）放到Viewport的最下面（Header刚好一半全部进入Viewport），那么初始的参数应该是哪些呢？
Header.Margin = new Thickness(475);
Header.Clip=new RectangleGeometry() { Rect = new Rect(0, 0, this.ActualWidth, 25) };
expression = compositor.CreateExpressionAnimation("ScrollViewerManipProps.Translation.Y +100");
当向上或者向下滚动的时候，记得更新Clip值就可以了。
说到为什么要加Clip，因为如果你的控件不是整个Page大小的时候，这个Header会显示到控件外部去，大家应该都是懂得。
这里说下这个里面碰到一个问题。当GroupHeader Viewport之外的时候（在Grid之外的，Margin大于Grid的高度）创建动画，会发现你怎么修改Header属性都是没有效果的。
最终结果的是不会在屏幕上显示任何东西。
实验了下用Canvas发现就可以了，但是Grid却不行，是不是可以认为Visual在创建的时候如果对象不在它父容器的Size范围之内，创建出来都是看不见的？？
这个希望懂得童鞋能留言告诉一下。
把ScrollViewer模板里面的Grid换成Canvas就好了。。
剩下的都是一些计算，计算位置，计算大小变化。
最后就是GoToGroup方法，当跳转的Group没有load出来的时候（也就是FirstIndex还没有值得时候），我们就Load，Load，Load，直到
它有值，这个可能是个长的时间过程，所以加了ProgressRing，找到Index，最后用ListView的API来跳转就好了。
public async Task GoToGroupAsync(int groupIndex, ScrollIntoViewAlignment scrollIntoViewAlignment = ScrollIntoViewAlignment.Leading) { if (groupCollection != null) { var gc = groupCollection; if (groupIndex < gc.GroupHeaders.Count && groupIndex >= 0 && !isGotoGrouping) { isGotoGrouping = true; //load more so that ScrollIntoViewAlignment.Leading can go to top var loadcount = this.GetVisibleItemsCount() + 1; progressRing.IsActive = true; progressRing.Visibility = Visibility.Visible; //make sure user don't do any other thing at the time. this.IsHitTestVisible = false; //await Task.Delay(3000); while (gc.GroupHeaders[groupIndex].FirstIndex == -1) { if (gc.HasMoreItems) { await gc.LoadMoreItemsAsync(loadcount); } else { break; } } if (gc.GroupHeaders[groupIndex].FirstIndex != -1) { //make sure there are enought items to go ScrollIntoViewAlignment.Leading //this.count > (firstIndex + loadcount) if (scrollIntoViewAlignment == ScrollIntoViewAlignment.Leading) { var more = this.Items.Count - (gc.GroupHeaders[groupIndex].FirstIndex + loadcount); if (gc.HasMoreItems && more < 0) { await gc.LoadMoreItemsAsync((uint)Math.Abs(more)); } } progressRing.IsActive = false; progressRing.Visibility = Visibility.Collapsed; var groupFirstIndex = gc.GroupHeaders[groupIndex].FirstIndex; ScrollIntoView(this.Items[groupFirstIndex], scrollIntoViewAlignment); //already in viewport, maybe it will not change view if (groupDic.ContainsKey(gc.GroupHeaders[groupIndex]) && groupDic[gc.GroupHeaders[groupIndex]].Visibility == Visibility.Visible) { this.IsHitTestVisible = true; isGotoGrouping = false; } } else { this.IsHitTestVisible = true; isGotoGrouping = false; progressRing.IsActive = false; progressRing.Visibility = Visibility.Collapsed; } } } }
总结：
这个控件做下来，基本上都是在计算计算计算。。当然也知道了一些Composition API的东西。
其实Vistual的属性还有很多，在做这个控件的时候没有用到，以后用到了会继续分享的。 开源有益，源码GitHub地址。
UWP Composition API - GroupListView（二）
Visual 元素有些基本的呈现相关属性，这些属性都能使用 Composition API 的动画 API 来演示动画。
-
Opacity
表示 Visual 的透明度。 -
Offset
表示 Visual 相对于其父 Visual 的位置偏移量。 -
Clip
表示 Visual 裁剪区域。 -
CenterPoint
表示 Visual 的中心点。 -
TransformMatrix
表示 Visual 的变换矩阵。 -
Size
表示 Visual 的尺寸大小。 -
Scale
表示 Visual 的缩放大小。 -
RotationAxis
表示 Visual 的旋转轴。 -
RotationAngle
表示 Visual 的旋转角度。
有 4 个类派生自 Visual，他们分别对应了不同种类的 Visual，分别是：
-
ContainerVisual
表示容器 Visual，可能有子节点的 Visual，大部分的 XAML 可视元素基本都是该 Visual，其他的 Visual 都也是派生自该类。 -
EffectVisual
表示通过特效来呈现内容的 Visual，可以通过配合 Win2D 的支持 Composition 的 Effects 来呈现丰富多彩的内容。 -
ImageVisual
表示通过图片来呈现内容的 Visual，可以用于呈现图片。 -
SolidColorVisual
表示一个纯色矩形的 Visual 元素
