locked
Blend 2.5 Storyboard problem RRS feed

  • Question

  • Greetings,

     I'm working on a video player app for my company's website and I've run into a snag.  I've created some test animations for the custom buttons I've made and for some reason they're no longer working in Blend.  The day I created them I know they were all working, I was able to switch back and forth to each storyboard in the Animation view and everything worked fine.  I don't think I've changed anything since then that should effect it.

    First I tried to hook up the events and try the animations on my test page.  I tried the onHover and onClick for one of the buttons and the result was when either of those events fired, my whole video player would completely disappear and would not come back until I reloaded the page.

    In Blend, when I try to open one of the storyboards I get the following error:

    -----------------------------------------------------------------------------------
    Exception: Catastrophic Failure (exception from HRESULT:0x8000FFFF (E_UNEXPECTED))

    StackTrace:

    at MS.Internal.XcpImports.MethodEx(IntPtr ptr, String name, CValue[] cvData)

    at System.Windows.DependencyObject.MethodEx(String methodName, CValue[] cvData)

    at System.Windows.Media.Animation.Storyboard.Begin()

    InnerExceptions: None
    -----------------------------------------------------------------------------------

     I used the "Make Control" option to move my play button to its on XAML page and I've moved some of it's animations over as well but I'm still having the same problem in Blend.  Here is the code:

     
    -----------------------------------------------------------------------------------

    <UserControl
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        x:Class="Video_Player_Large.btnPlayControl"
        d:DesignWidth="50" d:DesignHeight="50">
        <UserControl.Resources>
            <Storyboard x:Name="playHover">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="playGlow" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Name="playClick">
                <ColorAnimationUsingKeyFrames Storyboard.TargetName="playGlow" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" BeginTime="00:00:00">
                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#590097FF"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#000097FF"/>
                </ColorAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="playGlow" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" BeginTime="00:00:00">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.70999997854232788"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.781"/>
                </DoubleAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames Storyboard.TargetName="playShine" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" BeginTime="00:00:00">
                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#63FFFFFF"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#33FFFFFF"/>
                </ColorAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="playInnerGlow" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.8"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="playShine" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.7"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="playGlow" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </UserControl.Resources>

        <Grid x:Name="LayoutRoot" >
            <Button Content="Play" x:Name="btnPlay" Click="onPlayClick" MouseEnter="onPlayMouseEnter" MouseLeave="onPlayMouseLeave" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch">
                <Button.Template>
                    <ControlTemplate>
                        <Canvas Height="50" Width="50" Canvas.Left="249.936" Canvas.Top="544.982" x:Name="canPlay">
                            <Ellipse Height="40.5" Width="40.5" Canvas.Left="4.897" Canvas.Top="4.518" Fill="#FF070082" x:Name="playBack">
                                <Ellipse.Stroke>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF00A3FF"/>
                                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Ellipse.Stroke>
                            </Ellipse>
                            <Ellipse Height="40.5" Width="40.5" Canvas.Left="4.897" Canvas.Top="4.518" x:Name="playInnerGlow">
                                <Ellipse.Fill>
                                    <RadialGradientBrush GradientOrigin="0.5,0.523999989032745">
                                        <RadialGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.814" ScaleY="1.812"/>
                                                <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                                <TranslateTransform X="-0.008" Y="0.699"/>
                                            </TransformGroup>
                                        </RadialGradientBrush.RelativeTransform>
                                        <GradientStop Color="#FFFFFFFF" Offset="0.147"/>
                                        <GradientStop Color="#360200FF" Offset="1"/>
                                        <GradientStop Color="#BE00AEFF" Offset="0.554"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                                <Ellipse.Stroke>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF00A3FF"/>
                                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                                    </LinearGradientBrush>
                                </Ellipse.Stroke>
                            </Ellipse>
                            <Path Height="19.246" Width="14.519" Stretch="Fill" Data="M271.625,585 C271.625,585.375 271.75,598.25 271.75,598.25 L281.375,592.25 z" Fill="#FF333333" Canvas.Left="20.447" Canvas.Top="15.626" x:Name="playArrowBack"/>
                            <Path Height="16.49" Width="12.44" Canvas.Left="21.239" Canvas.Top="16.993" Fill="#FFDEE1FF" Stretch="Fill" Data="M271.625,585 C271.625,585.375 271.75,598.25 271.75,598.25 L281.375,592.25 z" x:Name="playArrow"/>
                            <Path Height="22.954" Width="40.5" Canvas.Left="4.897" Canvas.Top="4.518" Stretch="Fill" Data="M17.5,0 C27.164984,1.326103E-07 35,7.8350167 35,17.5 L34.963268,17.864359 C34.149662,19.004215 33.017433,19.750246 31.041922,19.750666 C25.041307,19.751947 21.04162,14.916636 16.958345,15.083347 C12.875069,15.250058 10.20854,19.6674 4.0420742,19.833746 C2.3993976,19.87805 1.1416074,19.262886 0.091099963,18.403692 C0.0077646622,18.106714 -2.9649286E-07,17.804264 8.4980911E-12,17.5 C-2.9649286E-07,7.8350167 7.8350163,1.326103E-07 17.5,0 z" x:Name="playShine">
                                <Path.Fill>
                                    <RadialGradientBrush GradientOrigin="0.497999995946884,0.769999980926514">
                                        <RadialGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.963" ScaleY="1.701"/>
                                                <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                                <TranslateTransform X="0.008" Y="0.356"/>
                                            </TransformGroup>
                                        </RadialGradientBrush.RelativeTransform>
                                        <GradientStop Color="#7EFFFFFF"/>
                                        <GradientStop Color="#E4FFFFFF" Offset="1"/>
                                        <GradientStop Color="#9AFFFFFF" Offset="0.915"/>
                                        <GradientStop Color="#63FFFFFF" Offset="0.7369999885559082"/>
                                    </RadialGradientBrush>
                                </Path.Fill>
                            </Path>
                            <Ellipse Height="50" Width="50" x:Name="playGlow" Opacity="0">
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <RadialGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.061" ScaleY="1.061"/>
                                                <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                <RotateTransform CenterX="0.5" CenterY="0.5"/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </RadialGradientBrush.RelativeTransform>
                                        <GradientStop Color="#590097FF"/>
                                        <GradientStop Color="#00000000" Offset="1"/>
                                        <GradientStop Color="#7F0094FF" Offset="0.71"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                        </Canvas>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </Grid>
    </UserControl>
    -----------------------------------------------------------------------------------

    Any help would be appreciated.  I'm kind of new to all of this so its probably something simple.

    Thanks,

    Jason Salmans 

    Monday, May 5, 2008 10:29 AM

