VisualStateManager.GoToState not working in Universal Windows app's ToggleButton in UserControl

Question

I have a Universal Windows app with a MainPage.xaml that has the following code. The VisualStateManager's GoToState is not working. Nothing happens.

    public MainPage()
    {            
        ...
        VisualStateManager.GoToState(BottomToolBar.WifiButton, "Checked", false);
    }

BottomToolBar is a User Control that has a ToggleButton with x:Name="WifiBtn". Here is the code-behind this User Control:

    public sealed partial class BottomToolBar : UserControl
{
    public BottomToolBar()
    {
        this.InitializeComponent();
    }

    private void WifiBtn_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
    {
        var parentPage = GetParentsPage(this);
        if(parentPage != null)
        {
            parentPage.MapItemsManager.ToggleActivate(MapItemsType.ISF);
        }
    }

    public ContentControl WifiButton
    {
        get
        {
            return WifiBtn;
        }
    }

    ...

}

As you can see I have a public property called WifiButton which returns a ContentControl (You cannot return a ToggleButton).

In App.xaml I have an Application Resource that styles the ToggleButton whereby the VisualState "Checked" changes the Opacity of the ToggleButton. Something like:

<Application.Resources>
    <Style x:Key="BottomToggleButtonStyle" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="RootGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>

I thought I had everything in place to get that call to GoToState to work. The goal is the initialize the toggle button's Opacity to 0.5 when the application starts. In other words, in the MainPage constructor. But when I run the app, the Opacity is not set. The line seems to be completely ignored. I found other similar threads in SO with the same problem but little to no answers.

Answer 1

In order to make the VisualStateManager works you should wait until the Page is Loaded so I added the following in the page constructor and works:

this.Loaded += (s, e) =>
        {
            VisualStateManager.GoToState(BottomToolBar.WifiButton, "Checked", false);
        };

Answer 2

For your case, make sure the following 3 points

1. you need to use ToggleButton's IsChecked propery to change the state.

     var btn = BottomToolBar.WifiButton as ToggleButton; btn.IsChecked = true; 

2. make sure you've set the Opacity to 0.5 in visual state as you want.

3. do it in page's loaded event as Juan suggested.

But please note : it's a default system control, and most of its default states are associated with Property(For example the "Checked" state is associated with IsChecked Property). Try to imagine, if we simply change the state, but didn't change the property. Things will mess up.

So here are my suggestions:

For default states of control, do not use GoToState, but use property change instead.

For extended states of control, it's recommended to let the control to handle its state by itself, unless you have very special requirements.