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

Question

我ListBox在我的XAML中使用了ItemTemplate.在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>

当鼠标进入图像时,我想在该图像高度和WrapPanel我在其中定义的图像高度上开始故事板ItemsPanelTemplate.

当鼠标进入此图像时,我得到以下异常:"'itmTempPanel'名称在'System.Windows.Controls.Image'的名称范围内找不到."

如何从开始故事板的元素更改其他元素属性.

谢谢您的帮助 !!

Answer 1

有两种方法可以解决这个问题.第一个是{x:Reference}在.NET 4.0 for 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可以用来将Trigger源绑定到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财产而不是使用.您还可以指定在false(等于)DataTrigger.ExitActions时开始设置动画.IsMouseOverMouseLeave