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

问题描述

我在使用ItemTemplate的XAML中定义了ListBox.在ItemTemplate里面放置了图像.

I defined ListBox in my XAML which uses ItemTemplate.Inside the ItemTemplate I placed 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)上开始情节提要.

When the mouse enter the image I want to begin storyboard on that image height and on the WrapPanel which I defined inside the ItemsPanelTemplate.

当鼠标进入该图像时，出现以下异常:在'System.Windows.Controls.Image'的名称范围中找不到'itmTempPanel'名称."

When the mouse enter to this image I got the following exception:"'itmTempPanel' name cannot be found in the name scope of 'System.Windows.Controls.Image'."

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

How can I change other element property from element that begin the storyboard.

谢谢您的帮助！

推荐答案

有2种方法可以解决此问题.首先是在.NET 4.0中为WPF使用{x:Reference}功能.如果您的应用程序面向.NET 4.0，则应遵循这种方法.想法是将Storyboard.Target设置为要设置动画的对象(在本例中为WrapPanel).尽管我们可以将Binding用于Storyboard.Target，但是由于Storyboard(或时间轴)不是FrameworkElement(或FrameworkContentElement)，因此不能使用RelativeSource或ElementName来设置绑定源.指定来源的唯一方法是设置Source属性.但是，我们通常可以将其设置为StaticResource或DynamicResource或直接(使用元素语法)设置.幸运的是，{x:Reference}是.NET 4.0中引入的，这可以帮助您引用XAML中的任何命名对象(它的工作方式与ElementName不同).这是第一种方法的代码:

There are 2 ways to solve this. The first is using {x:Reference} a feature in .NET 4.0 for WPF. You should follow this approach if your application targets .NET 4.0. The idea is setting the Storyboard.Target to the object you want to animate (in this case is the WrapPanel). Although we can use Binding for Storyboard.Target but we cannot use RelativeSource or ElementName to set the binding source because Storyboard (or Timeline) is not a FrameworkElement (or FrameworkContentElement). The only way to specify the source is setting the Source property. However we can normally set this to a StaticResource or DynamicResource or directly (using element syntax). It's fortunate that the {x:Reference} was introduced in .NET 4.0 and this can help you reference any named object inside XAML (the way it works is not like ElementName). Here is the code for the first approach:

<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}时，此方法可用.

The second approach is based on DataTrigger. However this trigger is not for Image, it's exactly for the WrapPanel. But now the ElementName can be used to bind the Trigger source to the Image. So this approach is usable when {x:Reference} is not supported.

<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). WrapPanel的<DoubleAnimation>已删除.代替使用EventTrigger，我们使用DataTrigger监听IsMouseOver属性.您还可以指定DataTrigger.ExitActions以在IsMouseOver为假(等于MouseLeave)时开始动画制作.

Note that you have to give the Image a name (such as image). The <DoubleAnimation> for the WrapPanel is removed. Instead of using EventTrigger, we used DataTrigger listening to IsMouseOver property. You can also specify the DataTrigger.ExitActions to start animating when IsMouseOver is false (equal to MouseLeave).

这篇关于WPF事件触发器更改其他UI元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！