关于动画：WPF数据触发器和故事板

WPF Data Triggers and Story Boards

每当ViewModel / Presentation模型忙时，我都试图触发进度动画。我有一个IsBusy属性，并且ViewModel设置为UserControl的DataContext。 IsBusy属性为true时，触发" progressAnimation"故事板的最佳方法是什么？ Blend只允许med在UserControl级别上添加Event-Triggers，而我只能在数据模板中创建属性触发器。

" progressAnimation"被定义为用户控件中的资源。

我尝试将DataTriggers作为样式添加到UserControl上，但是尝试启动StoryBoard时出现以下错误：

1
2
3

'System.Windows.Style' value cannot be assigned to property 'Style'
of object'Colorful.Control.SearchPanel'. A Storyboard tree in a Style
cannot specify a TargetName. Remove TargetName 'progressWheel'.

ProgressWheel是我要设置动画的对象的名称，因此删除目标名称显然不是我想要的。

我希望使用数据绑定技术在XAML中解决此问题，而不是必须公开事件并通过代码启动/停止动画。

您可以通过在progressWheel本身上声明动画来实现所需的操作：
XAML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<UserControl x:Class="TriggerSpike.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<UserControl.Resources>
<DoubleAnimation x:Key="SearchAnimation" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:4"/>
<DoubleAnimation x:Key="StopSearchAnimation" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:4"/>
</UserControl.Resources>
<StackPanel>
<TextBlock Name="progressWheel" TextAlignment="Center" Opacity="0">
<TextBlock.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsBusy}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<StaticResource ResourceKey="SearchAnimation"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<StaticResource ResourceKey="StopSearchAnimation"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
Searching
</TextBlock>
<Label Content="Here your search query"/>
<TextBox Text="{Binding SearchClause}"/>
<Button Click="Button_Click">Search!</Button>
<TextBlock Text="{Binding Result}"/>
</StackPanel>

后面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

using System.Windows;
using System.Windows.Controls;

namespace TriggerSpike
{
public partial class UserControl1 : UserControl
{
private MyViewModel myModel;

public UserControl1()
{
myModel=new MyViewModel();
DataContext = myModel;
InitializeComponent();
}

private void Button_Click(object sender, RoutedEventArgs e)
{
myModel.Search(myModel.SearchClause);
}
}
}

视图模型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

using System.ComponentModel;
using System.Threading;
using System.Windows;

namespace TriggerSpike
{
class MyViewModel:DependencyObject
{

public string SearchClause{ get;set;}

public bool IsBusy
{
get { return (bool)GetValue(IsBusyProperty); }
set { SetValue(IsBusyProperty, value); }
}

public static readonly DependencyProperty IsBusyProperty =
DependencyProperty.Register("IsBusy", typeof(bool), typeof(MyViewModel), new UIPropertyMetadata(false));

public string Result
{
get { return (string)GetValue(ResultProperty); }
set { SetValue(ResultProperty, value); }
}

public static readonly DependencyProperty ResultProperty =
DependencyProperty.Register("Result", typeof(string), typeof(MyViewModel), new UIPropertyMetadata(string.Empty));

public void Search(string search_clause)
{
Result = string.Empty;
SearchClause = search_clause;
var worker = new BackgroundWorker();
worker.DoWork += worker_DoWork;
worker.RunWorkerCompleted += worker_RunWorkerCompleted;
IsBusy = true;
worker.RunWorkerAsync();
}

void worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{
IsBusy=false;
Result ="Sorry, no results found for:" + SearchClause;
}

void worker_DoWork(object sender, DoWorkEventArgs e)
{
Thread.Sleep(5000);
}
}
}

希望这可以帮助！

尽管提出将动画直接附加到要动画的元素的答案可以在简单的情况下解决此问题，但是当您有一个复杂的动画需要定位多个元素时，这实际上是行不通的。 (当然，您可以将动画附加到每个元素上，但是管理起来非常可怕。)

因此，有另一种方法可以解决此问题，该方法使您可以使用DataTrigger来运行以命名元素为目标的动画。

您可以在WPF中在三个位置附加触发器：元素，样式和模板。但是，前两个选项在这里不起作用。排除第一个是因为WPF不支持直接在元素上使用DataTrigger。 (据我所知，这没有特别好的理由。据我所记得，多年前我问WPF团队的成员时，他们说他们很想支持它，但没有这样做。有时间使它起作用。)而且样式已淘汰，因为正如您所报告的错误消息所述，您无法在与样式关联的动画中定位命名元素。

这样就剩下了模板。您可以为此使用控件或数据模板。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

通过这种构造，WPF乐于让动画引用模板中的命名元素。 (我在此处将动画和模板内容都保留为空-显然，您会使用实际的动画和内容来填充它。)

它适用于模板而不适用于样式的原因是，当您应用模板时，它定义的命名元素将始终存在，因此在该模板范围内定义的动画引用这些元素是安全的。样式通常不是这种情况，因为样式可以应用于多个不同的元素，每个元素可能具有完全不同的视觉树。 (令人沮丧的是，即使在可以确定所需元素存在的情况下，它也阻止了您执行此操作，但是也许有些事情使动画很难绑定到右侧的命名元素我知道WPF中有很多优化可以有效地重用样式的元素，因此也许其中之一就是很难做到这一点。

您可以订阅DataObject类的PropertyChanged事件，并从Usercontrol级别触发RoutedEvent。

为了使RoutedEvent工作，我们需要具有从DependancyObject派生的类

我建议使用RoutedEvent而不是IsBusy属性。只需触发OnBusyStarted和OnBusyStopped事件，然后在适当的元素上使用事件触发器即可。

更改属性后，可以使用Trigger.EnterAction启动动画。

1
2
3
4
5
6
7
8