【发布时间】：2011-12-23 07:26:20
【问题描述】：
我正在研究水平列表，当您将鼠标悬停在每个项目上时，每个项目都会展开。
我已经阅读了一些教程，并且能够使用 MouseEnter 和 MouseLeave 事件创建简单的动画，但是它在我的数据模板中不起作用。
尝试 1
<DataTemplate x:Key="StepBreadcrumbItem">
<Border BorderBrush="Gray" HorizontalAlignment="Stretch" Width="60">
<Border.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.5" To="100" Storyboard.TargetProperty="(FrameworkElement.Width)" d:IsOptimized="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.5" To="60" Storyboard.TargetProperty="(FrameworkElement.Width)" d:IsOptimized="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<StackPanel Orientation="Horizontal">
<TextBlock Text=" > " />
<TextBlock Text="{Binding Order, Mode=OneWay, StringFormat='{}. '}"/>
<TextBlock Text="{Binding Name, Mode=OneWay}"/>
</StackPanel>
</Border>
</DataTemplate>
我错过了什么？它适用于单个元素。我收到运行时错误Error: Unhandled Error in Silverlight Application
Code: 2531
Category: ParserError
Message: Failed to assign to property 'System.Windows.EventTrigger.RoutedEvent'.
尝试 2 我现在使用 MouseEnter 事件以不同的方式实现它。由于尝试 1 失败。
<DataTemplate x:Key="StepBreadcrumbItem">
<Border BorderBrush="Gray" HorizontalAlignment="Stretch" Width="60" MouseLeave="CollapseBreadcrumb" MouseEnter="ExpandBreadcrumb">
<StackPanel Orientation="Horizontal">
<TextBlock Text=" > " />
<TextBlock Text="{Binding Order, Mode=OneWay, StringFormat='{}. '}"/>
<TextBlock Text="{Binding Name, Mode=OneWay}"/>
</StackPanel>
</Border>
</DataTemplate>
private void CollapseBreadcrumb(object sender, System.Windows.Input.MouseEventArgs e)
{
var border = sender as Border;
var duration = TimeSpan.FromMilliseconds(1000);
var sb = new Storyboard { Duration = duration };
var doubleAnimation = new DoubleAnimation
{
BeginTime = TimeSpan.FromSeconds(1),
Duration = duration,
To = 50
};
sb.Children.Add(doubleAnimation);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(FrameworkElement.Width)"));
Storyboard.SetTarget(doubleAnimation, border);
sb.Begin();
}
private void ExpandBreadcrumb(object sender, System.Windows.Input.MouseEventArgs e)
{
var border = sender as Border;
var duration = TimeSpan.FromMilliseconds(1000);
var sb = new Storyboard {Duration = duration};
var doubleAnimation = new DoubleAnimation
{
BeginTime = TimeSpan.FromSeconds(0),
Duration = duration,
To = 100
};
sb.Children.Add(doubleAnimation);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(FrameworkElement.Width)"));
Storyboard.SetTarget(doubleAnimation, border);
sb.Begin();
}
但是，现在它只会在我将鼠标悬停在它上面时展开，当我离开鼠标时它会停止并且它不会运行折叠。另外，我以编程方式设置情节提要的原因是，当我定义两个情节提要并只是将其重新分配并运行到不同的项目时，当我在所有列表项上移动鼠标时看起来很糟糕。
【问题讨论】：
-
你确定它适用于单个元素吗？据我所知 Silverlight 仅支持 Loaded EventTrigger。
-
对于单个元素，我实际上使用 EventHandlers -
<Border BorderBrush="Gray" HorizontalAlignment="Stretch" Width="60" MouseEnter="Expand" MouseLeave="Collapse">。我会尝试更改它，使其不使用 EventTrigger。 -
就是这样，不幸的是，您只能在 Silverlight 中使用 Loaded 事件触发器，但我会向您展示一个解决方法作为答案
-
@Xin 我又一次尝试它几乎就在那里 - 我能感觉到它......还没有完全在那里。
-
我再次更新了我的答案......使用更简单的版本。 :)
标签： c# silverlight animation storyboard