Question

in my Silverlight 4 application, I have created a custom control and added Visual States incl. transitions. When the state change is executed the first time, there is no transition, only a rapid change from one state to the other (like there is no transition at all). All following state-changes execute the transition as expected.
I tried to set the initial state in the Constructor, but this doesn’t help. Does anyone know, why there is no transition the first time?

Here is some code from my Custom Control:

[TemplateVisualState(GroupName="CommonState", Name="Expand")]
[TemplateVisualState(GroupName="CommonState", Name="Collapse")]
public class CollapsibleContainer : ContentControl
{
  public CollapsibleContainer()
  {
    this.DefaultStyleKey = typeof(CollapsibleContainer);
    VisualStateManager.GoToState(this, "Expand", false);
  }

  private void BorderHeader_Click(object sender, MouseButtonEventArgs args)
  {
    if (_contentPresenter.Visibility == Visibility.Collapsed)
    {
      _contentPresenter.Visibility = Visibility.Visible;
      VisualStateManager.GoToState(this, "Expand", true);
    }
    else
    {
      _contentPresenter.Visibility = Visibility.Collapsed;
      VisualStateManager.GoToState(this, "Collapse", true);
    }
  }
}

And here is the Definition for the Visual States:

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="CommonState">
    <VisualState x:Name="Expand" />
    <VisualState x:Name="Collapse">
      <Storyboard>
        <DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ImageArrowNormal" d:IsOptimized="True"/>                                        
        <DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ImageArrowHover" d:IsOptimized="True"/>
      </Storyboard>
    </VisualState>

    <VisualStateGroup.Transitions>
      <VisualTransition x:Name="Expand2Collapse" From="Expand" To="Collapse">
        <Storyboard>
          <DoubleAnimation Duration="0:0:0.3" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ImageArrowNormal"/>
          <DoubleAnimation Duration="0:0:0.3" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ImageArrowHover"/>
        </Storyboard>
      </VisualTransition>

      <VisualTransition x:Name="Collapse2Expand" From="Collapse" To="Expand">
        <Storyboard>
          <DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ImageArrowNormal"/>
          <DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ImageArrowHover"/>
        </Storyboard>
      </VisualTransition>
    </VisualStateGroup.Transitions>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Answer 1

Try setting the initial state inside of ApplyTemplate, not the constructor.