一般在我们的项目中，最好是将Storyboard放在前台，然后设置Storyboard的x:key值，通过我们的TryFindResource来查找到当前的Storyboard来启动Stroyboard,这样程序显得比较合理，另外在我们的下面这个例子中，我们通过命令绑定的方式来将2个Storyboard绑定到两个Button上面，当我们点击这两个Storyboard的时候，我们会启动相应的动画，首先来看一下前台设计的xaml代码。
<Window x:Class="ActionInvoke.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/ActionInvoke;component/Themes/Colors.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
<Storyboard x:Key="ChangeColor" FillBehavior="Stop">
<ColorAnimation Storyboard.TargetName="ColorEllipseBrush" Storyboard.TargetProperty="Color" To="Red" Duration="0:0:1">
<ColorAnimation.EasingFunction>
<CircleEase EasingMode="EaseIn"></CircleEase>
</ColorAnimation.EasingFunction>
</ColorAnimation>
</Storyboard>
<Storyboard x:Key="ChangeSize" FillBehavior="Stop">
<DoubleAnimation Storyboard.TargetName="SizeEllipse" Storyboard.TargetProperty="Width" Duration="0:0:1" To="220">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseIn"></CircleEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="SizeEllipse" Storyboard.TargetProperty="Height" Duration="0:0:1" To="220">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseIn"></CircleEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="10*"></RowDefinition>
<RowDefinition Height="80*"></RowDefinition>
<RowDefinition Height="10*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="70*"></RowDefinition>
<RowDefinition Height="30*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="50*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="1">
<Button x:Name="ColorEllipse" Width="100" Height="100">
<Button.Background>
<!--<LinearGradientBrush x:Name="ColorEllipseBrush" StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0" Color="#557ff2"></GradientStop>
<GradientStop Offset="0.44" Color="#557ff2"></GradientStop>
<GradientStop Offset="0.44" Color="#4d71d9"></GradientStop>
<GradientStop Offset="1" Color="#4d71d9"></GradientStop>
</LinearGradientBrush>-->
<SolidColorBrush x:Name="ColorEllipseBrush" Color="Blue" Opacity="0.75" ></SolidColorBrush>
</Button.Background> </Button>
</Border>
<Border Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="1">
<Ellipse x:Name="SizeEllipse" Width="100" Height="100" Fill="{StaticResource Decorative}"></Ellipse>
</Border>
<Border Grid.Row="1" Grid.Column="0" BorderBrush="Black" BorderThickness="1">
<Button x:Name="btn_changeColor" Background="Teal" Width="100" Height="50" Opacity="0.75" Content="ChangeColor" Command="{Binding ChangeColor}"></Button>
</Border>
<Border Grid.Row="1" Grid.Column="1" BorderBrush="Black" BorderThickness="1">
<Button x:Name="btn_changeSize" Background="Teal" Width="100" Height="50" Opacity="0.75" Content="ChangeSize" Command="{Binding ChangeSize}"></Button>
</Border>
</Grid>
</Grid>
</Window>
这个程序是一个很典型的MVVM的设计方式，首先看一下我们的ViewModel文件夹下面，记住在使用Microsoft.Practices.Prism.Commands.DelegateCommand的时候请先添加对Microsoft.Practices.Prism.Mvvm的引用，在这个类中我们添加了一个静态的实例Instance,这个静态的实例会作为一个DataContext绑定到前台，在这里我们添加了两个Action类型的委托的属性， public Action ChangeColorAction { get; set; } public Action ChangeSizeAction { get; set; }，在绑定的两个命令的回调函数中，我们来通过ChangeColorAction的Invoke方法来加载Stroyboard,由于ChangeColorAction 是一种委托类型，至于委托的是哪个方法，这个需要我们来指定，下面我在贴出具体的指定的方法。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input; namespace ActionInvoke.ViewModel
{
public class ActionInvokeViewModel:Microsoft.Practices.Prism.Mvvm.BindableBase
{
public ActionInvokeViewModel()
{
ChangeColor = new Microsoft.Practices.Prism.Commands.DelegateCommand(DoChangeColor);
ChangeSize = new Microsoft.Practices.Prism.Commands.DelegateCommand(DoChangeSize);
} public static ActionInvokeViewModel _instance;
public static ActionInvokeViewModel Instance
{
get
{
if (null == _instance)
{
_instance = new ActionInvokeViewModel();
}
return _instance;
}
set
{
_instance = value;
}
} private ICommand changeColor;
public ICommand ChangeColor
{
get { return changeColor; }
set
{
if (value != changeColor)
{
changeColor = value;
OnPropertyChanged("ChangeColor");
} } } private ICommand changeSize;
public ICommand ChangeSize
{
get { return changeSize; }
set
{
if (value != changeSize)
{
changeSize = value;
OnPropertyChanged("ChangeSize");
} }
} public Action ChangeColorAction { get; set; } public Action ChangeSizeAction { get; set; } private void DoChangeColor()
{
if (null != ChangeColorAction)
{
ChangeColorAction.Invoke();
} } private void DoChangeSize()
{
if (null != ChangeSizeAction)
{
ChangeSizeAction.Invoke();
} } } }
下面贴出view.xaml.cs文件，看到底是如何进行数据绑定的。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using ActionInvoke.ViewModel; namespace ActionInvoke
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
ActionInvokeViewModel aivm = ActionInvokeViewModel.Instance;
DataContext = aivm;
aivm.ChangeColorAction = CurrentChangeColor;
aivm.ChangeSizeAction = CurrentChangeSize;
} private void CurrentChangeSize()
{
Dispatcher.Invoke(() =>
{
(TryFindResource("ChangeSize") as Storyboard).Begin();
});
} private void CurrentChangeColor()
{
Dispatcher.Invoke(() =>
{
(TryFindResource("ChangeColor") as Storyboard).Begin();
});
}
}
}
在该部分，我们具体指定了两个委托的回调函数，这里我们通过 (TryFindResource("ChangeColor") as Storyboard).Begin();来找到前台的Stroyboard然后再启动Storyboard来进行Storyboard的启动，整个设计是非常完善的，非常符合MVVM的设计思路；