locked
Weird Animation Problem (John Lorenzen) - 1/3/2008 9:23 PM PST RRS feed

  • Question

  • By: John Lorenzen


    Looking for some help.

    I have 2 storyboards in my control template the first one sbOpenControl
    works but the second storyboard sbCloseControl only partially works. Both
    work correctly in Blend but only sbOpenControl works when I run the program.
    The funny thing is that only the opacity animation of sbCloseControl seems to
    work not the RenderTransform animation of the 2 Grids, but this similar thing
    works in the sbOpenControl

    Here is the xaml for the storyboards
    <ControlTemplate.Resources>
    <Storyboard x:Key="sbOpenControl">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
    Storyboard.TargetName="grdTop"
    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
    Storyboard.TargetName="grdBottom"
    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
    Storyboard.TargetName="lbAvidQueue"
    Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="sbCloseControl">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
    Storyboard.TargetName="lbAvidQueue"
    Storyboard.TargetProperty="(UIElement.Opacity)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
    Storyboard.TargetName="grdTop"
    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="43"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
    Storyboard.TargetName="grdBottom"
    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="-48"/>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    </ControlTemplate.Resources>

    Here is the xaml for the control
    <Grid Margin="0,0,0.689,0" VerticalAlignment="Top" Height="34.667"
    x:Name="grdTop" RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
    <TransformGroup>
    <ScaleTransform ScaleX="1" ScaleY="1"/>
    <SkewTransform AngleX="0" AngleY="0"/>
    <RotateTransform Angle="0"/>
    <TranslateTransform X="0" Y="43"/>
    </TransformGroup>
    </Grid.RenderTransform>
    <Path Stretch="Fill" Stroke="{x:Null}" Data="M80,14.333333
    L62,35.000333 106.33333,36.333665 117.66709,47.000824 350.0395,48.000839
    361.03953,36.333997 405.0396,36.667335 387.37289,15.000343 z"
    x:Name="PathTop" Opacity="0.6" RenderTransformOrigin="0.491,0.439">
    <Path.Fill>
    <SolidColorBrush Color="{DynamicResource Color4}"/>
    </Path.Fill>
    <Path.RenderTransform>
    <TransformGroup>
    <ScaleTransform ScaleX="1" ScaleY="1"/>
    <SkewTransform AngleX="0" AngleY="0"/>
    <RotateTransform Angle="0"/>
    <TranslateTransform X="0" Y="0"/>
    </TransformGroup>
    </Path.RenderTransform>
    </Path>
    <Label Content=" Document Queue" Style="{DynamicResource
    TitleFontStyle}" FontWeight="Bold" x:Name="lblGaugeTopTitle"
    Margin="68.293,0,79.604,1.22" HorizontalContentAlignment="Center"
    d:LayoutOverrides="Height">
    <Label.Foreground>
    <SolidColorBrush Color="{DynamicResource Color4}"/>
    </Label.Foreground>
    </Label>
    </Grid>
    <Grid Margin="0,0,0,-3.366" VerticalAlignment="Bottom" Height="37.667"
    x:Name="grdBottom" RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
    <TransformGroup>
    <ScaleTransform ScaleX="1" ScaleY="1"/>
    <SkewTransform AngleX="0" AngleY="0"/>
    <RotateTransform Angle="0"/>
    <TranslateTransform X="0" Y="-48"/>
    </TransformGroup>
    </Grid.RenderTransform>
    <Path Stretch="Fill" Stroke="{x:Null}" Data="M80,14.333333
    L62,35.000333 106.33333,36.333665 117.66709,47.000824 350.0395,48.000839
    361.03953,36.333997 405.0396,36.667335 387.37289,15.000343 z"
    x:Name="PathBottom" Opacity="0.6" RenderTransformOrigin="0.491,0.439">
    <Path.Fill>
    <SolidColorBrush Color="{DynamicResource Color4}"/>
    </Path.Fill>
    <Path.RenderTransform>
    <TransformGroup>
    <ScaleTransform ScaleX="1" ScaleY="-1"/>
    <SkewTransform AngleX="0" AngleY="0"/>
    <RotateTransform Angle="0"/>
    <TranslateTransform X="0" Y="0"/>
    </TransformGroup>
    </Path.RenderTransform>
    </Path>
    <Label Content="{Binding Path=Items.Count, Converter={StaticResource
    CountToDescriptionConverter}, ElementName=lbQueue, Mode=Default}"
    Style="{DynamicResource DataFontStyle}" FontWeight="Bold"
    x:Name="lblQueueCount" Margin="88.293,3.548,80.293,4.919"
    d:LayoutOverrides="Height" HorizontalContentAlignment="Center">
    <Label.Foreground>
    <SolidColorBrush Color="{DynamicResource Color4}"/>
    </Label.Foreground>
    </Label>
    </Grid>
    Friday, February 22, 2008 3:45 PM