CODEWITHSUNDEEP
silverlighttransitionvisualstatemanager
Aaginor
Aaginor

Reputation: 4782

VisualStates: No transition for the first State Change

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>

Upvotes: 0

Views: 451

Answers (1)

Mike Post
Mike Post

Reputation: 6460

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

Upvotes: 1

Related Questions