LongListSelector锁定组头(sticky header )之我的实现
longlistselector如何实现类似于wp7手机程序列表的效果,将屏幕显示范围内的第一个分组的groupheader一直显示在列表的最上方。
国内国外上问的不少,可都没有实现。
无耐之下自己动手搞定,闲话少续,开讲.....
核心思想:取得当前longlistselector控件可视范围内的第一条数据,取得它的分组名称,然后自己制做一个组头(在我的示例它叫做bordergroupname),覆盖在longlistselector控件之上。
[html]
<span style="font-size:12px;"> <border borderthickness="0" borderbrush="white" visibility="visible"
background="black" canvas.zindex="10" width="300" height="80" verticalalignment="top" rendertransformorigin="0.5,0.5" grid.row="1" name="bordergroupname" >
<border.rendertransform>
<compositetransform translatex="-78"/>
</border.rendertransform>
<stackpanel>
<border background="transparent" margin="12,8,0,8" width="300" >
<border background="{staticresource phoneaccentbrush}"
width="62" height="62"
mouseleftbuttondown="border_mouseleftbuttondown"
horizontalalignment="left">
<textblock text="a"
foreground="#ffffff"
fontsize="48"
margin="8,0,0,0"
fontfamily="{staticresource phonefontfamilysemilight}"
horizontalalignment="left"
name="txtgroupname"
verticalalignment="bottom"/>
</border>
</border>
</stackpanel>
</border>
<border borderthickness="0" borderbrush="red" canvas.zindex="0">
<toolkit:longlistselector x:name="regionselector" background="transparent"
groupviewopened="longlistselector_groupviewopened"
groupviewclosing="longlistselector_groupviewclosing"
................................................................</span>
注意:longlistselector放在canvas中会产生冲突,所以仅把bordergroupname要覆盖到longlistselector只能通过<compositetransform translatex="-78"/> 这一句来实现了,但万幸canvas.zindex这个属性指定还是有效果的,为bordergroupname设置canvas.zindex="10",longlistselector的zindex只要比它小就ok了
然后说一下后台逻辑:
首先 提前计算一下每个分组的位置,我是把它保存到变量citygroupsetting,并写到独立存储里
请劳记citygroupsetting,所有分组位置信息都放在它里面
[csharp]
<span style="font-size:12px;">/// <summary>
/// 计算位置
/// 注意:如果控件大小发生改变,刚需重新计算
/// </summary>
private void btngroup_click(object sender, routedeventargs e)
{
debug.writeline("begintime " + system.datetime.now.timeofday.tostring());
list<cityingroup> templist = (list<cityingroup>)(regionselector.itemssource);
list = new list<cityingroup>();
foreach (var item in templist)
{
if (item.hasitems)
list.add(item);
}
citygroupsetting = new citygroupsetting();
citygroupsetting.grouppositions = new list<groupposition>();
citygroupsetting.grouppositions.add(new groupposition("a", 0));
regionselector.scrolltogroup((list[0]));
//由于直接跳转所有组,输出结果不准确.引入计时器
_timer.tick += new eventhandler(_timer_tick);
_timer.start();
debug.writeline("endtime " + system.datetime.now.timeofday.tostring());
}
/// <summary>
/// 计算分组位置,保存为xml文件
/// </summary>
void _timer_tick(object sender, eventargs e)
{
if (groupindex < list.count)
{
cityingroup citygroup = list[groupindex];
if (citygroup.hasitems)
{
if (groupindex > 1)
{
debug.writeline(list[groupindex - 1].key + " max " + scrollbarlist[0].maximum + " value " + scrollbarlist[0].value + " " + system.datetime.now.timeofday.tostring());
citygroupsetting.grouppositions.add(new groupposition(list[groupindex - 1].key, int.parse(scrollbarlist[0].value.tostring())));
}
regionselector.scrolltogroup((citygroup));
}
groupindex++;
}
else
{
_timer.stop();
debug.writeline(list[groupindex - 1].key + " max " + scrollbarlist[0].maximum + " value " + scrollbarlist[0].value + " " + system.datetime.now.timeofday.tostring());
citygroupsetting.grouppositions.add(new groupposition(list[groupindex - 1].key, int.parse(scrollbarlist[0].value.tostring())));
citygroupsetting.save();
}
}</span>
在继续下面之前,先了解一下longlistselector前台的构成
scrollbar*2(一竖一横)+ scrollcontentpresenter --> scrollviewer --> (listbox==>templatedlistbox) --> longlistselector
在滚动longlistselector时,改变的值实际上是scrollbar的value
scrollbarlist[0] 是它的竖向滚动条,也是一会后面都会用到的
以下先取得longlistselect的scrollbar,并捕捉它的valuechanged事件
[csharp]
<span style="font-size:12px;"> list<scrollbar> scrollbarlist = new list<scrollbar>();
void cityselect_loaded(object sender, routedeventargs e)
{
getchildren(regionselector, ref scrollbarlist);
scrollbarlist[0].valuechanged += cityselect_valuechanged;
}
private ilist<scrollbar> getchildren(uielement element, ref list<scrollbar> list)
{
int count = visualtreehelper.getchildrencount(element);
for (int i = 0; i < count; i++)
{
dependencyobject child = visualtreehelper.getchild(element, i);
if (child is scrollbar)
{
list.add((scrollbar)child);
}
uielement uielementchild = child as uielement;
if (uielementchild != null)
{
getchildren(uielementchild, ref list);
}
}
return list;
}</span>
在valuechanged事件中对当前scrollbar的值与citygroupsetting中存储的分组位置信息进行比较,取得groupheader的名称
[csharp]
<span style="font-size:12px;"> bordergroupname.visibility = visibility.visible;
double value = scrollbarlist[0].value;
double v1 = 0;
double v2 = 0;
if (value < .1)
bordergroupname.visibility = visibility.collapsed;
else
{
bordergroupname.visibility = system.windows.visibility.visible;
string groupname = null;
for (int i = 0; i < citygroupsetting.grouppositions.count - 1; i++)
{
var item1 = citygroupsetting.grouppositions[i];
var item2 = citygroupsetting.grouppositions[i + 1];
v1 = item1.value - value;
v2 = item2.value - value;
if (math.abs(v1) < 0.1)
{
groupname = item1.groupname;
break;
}
if (math.abs(v2) < 0.1)
{
groupname = item2.groupname;
break;
}
if (i == citygroupsetting.grouppositions.count - 2 && value >= item2.value)
{
groupname = item2.groupname;
break;
}
//.17 为gruopheader模版与它的容器下边界之间的像素换算出的大概value,其实在实际手指操作中有无它关系不并大,因为手指操作精度并没那么高
//但本着尽量精确,在此把它加上,它与scollbar的maxvalue是成比例的
if (value >= item1.value && value <= item2.value - .17)
{
groupname = item1.groupname;
break;
}
if (groupname != null)
{
txtgroupname.text = groupname;
debug.writeline("groupname " + txtgroupname.text + " v1 " + v1 + " v2 " + v2);
}
}</span>
你可能以为这样就ok了,可事实是总有意想不到的操蛋的问题在等着你 ,上面说了根据valuechanged判断当前的groupheader显内容。
坑爹的问题出现了,两次valuechanged之间会有较大的跨度,具体结果就是在小范围移动的时候,明明你的数据内容都到了b组了,grouphaeder还显示的是a。
请看我的调试信息 y:为移动像素,后面的那个值 是scrollbar.value;
y: -179 0 valuechanged
y: -195 2.47457627118644 valuechanged
y: -331 2.47457627118644 valuechanged
y: -387 5.32203389830508 valuechanged
y: -484 5.32203389830508 valuechanged
y: -544 8.10169491525424 valuechanged
可以看到当我都移动了179像素的时候 ,value还没发生改变,直到195才改变,但它的也并不是很有规律,这点让我很是无语
没法子,经过无数次的测试,在mousemove中写下代码,在固定范围内根据鼠标移动像素来设置
[csharp]
<span style="font-size:12px;"> private void longlistselector_mousemove(object sender, mouseeventargs e)
{
if (isbtndown)
{
y = (int)e.getposition(null).y - straty;
//txtnum.text = y.tostring();
//经测试仅鼠标移动超过22个像素才会引发scrolling事件,个人猜测是ms对触摸屏设置的一个误差范围值
if (math.abs(y) < 200 && math.abs(y) > 22)
{
//像素与scrollbar的value 的比例
//经测试并不绝对准确,它总是有好像会有一定范围的变化
//仅相对准确的
double scalevalue = 78;
double j = -y / scalevalue;
double v = startvalue + j;
debug.writeline("y: " + y + " postion " + v + " scale " + scalevalue);
if (v > 0)
scrollbarlist[0].value = v;
}
}
}</span>
当代码写到这的时候我心说差不过完成了吧,可一测试又发现了其它问题,当我们的listbox到顶得时候,我们继续往下拉,内容会继续往下走一段距离之后不能再继续拉动,放手之后,内容会回弹到原来的位置。所以就涉及到当头问发生压缩的时候,要隐藏我的bordergroupname。
关于这个问题
建议您读一下这篇文章:
x">http://blogs.msdn.com/b/slmperf/archive/2011/06/30/windows-phone-mango-change-listbox-how-to-detect-compression-end-of-scroll-states.aspx
这里介绍的方法是对以上代码的扩展,在7.1中,我们可以拿到verticalcompression和horizontalcompression两种visualstategroup,可以用来检测listbox的上下左右方向的压缩状态。其中也包括了示例代码下载。
至此,核心逻辑已说明完毕。
需注意的:
仅适用于静态数据,且longlistselector大小固定,在longlistselector大小不同时,scrollbar.maxvalue也不同。对应各分组的位置也不同。
在极端情况下分组的名称也是会有显示不准确的时候,比如说拿鼠标一个像素一个像素的去拖,正常手指操作准确性还是可以保证的。
如果希望完全模仿wp的样式,希望你能找出那个scrollbar.value 与像素的准确比例。然后动态的改变bordergroupname的位置。
systemtray最好不要显示,因为打开分组选择的时候,它会自去把systemtray推上去,然后页面整体上移。动画会有明显卡顿感的感觉(可以看一下大众点评的城市选择),选择完成后页面在自已移下来。
摘自 zl1911的专栏