locked
Dynamically change value in storyboard RRS feed

  • Question

  • 	<Storyboard x:Key="TextCancel">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TextMessage">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:4" Value="1"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="TextMessage">
    				<DiscreteStringKeyFrame KeyTime="0" Value="Save Cancelled"/>    
    			</StringAnimationUsingKeyFrames>
    		</Storyboard>

    Hi All....I'm new to this. All I want is a message that opacity fades in and out when i.e. a Save button is click. Fades message in, few seconds and out.

    I used a storyboard to do this, all works fine. BUT depending on the button pressed I would like to change the Value. i.e. 'Record Saved' - 'Save Cancelled' etc

    Presumably though Custom Expression I can add this dynamically? Any clues, am I barking up the wrong tree completely? Thanks Scott

    Monday, May 17, 2010 4:22 PM

All replies

  •  

     

    I have found this easiest to do in code behind.

     

    You can give the keyframes you want to modify names and reference them and their children:

     

    <Storyboard x:Key="TextCancel">
    			<DoubleAnimationUsingKeyFrames x:Name="MyStoryboard" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TextMessage">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:4" Value="1"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="TextMessage">
    				<DiscreteStringKeyFrame KeyTime="0" Value="Save Cancelled"/>  
    			</StringAnimationUsingKeyFrames>
    		</Storyboard>
    

     

    Then you can modify this from code behind:

    You can either destroy and recreate the keyframes or you can modify the properties of existing keyframes

    psuedo code:

    button_click(...)

    {

    if (save)

    {

    dblAnimFrame.KeyFrames.Clear();
    EasingDoubleKeyFrame keyFrame = new EasingDoubleKeyFrame();
    keyFrame.KeyTime = TimeSpan.FromSeconds(0);MyStoryBoard.KeyFrames.Add(keyFrame);

    }
    else
    {

    ..

    }

    // or you could do this, etc
    dblAnimFrame.KeyFrames[0].Value = 1;

    }

    Here is a good reference on working with animations programmatically (although I dont think they list this technique).


    Hope this helps

    Monday, May 17, 2010 4:43 PM
  • Thanks for the quick answer. I will check it out tomorrow and let you know how I get on. Cheers! Scott
    Monday, May 17, 2010 5:30 PM
  • umm. I am having problems seeing the animation in code as I believe using WPF and NOT Silverlight may mean it doesn;t get exposed in the same way.

    Looking into further now. Scott

    Tuesday, May 18, 2010 7:05 AM