Windows 8 - cache paged button visual state not changing on navigate back

Question

I have a small (but annoying) problem. You can quickly replicate it by doing the following:

New Project > Windows Store > Blank App (XAML)

Add a button to the grid. This also works with the default style. (note: TextButtonStyle is defined in SimpleStyles.xaml)

<Button Click="Click" Style="{StaticResource TextButtonStyle}" Content="Page 2"/>

Add the function to the code behind file:

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
  Frame.Navigate(typeof (Page2));            
}

Next create another page, add the button, and navigate back to the MainPage in the Click event.

Next set on both pages add NavigationCacheMode="Enabled". For convenience set one of the buttons to be Left aligned and the other one Right.

Run the app. Move the mouse over the button. The state changes to reflect this. Click the button. Again the color changes. On the second page, do the same. On returning to the first page, the button is still in it's "PointerOver" visual state, since there was no PointerExited event called on the button.

How can I fix this? VisualStateMananger.GoToState() doesn't work.

Answer 1

We encountered a similar issue. We noticed that the state 'resets' when you hide the control. We solved it, the dirty way:

void GridView_ItemClick(object sender, ItemClickEventArgs e)
{
    var ctrl = this.ItemContainerGenerator.ContainerFromItem(e.ClickedItem);
    ((Control)ctrl).Visibility = Visibility.Collapsed;
    ((Control)ctrl).Visibility = Visibility.Visible;
}

Maybe you could try to do the following (didn't test this):

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
    ((Control)sender).Visibility = Visibility.Collapsed;
    ((Control)sender).Visibility = Visibility.Visible;
    Frame.Navigate(typeof (Page2));            
}