Longlistselector control of WP7

1. Reference: Microsoft. Phone. Controls. Toolkit Space

2. XAML:

<Toolkit: longlistselector X: Name = "longlist" background = "Transparent" margin = "0, 0, 0">
<Toolkit: longlistselector. groupitemspanel>
<Itemspaneltemplate>
<Toolkit: wrappanel orientation = "horizontal"/>
</Itemspaneltemplate>
</Toolkit: longlistselector. groupitemspanel>

<Toolkit: longlistselector. groupitemtemplate>
<Datatemplate>
<Border background = "{staticresource phoneaccentbrush}" width = "99" Height = "99" margin = "6">
<Textblock text = "{binding groupitem }"
Fontfamily = "{staticresource phonefontfamilysemibold }"
Fontsize = "48"
Margin = "8, 0, 0"
Foreground = "white"
Verticalalignment = "bottom"/>
</Border>
</Datatemplate>
</Toolkit: longlistselector. groupitemtemplate>

<Toolkit: longlistselector. groupheadertemplate>
<Datatemplate>
<Border background = "Transparent" margin = ",">
<Border background = "{staticresource phoneaccentbrush }"
Padding = "8, 0, 0" width = "62" Height = "62"
Horizontalalignment = "Left">
<Textblock text = "{binding groupitem }"
Foreground = "# ffffff"
Fontsize = "48"
Fontfamily = "{staticresource phonefontfamilysemilight }"
Horizontalalignment = "left"
Verticalalignment = "bottom"/>
</Border>
</Border>
</Datatemplate>
</Toolkit: longlistselector. groupheadertemplate>

<Toolkit: longlistselector. itemtemplate>
<Datatemplate>
<Grid margin = "12, 8, 0, 8">
<Grid. columndefinitions>
<Columndefinition width = "Auto"/>
<Columndefinition width = "*"/>
</Grid. columndefinitions>
<Stackpanel grid. Column = "1" verticalignment = "TOP">
<Textblock text = "{binding name}" style = "{staticresource phonetextlargestyle}" fontfamily = "{staticresource phonefontfamilysemibold}" margin = "12,-12, 6"/>
<Textblock text = "{binding content}" style = "{staticresource phonetextnormalstyle}" textwrapping = "Wrap" fontfamily = "{staticresource phonefontfamilysemibold}"/>
</Stackpanel>
</GRID>
</Datatemplate>
</Toolkit: longlistselector. itemtemplate>
</Toolkit: longlistselector>

3. backend CS code

Public partial class mainpage: phoneapplicationpage
{
// Constructor
Public mainpage ()
{
Initializecomponent ();
Loaded + = new routedeventhandler (mainpage_loaded );
Longlist. selectionchanged + = new selectionchangedeventhandler (longlist_selectionchanged );
}

Void longlist_selectionchanged (Object sender, selectionchangedeventargs E)
{
If (longlist. selecteditem! = NULL)
{
VaR d = longlist. selecteditem as mydata;
If (D! = NULL)
{

}
}
}

Void mainpage_loaded (Object sender, routedeventargs E)
{
List <group <string, mydata> dt = new list <group <string, mydata> ();
For (INT I = 0; I <10; I ++)
{
DT. Add (new group <string, mydata> (I. tostring (), getcontent (I )));
}
Longlist. itemssource = DT;
}

Ienumerable <mydata> getcontent (int K)
{
List <mydata> dt = new list <mydata> ();
For (INT I = 0; I <10; I ++)
{
DT. Add (New mydata () {name = I. tostring () + "key", content = I. tostring () + "Val "});
}
Return DT;
}
}

Public class group <S, T>: ienumerable <t>
{
Public group (S groupitem, ienumerable <t> items)
{
This. groupitem = groupitem;
This. Items = new list <t> (items );
}

Public override bool equals (Object OBJ)
{
Group <S, T> Other = OBJ as group <S, T>;
Return (other! = NULL) & (groupitem. Equals (other. groupitem ));
}
Public override int gethashcode ()
{
Return groupitem. gethashcode ();
}

Public s groupitem {Get; set ;}
Public ilist <t> items {Get; set ;}

Public ienumerator <t> getenumerator ()
{
Return items. getenumerator ();
}

System. Collections. ienumerator system. Collections. ienumerable. getenumerator ()
{
Return items. getenumerator ();
}
}

Public class mydata
{
Public string name {Get; set ;}
Public String content {Get; set ;}
}
Running effect:

Source code download connection:

/Files/jacle169/longlistselector .rar