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的专栏
上一篇： Windows多线程
下一篇： wp7音乐播放器