How to make a specific GoToStateAction-with-DataTrigger run when element is loaded

Question

I have a DataTemplate. It has two visual states - Expanded, Collapsed. I added 2 GoToStateAction-s. The first one goes to the Expanded state when a data context property becomes True, and the second one goes to the Collapsed state when that same property becomes False.

A Checkbox is part of the template and bound to that property. So when the Checkbox gets checked/unchecked the necessary transition happens.

But none of the actions are applied on startup. The Checkbox is Checked but the Expanded visual state is not applied.

Is it possible using the Visual State Manager to have all items loaded with states applied according to the property values?

Answer 1

You just need to add another GoToStateAction that sets the desired states upon the OnLoad event firing.

update

I haven't tested this, but I think you could use a custom TargetedTriggerAction that derives from GoToStateAction:

public class GoToStateIfCheckedAction : GoToStateAction
{
    protected override void Invoke(object parameter)
    {
        var toggleButton = Target as ToggleButton;
        if (toggleButton != null && (!toggleButton.IsChecked.HasValue || !toggleButton.IsChecked.Value))
        {
            // if the Target is a ToggleButton, and it is in an indeterminate or unchecked state, don't invoke
            return;
        }

        // if the Target is not a ToggleButton, or if the ToggleButton is checked, go ahead and invoke the action
        base.Invoke(parameter);
    }
}

When attached to a ToggleButton, such as CheckBox, this action will only be executed when IsChecked == true.

You could trigger this from the OnLoad event and it will go to the state if the box is checked, or do nothing if unchecked.