Windows Phone Tutorial:Applying Style to ListBox

Previously on listbox, we have gone through how to create listbox and bind data to it.

However, what we see is a list of buttons with very simple style.

So here we will see how can we improve this.

First we have to edit the xaml page in Expression Blend.

Right click on the xaml page in VisualStudio you can see the option.

Then Add a Button first into the page, finally we will delete it.

Then Choose the Button and Click on Object in the Menu, so as to edit the style with a copy.

Give it a name e.g. myButtonStyle

After created a copy, you can simply right click inside the border, and choose edit template so that it allows us to create the button template.

Here I have drawn a rectangle with a gradient fill, i guess it is much better than the original button style =)

Then, in order to show the content of the button we have to add the content presenter into the template

Simply drag it into the Rectangle form the gallery

For having a better view, Margin on all side with 2 pixel is set to the content presenter

Finally, Set the style of the button to our style “myButtonStyle”

Congratulation, all done

Result come out after pressing F5

Thank you for reading this again 🙂

Some other interesting features and tutorials will be posted.

Better for you to subscribe 🙂