如何使用Action.Invoke()触发一个Storyboard
一般在我们的项目中,最好是将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的设计思路;