wpfc#-4.0controltemplatevisualstatemanagervisualstategroup

Why is this VisualStateManager triggering an animation only once?


I'm trying to create a ControlTemplate for the WPF Expander control, but I have hit a roadblock trying to animate the Expanded and Collasped states.

When the application initially starts, my animation for the Expanded state triggers once, but after that no more.

I'm not sure what's going on here, but here's how my ControlTemplate currently looks like:

    <ControlTemplate TargetType="Expander" x:Key="RightExpander">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Name="ContentColumn" Width="0" />
            </Grid.ColumnDefinitions>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="ExpansionStates">
                    <VisualState x:Name="Expanded">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="(RenderTransform).(TranslateTransform.X)" To="-50" From="0"
                                 Duration="0:0:0.3" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Collasped">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Content" 
Storyboard.TargetProperty="(RenderTransform).(TranslateTransform.X)" 
                                To="50" From="0" Duration="0:0:0.3" />
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border Grid.Row="0" BorderThickness="1" Panel.ZIndex="1" >
                <Grid>
                    <ToggleButton IsChecked="{Binding IsExpanded, Mode=TwoWay,
                          RelativeSource={RelativeSource 
                          TemplatedParent}}"></ToggleButton>
                    <ContentPresenter ContentSource="Header" 
                          RecognizesAccessKey="True" 
                          IsHitTestVisible="False" />
                </Grid>
            </Border>
            <Border Name="Content" Grid.Column="1" BorderThickness="0,1,1,1" 
                CornerRadius="0,5,5,0" Background="Pink" RenderTransformOrigin="0,0">
                <Border.RenderTransform>
                    <TranslateTransform X="0" Y="0" />
                </Border.RenderTransform>
                <ContentPresenter Margin="4" />
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsExpanded" Value="True">
                <Setter TargetName="ContentColumn" Property="Width" Value="{Binding
                    ElementName=Content, Path=DesiredSize.Width}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

(I have some bogus To values just for testing.) What am I doing wrong?


Solution

  • My guess is the misspelling of Collapsed (Collasped)

    Maybe the VSM isn't finding the storyboard because of the spelling mistake