我在使用 ItemTemplate
的 XAML 中定义了ListBox
。在ItemTemplate
里面,我放置了图像。
<ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel x:Name="itmTempPanel" IsItemsHost="True" ItemWidth="60" ItemHeight="60" Width="{Binding ElementName=lstFilesDropped, Path=Width}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
...
<Image>
<Image.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" To="71" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="itmTempPanel" Storyboard.TargetProperty="Height" To="71" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</ListBox.ItemTemplate>
当鼠标进入图像时,我想在该图像高度和我在ItemsPanelTemplate
中定义的WrapPanel
上开始故事板。
当鼠标进入此图像时,我出现以下异常:"'itmTempPanel'名称在'System.Windows.Controls.Image'的名称范围内找不到。
如何从开始情节提要的元素更改其他元素属性。
感谢您的帮助!
有两种方法可以解决这个问题。第一种是使用 {x:Reference}
.NET 4.0 中的 WPF 功能。如果应用程序面向 .NET 4.0,则应遵循此方法。这个想法是将Storyboard.Target
设置为要进行动画处理的对象(在本例中为WrapPanel
(。虽然我们可以将Binding
用于Storyboard.Target
但我们不能使用RelativeSource
或ElementName
来设置绑定源,因为Storyboard
(或时间线(不是FrameworkElement(或FrameworkContentElement(。指定源的唯一方法是设置 Source
属性。但是,我们通常可以将其设置为StaticResource
或DynamicResource
或直接(使用元素语法(。幸运的是,{x:Reference}
是在 .NET 4.0 中引入的,这可以帮助您引用 XAML 中的任何命名对象(它的工作方式与 ElementName
不同(。下面是第一种方法的代码:
<DoubleAnimation Storyboard.Target="{Binding Source={x:Reference itmTempPanel}}"
Storyboard.TargetProperty="Height"
To="71" Duration="0:0:0.3" />
第二种方法基于 DataTrigger
.但是这个触发器不是针对Image
的,而恰恰是针对WrapPanel
的。但是现在ElementName
可用于将触发器源绑定到Image
。因此,当不支持{x:Reference}
时,此方法可用。
<WrapPanel x:Name="itmTempPanel" IsItemsHost="True" ItemWidth="60" ItemHeight="60"
Width="{Binding ElementName=lstFilesDropped, Path=Width}">
<WrapPanel.Style>
<Style TargetType="WrapPanel">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver,ElementName=image}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
To="71" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</WrapPanel.Style>
</WrapPanel>
<Image Name="image">
<Image.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" To="71"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
请注意,您必须为Image
命名(例如 image
(。换行面板的<DoubleAnimation>
将被删除。我们没有使用EventTrigger
,而是使用DataTrigger
监听IsMouseOver
属性。您还可以指定在 IsMouseOver
为 false(等于 MouseLeave
(时开始制作动画的DataTrigger.ExitActions
。