Best Practice - Buttons and Icons

Question

I want to add some buttons to a page in my app. These are to both allow an action and indicate state.

For example I want these:

1. A button that can be used to mute/unmute the current device.

2. A button that can be used to play/pause/stop the current device.

I want the symbol on the button to change as a result of the button being used to alter that state. Now I can use AppBarButtons rather than basic Buttons, but these won't be appearing on a command or app bar but in the page itself, is it OK to use AppBarButtons like this this or must the only be used on a command/app bar?

There are two AppBarButton icon names of relevance to muting: "Mute" and "Volume", so how does one define a single button but bind the image to a state? Is it ideal to use a converter method that returns the icon name as a string depending upon the underlying (bool) muted property?

Cap'n

Answer 1

Hi Cap'n,

I think it's ok to use an AppBarButton outside of the AppBar. Take a look at the official Mail-App. The Buttons for "Respond", "New" and "Delete" are also not in an AppBar, but they look like AppBarButtons. :-)

For your second question: Would make more sense to me to take a look at VisualStateManager and create a new ControlTemplate for the ToggleButton or even for the AppBarToggleButton.

---

Thomas Claudius Huber

"If you can´t make your app run faster, make it at least look & feel extremly fast"

twitter: @thomasclaudiush
homepage: www.thomasclaudiushuber.com
author of: ultimate Windows Store Apps handbook | ultimate WPF handbook | ultimate Silverlight handbook