Fixing the VisualState of your Win8 AppBar ToggleButton

by Shawn 4. September 2012 02:37

This post would also be called Fixing the AppBarButtonStyle for ToggleButton support in you Win8 app: Part 2

In my last post I explained how to fix the AppBarButtonStyle to support ToggleButtons. This minor fix does give you the correct style, however there are more problems. I’m not sure if it is a problem with the style, or with the ToggleButton, but after checking and unchecking the button, the state becomes completely messed up.

image

When the ToggleButton does not have an AppBarButtonStyle set, it works great. We only get this problem when we apply one of those styles. With that said, it would seem there is a problem with the style, but the style looks just fine. I’ve seen some solutions that change the Unchecked and/or Normal VisualState back to the original style. I have not seen this working and this should happen by default. It appeared to me that the VisualState was actually getting messed up. I tried subscribing to the Click event and changing the VisualState manually.

void AppBarToggleButton_Click(object sender, RoutedEventArgs e)
{
    ToggleButton button = (ToggleButton)sender;
    VisualStateManager.GoToState(button, button.IsChecked.Value ? "Checked" : "Unchecked", false);
}

I was happy surprised to find that this worked great. Of course you do not want to subscribe to this event for every ToggleButton that you have. So I created a ToggleButton that would fix this (until MS fixes it).

public class AppBarToggleButton : ToggleButton
{
    public AppBarToggleButton()
    {
        this.Click += AppBarToggleButton_Click;
    }
 
    void AppBarToggleButton_Click(object sender, RoutedEventArgs e)
    {
        VisualStateManager.GoToState(this, IsChecked.Value ? "Checked" : "Unchecked", false);
    }
}

<sidenote>ToggleButton has a virtual OnToggle method that you would think would work great, however this method is called before the click event and before IsChecked changes.</sidenote>

Tags:

Comments (5) -

J
J Germany
10/30/2012 2:42:14 PM #

Could it be that the reason is that ToggleButton got new visual states and the grouping is different since Release Preview?
There is only CommonStates and FocusStates now, no CheckStates anymore

See here
msdn.microsoft.com/.../jj709930.aspx

Reply

Grant
Grant Australia
10/31/2012 8:30:52 AM #

Thanks for this post! Your solution worked great. Except for my app I need to set the IsChecked property based on whether an item was a favourite or not. So the style needed to be fixed when calling IsChecked setter, so I did this:

        public bool? IsChecked
        {
            get { return base.IsChecked; }
            set
            {
                base.IsChecked = value;
                VisualStateManager.GoToState(this, base.IsChecked.Value ? "Checked" : "Unchecked", false);
            }
        }

Reply

Andrea Domenichini
Andrea Domenichini Italy
12/8/2012 1:43:43 AM #

Hi,

I tried your solution also with a RadioButton (AppBarRadioButton : RadioButton) but while with ToggleButton is working, with RadioButton, when button is checked and pointer is over, the icon disappears.
It's very strange since RadioButton is a ToggleButton.

Reply

Stefan Olson
Stefan Olson New Zealand
12/11/2012 11:12:38 AM #

FYI, I have implemented a slightly more generic solution using dependency properties here: www.olsonsoft.com/.../...ows-8-Toggle-Buttons.aspx

Reply

Alexander
Alexander Bulgaria
1/29/2013 11:57:28 AM #

Thanks for helping us with this issue .. please send me some mail when MS fix that .. it whould be great.

Reply

Pingbacks and trackbacks (3)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

About the author

Shawn KendrotShawn Kendrot is a Technical Lead at Telvent, specializing in GIS (ArcGIS) Desktop and Silverlight.

Month List

Page List

DISCLAIMER

The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.