Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
231 views
in Technique[技术] by (71.8m points)

c# - Place storyboard in application resources

I need to use the same storyboard in several places therefore I placed the storyboard inside my Application.Resources . When I try to execute the storyboard the only problem is that I need to reference the target that I want to animate. Here is my storyboard:

    <System:String x:Key="target">border2</System:String>
    <Storyboard x:Key="stHeight">
        <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(FrameworkElement.Height)" 
            Storyboard.TargetName="{DynamicResource target}"> 
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CircleEase EasingMode="EaseOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

the way I animate a different object's height is by changing the dynamic resource target. I was able to do so when the storyboard was in the current window. But now that I want to place it in the application resources I don't know how to reference the target property.


EDIT

The solution that I posted earlier works nice but sometimes it is hard to create complex animations with code. so another alternate solution that I worked out was to create the storyboard with expression blend. so I drag a random control to the main window in expression blend and create a random animation. let's say the animation comes out as:

         <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="grid">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="grid">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="103"/>
            </DoubleAnimationUsingKeyFrames>
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="grid">
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.75,0.5"/>
            </PointAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="grid">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="75"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

then I copy that code and paste it in on my working window NOT IN THE APP.XAML.

and then in my code let's say I have a:

<Border Name="brdBorder" BorderBrush="Silver" BorderThickness="1" Margin="328,104,0,0"  Background="#FFE52E2E" HorizontalAlignment="Left" Width="94" Height="100" VerticalAlignment="Top" >
    <Border.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Border.RenderTransform>
</Border>

for some reason the transform group has to be there in order to animate the object. anyways so let's say that I have that boarder in my working window and I want to animate it with the same animation that I created with expression blend. what I will do in code is:

Storyboard sb1 = FindResource("Storyboard1") as Storyboard;

foreach (var child in sb1.Children)
{
    Storyboard.SetTargetName(child, brdBorder.Name);
}

sb1.Begin(this);

and then I am able to animate that border on my working window. The nice part of this is that I am able to apply the same animation to multiple objects (that is the purpose of creating a resource I think) the problem comes when I try to place the storyboard in a resource dictionary or in the app.xaml file. when I do that, c# is able to find the storyboard but the properties of the storyboard are read only therefore I get the error:

Cannot set a property on object 'System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames' because it is in a read-only state.

The reason why I wanted to do this is to apply the same animation to multiple objects. A work around solution was to build the basic animation with code and then the more complex animation such as the easing function etc save it as a resource. Let me show you what I mean.

In my resources file I placed the following resource:

   <EasingDoubleKeyFrame x:Key="pleaseWork">
        <EasingDoubleKeyFrame.EasingFunction >
            <BackEase EasingMode="EaseOut" Amplitude="1"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>

In expresion blend you can build a more complex ease function. Then with code behind I will create a basic storyboard:

DoubleAnimation animation = new DoubleAnimation();
            animation.To = 336;   // final value
            //animation.From = 0;
            //animation.BeginTime = TimeSpan.FromSeconds(0); 
            animation.Duration = new Duration(TimeSpan.FromSeconds(5)); // how much time should animation last
            // here comes the magic:
            // note that I can bind to EasingDoubleKeyFrame in my resource file in xaml
            animation.EasingFunction = ((EasingDoubleKeyFrame)FindResource("pleaseWork")).EasingFunction; // apply the easing function 
            Storyboard.SetTarget(animation, groupBox1);  // what object will be animated?
            Storyboard.SetTargetProperty(animation, new PropertyPath(FrameworkElement.HeightProperty)); // what property will be animated

            Storyboard sb = new Storyboard();
            sb.Children.Add(animation);
            sb.Begin();

This enabled me to use the same storyboard on multiple objects.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You do not need to reference the target anywhere, you can just create one locally, this is one of the great features of dynamic resource lookup, e.g.

<!-- No more target here! -->
<Application.Resources>
    <Storyboard x:Key="SB_Height" x:Shared="False">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
                Storyboard.TargetName="{DynamicResource AnimationTarget}">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CircleEase EasingMode="EaseOut" />
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Application.Resources>
<!-- Somewhere else... -->
<Button Name="mybutton" Content="Test" Height="20">
    <Button.Resources>
        <sys:String x:Key="AnimationTarget">mybutton</sys:String>
    </Button.Resources>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard Storyboard="{StaticResource SB_Height}"/>
        </EventTrigger>
    </Button.Triggers>
</Button>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...