Question

我在GridView中有一组Image，并且在打开页面时无法立即加载图像。因此，为了创建更平滑的过渡，我尝试在EventTrigger中使用Image在图像加载时将不透明度从0设置为1，如下所示：

<GridView.ItemTemplate>
    <DataTemplate>
        <Border Background="{ThemeResource ButtonBackground}" HorizontalAlignment="Stretch" MaxWidth="300" MinWidth="200">
            <Image Source="{Binding SmallUri}" Stretch="UniformToFill"
                Opacity="0" ToolTipService.ToolTip="{Binding Author.Name}">
                <Image.Triggers>
                     <EventTrigger RoutedEvent="Image.ImageOpened">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.25" />
                                </Storyboard>
                            </BeginStoryboard>
                     </EventTrigger>
                </Image.Triggers>
            </Image>
        </Border>
    </DataTemplate>
</GridView.ItemTemplate>

但是无论何时页面尝试加载，都会因错误而崩溃：

Failed to assign to property 'Windows.UI.Xaml.EventTrigger.RoutedEvent'

为什么这不起作用？如果我将RoutedEvent属性更改为Loaded，FrameworkElement.Loaded，Image.Loaded或我能想到的任何其他值，它也会失败。我想要一个不需要编写自定义控件/代码隐藏的解决方案。

Answer 1

但是无论何时页面尝试加载，它都会因错误而崩溃，并且＃34;无法分配给属性＆＃39; Windows.UI.Xaml.EventTrigger.RoutedEvent＆＃39;。＆＃34;为什么这不起作用？

正如@Clemens所说，问题出在Windows运行时XAML中，事件触发器的默认行为以及可用于调用EventTrigger的唯一事件是FrameworkElement.Loaded。

我在这里写这个答案是为了调用你的代码的另一个问题，正如你所说：

如果我将RoutedEvent属性更改为Loaded，FrameworkElement.Loaded，Image.Loaded
，它也会失败

这是因为您没有在Storyboard.TargetName中指定DoubleAnimation，它会在运行时抛出异常。要解决此问题，您需要为Image中的DataTemplate命名并修改故事板，如下所示：

<Image x:Name="myImage" Source="{Binding SmallUri}" Stretch="UniformToFill">
    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:5" Storyboard.TargetName="myImage" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

Answer 2

来自MSDN上EventTrigger页面上的备注部分：

如果您选择在Windows运行时XAML中使用Triggers，则为默认值事件触发器的行为和可用于的唯一事件调用 EventTrigger 是 FrameworkElement.Loaded 。因为那都是默认和唯一启用的行为，请勿设置 RoutedEvent 属性。只需使用XAML <EventTrigger>即可。有关详细信息，请参阅 Triggers

Answer 3

我知道回答这个问题为时已晚，但对于那些将遇到同样问题的人来说，已经太迟了。您可以使用以下XAML代码：

<Image x:Name="TumbImage" Opacity="0" ...>
<i:Interaction.Behaviors>
    <core:EventTriggerBehavior EventName="ImageOpened">
      <media:ControlStoryboardAction Storyboard="{StaticResource ImageOpacityStoryBoard}" ControlStoryboardOption="Play"/>
    </core:EventTriggerBehavior>
</i:Interaction.Behaviors>

我在这里使用的示例情节提要：

<Storyboard x:Key="ImageOpacityStoryBoard">
<DoubleAnimation Storyboard.TargetName="TumbImage"
    Storyboard.TargetProperty="Opacity" 
    From="0" To="1" Duration="0:0:0.33" />
</Storyboard>

以及使用的XML名称空间：

xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:media="using:Microsoft.Xaml.Interactions.Media"

图像上的EventTriggers

3 个答案: