Windows Phone Image button style

So you are creating your latest windows phone app and would like to add some fancy designed icons or images… But instead of just showing these, they’ll need to react as a button! By the way, we normally use vector data, but that is not always to our disposal. It could be we have a nicely designed icon in several resolutions.

Well that’s easy you think, we’ll just add a button and put that image inside it – here is the code

But when you just use it like this, the image won’t look good! It will have the default button border around it and that’s not something you want.

image

Than you think a little bit about it, maybe search the internet and yes, behold Jeff Wilcox used something back in the wp7 days that could be usefull! An EmptyButtonStyle, it’s a button style stripped to the bare minimum! So you add that and use it – here is the code

But again you’ll notice it’s not perfect… ok it has no visual references anymore to a button, but pressing the image will now also no longer give a visual indication!

image

On wp8, pressing a button, the content will slightly grey out to tell the user he’s pressing that button! So we need to check the state of the button to play with the opacity and enable this visual effect again! Behold the ImageButtonStyle

So when running the app you’ll notice no difference with the empty button style, until you press it! It will now grey out the content a little bit.

As always a test project can be found on github here: ImageButton project

Leave a Reply

Your email address will not be published. Required fields are marked *