Question

I often find the need to include “away” and “present” type visual states that are used to animate the control being away or visible depending on some other condition.

The “away” state is then usually the one that should be the initial state. To my understanding, there is no way to define an initial state in SL but “base”, which isn’t really a state at all but denotes how the look is with the state manager being not yet active (no state storyboards are running to change the look of the control).

Of course you can design “base” to look like “away”, but that means the default look in Expression Blend is invisible (you can’t “pin” a state permanently either).

To change the initial state I tried

• setting the state in the ctor of the control, which does nothing and
• setting the state in a dispatched call from the ctor or the Loaded event, which both show the wrong state for a split-second.

So the problem appears to be that whatever the visual state manager does, it doesn’t do it right away but needs a noticeable split-second to change the appearance.

(Setting the property directly for bootstrap is another option of course, but only works for UserControls: In templated Controls, I would have to introduce another depprop to template-bind the control template against, which is where I believe overkill starts.)

I suppose I covered it all and I just have to live with an invisible base state?

I use SL4.

Answer 1

I encountered a similar issue when developing a UserControl for WPF in Expression Blend (Note: if you’re developing a custom control instead, see my next section). In that UserControl, I had a child element that I wanted to fade in and grow into existence as an overlay. Like your situation, it made sense in my workflow to first design the overlay element at its “fully grown and visible” state and then shrink it down and set its opacity for a “Hidden” state. In doing this, the overlay is visible in the Base state, but I needed the UserControl’s initial state to be the Hidden state. At this point I had three main relevant states: Base, “Hidden” and “Visible” (these last two are a part of a State group).

Here’s how I solved the initial-state issue. First I applied a GoToStateAction to the root element (to the UserControl) that is triggered by the Loaded event. It tells the UserControl to go right to the “Hidden” state:

<i:Interaction.Triggers>
  <i:EventTrigger>
    <ei:GoToStateAction TargetObject="{Binding ElementName=userControl}" StateName="Hidden"/>
  </i:EventTrigger>
</i:Interaction.Triggers>

Second, I made appropriate transition settings in the State Group for the overlay. There are probably several ways of doing this, but here’s how I did it. First I set the “Default transition” to a pleasing setting, say .4 seconds. Next, I set the transition time from any element (the star icon in Blend) to this “Hidden” state to be 0 seconds (this allows the above-mentioned GoToStateAction to set the “initial” state without the user knowing any different). Then, I set the transition from the “Visible” state to the “Hidden” state to be an appropriate setting (say .4 seconds). Basically this covered all the bases for the transitions. The key was making sure that the “transition” from “any element” to the “Hidden” state was immediate, and then overriding that immediate transition in the case of going from the overlay’s “Visible” to “Hidden” states.

---

Setting an Initial VisualState of a Custom Control

If you’re developing a custom control (rather than a UserControl) and are thus defining your VisualStateManager in the control template, the above method (initiating the VisualState change based on the Loaded event) will probably not work. This is because the visual tree of your control (defined in a Style file) gets applied to your control right before the OnApplyTemplate() override gets called, which is usually after the first Loaded event has fired. So if you try to initiate a VisualState change in response to the Loaded event for a custom control, most likely nothing will happen. Instead, you will need to initiate the state change in your OnApplyTemplate() override code:

public class MyCustomControl : ContentControl
{
    // ... other code ....


    public MyCustomControl()
    {
        // avoid designer errors
        if (DesignerProperties.GetIsInDesignMode(this))
            return;

        Loaded += new RoutedEventHandlerMyCustomControl_Loaded);
    }

    // This probably won't be called until AFTER OnApplyTemplate() gets
    //  called, so don't expect for your control to even have a visual tree
    //  yet when your control is first being contructed at runtime.
    private void MyCustomControl_Loaded(object sender, RoutedEventArgs e)
    {

    }

    public override void OnApplyTemplate()
    {
        // Avoid Visual Studio 2010 designer exceptions
        // (Visual Studio can't handle the VisualState change at design-time)
        if (DesignerProperties.GetIsInDesignMode(this))
            return;

        base.OnApplyTemplate();

        // Now we know that the template has been applied, we have a visual tree,
        //  so state changes will work
        VisualStateManager.GoToState(this, "MyInitialState", false);
    }
}