c# - WPF 事件触发器更改其他 UI 元素

Question

我在使用 ItemTemplate 的 XAML 中定义了 ListBox。 在 ItemTemplate 中，我放置了 Image。

<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 上以该图像高度 和 开始 Storyboard。

当鼠标进入这张图片时，出现以下异常: “在‘​​System.Windows.Controls.Image’的名称范围内找不到‘itmTempPanel’名称。”

如何更改 Storyboard开始元素的其他元素属性。

谢谢你的帮助!!

Answer 1

有两种方法可以解决这个问题。第一个是使用 {x:Reference} .NET 4.0 中的 WPF 功能。如果您的应用程序以 .NET 4.0 为目标，您应该遵循这种方法。这个想法是设置 Storyboard.Target到你想要动画的对象(在本例中是 WrapPanel )。虽然我们可以使用 Binding对于 Storyboard.Target但我们不能使用 RelativeSource或 ElementName设置绑定(bind)源因为 Storyboard (或时间线)不是 FrameworkElement(或 FrameworkContentElement)。指定源的唯一方法是设置 Source属性(property)。但是我们通常可以将其设置为 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可用于将触发器源绑定(bind)到 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>因为 WrapPanel 被移除了。而不是使用 EventTrigger , 我们使用了 DataTrigger听IsMouseOver属性(property)。您还可以指定 DataTrigger.ExitActions在 IsMouseOver 时开始动画为假(等于 MouseLeave )。