Listbox styling and control template issue in silverlight...

Question

Hi all, I have to change Listbox's control templated in a way that it can look like below image

i have added togglebutton in listboxdatatemplate... have one stackpanel in listbox style template... so structure is like border - stackpanel - grid - itemcontainer[boder-togglerbutton]

now to make first and last item curved... what are the ways... if i make stackpanel border curved... when firstitem is selected and its background is changed... it shows a square inside outer border... so i am not able to get look showed below...

any idea?? how to get design done in the way with listbox tht can be showed like image above...

in image 1,3 and 4 items are selected and others are in normal mode...

-thanks in advance

Answer 1

I did it with a listbox in Blend inside of the ItemTemplate by creating a leftBorder and a right Border that are in the same space. The leftBorder is defined with cornerRadius 10,0,0,10 and the right with cornerRadius 0,10,10,0. I then set them both to opacity 0 (you can use visibility if you prefer) and set a ChangePropertyAction on both of thier loaded events conditional on the first and last item in your list.

That is the bad part, I did need to do it conditional on the items in your list but you could define another property and set that to first and last or create multiple templates that you set if there are no more items in the list from the control (not in the template).

If you think this may be interesting to you, let me know and I will post on my blog as well as try to make a couple of adjustments for your situation. I am not sure how to upload a project to here.