windows phone 7 - customize listbox in wp7 -

this maybe easy have no clue start. parse xml value , bind them listbox; better interface, want item display in different background colors. item1 has background color green, item2 has background color white, item3 has bg green, item4 white , on.

listbox item1: bg green item2: bg white item3: bg green item4: bg white

what approach should take achieve this? code below:

                        <listbox name="listbox1" height="502" width="448">                         <listbox.itemtemplate>                             <datatemplate>                                      <stackpanel orientation="horizontal" margin="15,10,25,10" opacitymask="#ff33a82d" background="#ffbeffbe" width="480">                                         <image x:name="imageav" source="images/album_art_default_small.png" height="100" width="100"                                 stretch="uniformtofill" margin="0,0,15,0" />                                         <stackpanel orientation="vertical" verticalalignment="center">                                             <textblock text="{binding track}" fontweight="bold" width="auto" margin="0,0,0,5" foreground="black" />                                                  <textblock text="{binding artist}"  width="auto" foreground="black"/>                                                  <textblock text="{binding album}"  width="auto" foreground="black"/>                                         <stackpanel.background>                                             <solidcolorbrush />                                         </stackpanel.background>                                     </stackpanel>                                     </stackpanel>                                                                </datatemplate>                         </listbox.itemtemplate>                      </listbox> 

code:

    void webclient_openreadcompleted(object sender, openreadcompletedeventargs e)     {         using (var reader = new streamreader(e.result))         {             int[] counter = { 1 };             string s = reader.readtoend();             stream str = e.result;             str.position = 0;             xdocument xdoc = xdocument.load(str);              var data = query in xdoc.descendants("rank")                        select new ranking                        {                            index = counter[0]++,                        //    avlink = (string)query.element("album_gdo").element("avlink"),                            album = (string)query.element("album"),                            track = (string)query.element("track"),                            artist = (string)query.element("artist"),                        };                    //   lb1.itemssource = data;                listbox1.itemssource = data;         }      } 

thanks bunch!

here couple of links information on how use databinding , converters. need use ivalueconverter databind "index" property of items.

data binding in silverlight data binding , value converters

here outline of may like

<stackpanel background="{binding index, converter={staticresource colorconverter}}"> 

and colorformatter can this:

public class colorformatter : ivalueconverter {     string[] colorarr = {"red","blue","green","yellow"};     public object convert(object value, type targettype, object parameter, system.globalization.cultureinfo culture)     {         return (colorarr[(int)value % 4]);     }     public object convertback(object value, type targettype, object parameter, system.globalization.cultureinfo culture)     {         throw new notimplementedexception();     } }