Answers

  • Hello, first problem is: Elements in ControlTemplate resides in a separate name scope. So the Storyboards in the UserControl.Resources section can't find any elements to animate. You should put the Storyboards in the Cavans's Resources inside the ControlTemplate.

    Another problem is: Rather than handle the various events yourself, you should let the code written in the Button Control to handle them. Just name your root Canvas as "RootElement", and name your Storyboards as "MouseOver State", "Pressed State", "Normal State", etc, so that they'll be played automatically when the condition meets. Something like this will do it:

     <ControlTemplate TargetType="Button">
    <Canvas Height="50" Width="50" Canvas.Left="249.936" Canvas.Top="544.982" x:Name="RootElement">
    <Canvas.Resources>
    <Storyboard x:Name="MouseOver State">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="playGlow" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="Pressed State">
    <ColorAnimationUsingKeyFrames Storyboard.TargetName="playGlow" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" BeginTime="00:00:00">
    <SplineColorKeyFrame KeyTime="00:00:00" Value="#590097FF"/>
    <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#000097FF"/>
    </ColorAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="playGlow" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" BeginTime="00:00:00">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.70999997854232788"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.781"/>
    </DoubleAnimationUsingKeyFrames>
    <ColorAnimationUsingKeyFrames Storyboard.TargetName="playShine" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" BeginTime="00:00:00">
    <SplineColorKeyFrame KeyTime="00:00:00" Value="#63FFFFFF"/>
    <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#33FFFFFF"/>
    </ColorAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="playInnerGlow" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.8"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="playShine" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.7"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="playGlow" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    </Canvas.Resources>
    <Ellipse Height="40.5" Width="40.5" Canvas.Left="4.897" Canvas.Top="4.518" Fill="#FF070082" x:Name="playBack">
    <Ellipse.Stroke>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF00A3FF"/>
    <GradientStop Color="#FFFFFFFF" Offset="1"/>
    </LinearGradientBrush>
    </Ellipse.Stroke>
    </Ellipse>
    <Ellipse Height="40.5" Width="40.5" Canvas.Left="4.897" Canvas.Top="4.518" x:Name="playInnerGlow">
    <Ellipse.Fill>
    <RadialGradientBrush GradientOrigin="0.5,0.523999989032745">
    <RadialGradientBrush.RelativeTransform>
    <TransformGroup>
    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.814" ScaleY="1.812"/>
    <SkewTransform CenterX="0.5" CenterY="0.5"/>
    <RotateTransform CenterX="0.5" CenterY="0.5"/>
    <TranslateTransform X="-0.008" Y="0.699"/>
    </TransformGroup>
    </RadialGradientBrush.RelativeTransform>
    <GradientStop Color="#FFFFFFFF" Offset="0.147"/>
    <GradientStop Color="#360200FF" Offset="1"/>
    <GradientStop Color="#BE00AEFF" Offset="0.554"/>
    </RadialGradientBrush>
    </Ellipse.Fill>
    <Ellipse.Stroke>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF00A3FF"/>
    <GradientStop Color="#FFFFFFFF" Offset="1"/>
    </LinearGradientBrush>
    </Ellipse.Stroke>
    </Ellipse>
    <Path Height="19.246" Width="14.519" Stretch="Fill" Data="M271.625,585 C271.625,585.375 271.75,598.25 271.75,598.25 L281.375,592.25 z" Fill="#FF333333" Canvas.Left="20.447" Canvas.Top="15.626" x:Name="playArrowBack"/>
    <Path Height="16.49" Width="12.44" Canvas.Left="21.239" Canvas.Top="16.993" Fill="#FFDEE1FF" Stretch="Fill" Data="M271.625,585 C271.625,585.375 271.75,598.25 271.75,598.25 L281.375,592.25 z" x:Name="playArrow"/>
    <Path Height="22.954" Width="40.5" Canvas.Left="4.897" Canvas.Top="4.518" Stretch="Fill" Data="M17.5,0 C27.164984,1.326103E-07 35,7.8350167 35,17.5 L34.963268,17.864359 C34.149662,19.004215 33.017433,19.750246 31.041922,19.750666 C25.041307,19.751947 21.04162,14.916636 16.958345,15.083347 C12.875069,15.250058 10.20854,19.6674 4.0420742,19.833746 C2.3993976,19.87805 1.1416074,19.262886 0.091099963,18.403692 C0.0077646622,18.106714 -2.9649286E-07,17.804264 8.4980911E-12,17.5 C-2.9649286E-07,7.8350167 7.8350163,1.326103E-07 17.5,0 z" x:Name="playShine">
    <Path.Fill>
    <RadialGradientBrush GradientOrigin="0.497999995946884,0.769999980926514">
    <RadialGradientBrush.RelativeTransform>
    <TransformGroup>
    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.963" ScaleY="1.701"/>
    <SkewTransform CenterX="0.5" CenterY="0.5"/>
    <RotateTransform CenterX="0.5" CenterY="0.5"/>
    <TranslateTransform X="0.008" Y="0.356"/>
    </TransformGroup>
    </RadialGradientBrush.RelativeTransform>
    <GradientStop Color="#7EFFFFFF"/>
    <GradientStop Color="#E4FFFFFF" Offset="1"/>
    <GradientStop Color="#9AFFFFFF" Offset="0.915"/>
    <GradientStop Color="#63FFFFFF" Offset="0.7369999885559082"/>
    </RadialGradientBrush>
    </Path.Fill>
    </Path>
    <Ellipse Height="50" Width="50" x:Name="playGlow" Opacity="0">
    <Ellipse.Fill>
    <RadialGradientBrush>
    <RadialGradientBrush.RelativeTransform>
    <TransformGroup>
    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.061" ScaleY="1.061"/>
    <SkewTransform CenterX="0.5" CenterY="0.5"/>
    <RotateTransform CenterX="0.5" CenterY="0.5"/>
    <TranslateTransform/>
    </TransformGroup>
    </RadialGradientBrush.RelativeTransform>
    <GradientStop Color="#590097FF"/>
    <GradientStop Color="#00000000" Offset="1"/>
    <GradientStop Color="#7F0094FF" Offset="0.71"/>
    </RadialGradientBrush>
    </Ellipse.Fill>
    </Ellipse>
    </Canvas>
    </ControlTemplate>

    For more information about ControlTemplate, please refer to http://msdn.microsoft.com/en-us/library/cc278069(vs.95).aspx.

    Wednesday, May 7, 2008 12:47 AM