none
关于Storyboard在不同对象的重用 RRS feed

  • 问题

  • Hi and thanks。

    我现在想在Silverlight 3里,实现这么一个效果。在XAML中,设置了一段Storyboard的动画。我现在需要将这段动画应用在不同的控件上,也就是使得这个资源得到重用。项目可能需要跨不同的cs文件调用这段Storyboard,也就是说abc.cs和bac.cs需要用这段XAML中的Storyboard,请问有没有比较方便的重用办法?如果有的话,是否可以给一段示例代码呢?

    这就类似于一段Java代码,可以封装在JAR包中能够方便的被不同的类调用:)

    谢谢 thanks again ~
    2010年3月25日 15:06

答案

  • 两种方法: 1.你可以把Storyboard 放资源文件里面这样就可以重用了 2.你可以自定义一个动画,不过这样就需要写大量的代码。

    Dictionary1.xaml

    <ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames  BeginTime="00:00:00"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.9000000" Value="286.5"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.9000000" Value="4.5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </ResourceDictionary>
    

    MainPage.xaml

    <UserControl x:Class="SilverlightApplication14.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        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" d:DesignWidth="640" d:DesignHeight="480">
    	<UserControl.Resources>
    		
    	</UserControl.Resources>
      <Grid x:Name="LayoutRoot">
      	<Rectangle x:Name="rectangle" Fill="#FFDC0F0F" Stroke="Black" HorizontalAlignment="Left" Margin="113,219,0,126" Width="207" RenderTransformOrigin="0.5,0.5">
      		<Rectangle.RenderTransform>
      			<TransformGroup>
      				<ScaleTransform/>
      				<SkewTransform/>
      				<RotateTransform/>
      				<TranslateTransform/>
      			</TransformGroup>
      		</Rectangle.RenderTransform>
      	</Rectangle>
    
            <Rectangle x:Name="rectangle2" Fill="#FF16346C" Stroke="Black" HorizontalAlignment="Left" Margin="113,55,0,0" Width="207" RenderTransformOrigin="0.5,0.5" Height="135" VerticalAlignment="Top">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
    
        </Grid>
    </UserControl>
    

     

    MainPage.xaml.cs

    using System;
    using System.Windows.Controls;
    using System.Windows.Media.Animation;
    
    namespace SilverlightApplication14
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                Storyboard story = App.Current.Resources["Storyboard1"] as Storyboard;
                Storyboard.SetTarget(story,this.rectangle2);
    
                story.Begin();
                story.Completed += new EventHandler(story_Completed);
               
                //this.Storyboard1.Begin();
            }
    
            void story_Completed(object sender, EventArgs e)
            {
                Storyboard story2 = App.Current.Resources["Storyboard1"] as Storyboard;
                story2.Stop();
                Storyboard.SetTarget(story2, this.rectangle);
                story2.Begin();
            }
        }
    }
    

     

    App.xaml

    <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                 x:Class="SilverlightApplication14.App"
                 >
        <Application.Resources>
            
        	<ResourceDictionary>
        		<ResourceDictionary.MergedDictionaries>
        			<ResourceDictionary Source="Dictionary1.xaml"/>
        		</ResourceDictionary.MergedDictionaries>
        	</ResourceDictionary>
            
        </Application.Resources>
    </Application>
    

     

     

     

     

     


    努力!完成了js解析器,还差一个svg插件,一个绘图程序,做好自己,呵呵~!
    2010年3月27日 3:07
    版主

全部回复

  • Hi and thanks。

    我现在想在Silverlight 3里,实现这么一个效果。在XAML中,设置了一段Storyboard的动画。我现在需要将这段动画应用在不同的控件上,也就是使得这个资源得到重用。项目可能需要跨不同的cs文件调用这段Storyboard,也就是说abc.cs和bac.cs需要用这段XAML中的Storyboard,请问有没有比较方便的重用办法?如果有的话,是否可以给一段示例代码呢?

    这就类似于一段Java代码,可以封装在JAR包中能够方便的被不同的类调用:)

    谢谢 thanks again ~


    Silverlight的动画元素要置于xxx.Resource之中,你可以编写些通用的动画方法,最后return一个Storyboard,然后Add到你的Resource里就可以使用了。

     


    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com


    《银光志--Silverlight 3.0开发详解与最佳实践》
    2010年3月26日 10:17
    版主
  • 两种方法: 1.你可以把Storyboard 放资源文件里面这样就可以重用了 2.你可以自定义一个动画,不过这样就需要写大量的代码。

    Dictionary1.xaml

    <ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames  BeginTime="00:00:00"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.9000000" Value="286.5"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.9000000" Value="4.5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </ResourceDictionary>
    

    MainPage.xaml

    <UserControl x:Class="SilverlightApplication14.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        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" d:DesignWidth="640" d:DesignHeight="480">
    	<UserControl.Resources>
    		
    	</UserControl.Resources>
      <Grid x:Name="LayoutRoot">
      	<Rectangle x:Name="rectangle" Fill="#FFDC0F0F" Stroke="Black" HorizontalAlignment="Left" Margin="113,219,0,126" Width="207" RenderTransformOrigin="0.5,0.5">
      		<Rectangle.RenderTransform>
      			<TransformGroup>
      				<ScaleTransform/>
      				<SkewTransform/>
      				<RotateTransform/>
      				<TranslateTransform/>
      			</TransformGroup>
      		</Rectangle.RenderTransform>
      	</Rectangle>
    
            <Rectangle x:Name="rectangle2" Fill="#FF16346C" Stroke="Black" HorizontalAlignment="Left" Margin="113,55,0,0" Width="207" RenderTransformOrigin="0.5,0.5" Height="135" VerticalAlignment="Top">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
    
        </Grid>
    </UserControl>
    

     

    MainPage.xaml.cs

    using System;
    using System.Windows.Controls;
    using System.Windows.Media.Animation;
    
    namespace SilverlightApplication14
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                Storyboard story = App.Current.Resources["Storyboard1"] as Storyboard;
                Storyboard.SetTarget(story,this.rectangle2);
    
                story.Begin();
                story.Completed += new EventHandler(story_Completed);
               
                //this.Storyboard1.Begin();
            }
    
            void story_Completed(object sender, EventArgs e)
            {
                Storyboard story2 = App.Current.Resources["Storyboard1"] as Storyboard;
                story2.Stop();
                Storyboard.SetTarget(story2, this.rectangle);
                story2.Begin();
            }
        }
    }
    

     

    App.xaml

    <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                 x:Class="SilverlightApplication14.App"
                 >
        <Application.Resources>
            
        	<ResourceDictionary>
        		<ResourceDictionary.MergedDictionaries>
        			<ResourceDictionary Source="Dictionary1.xaml"/>
        		</ResourceDictionary.MergedDictionaries>
        	</ResourceDictionary>
            
        </Application.Resources>
    </Application>
    

     

     

     

     

     


    努力!完成了js解析器,还差一个svg插件,一个绘图程序,做好自己,呵呵~!
    2010年3月27日 3:07
    版主
  • 正解,学习了。
    2010年3月30日 0:52
  • 正解,学习了。
    2010年3月30日 0:52
  • 我按照你所说的做了,但是又出现一个问题:

    无法解析指定对象的 TargetProperty (UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)。

    我只不过是用blend创建了一个用于Button的动画,然后将其应用于其他的Button对象,而且这些的Button对象各个属性都是一样的

    2010年5月2日 7:31