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 🙂

Advertisements

One thought on “Windows Phone Tutorial:Applying Style to ListBox

  1. Hi Steve,

    great ! IT was easy to follow you, thanks.

    But in “Windows Phone Tutorial:Applying Style to ListBox” I can’t follow your steps.

    Regards,
    Martin

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s