title: EventTriggers on an Image
body: <p>I have a set of <code>Image</code>s in a GridView, and the images are not able to load instantly when the page is opened. So, to create a smoother transition, I am trying to use an <code>EventTrigger</code> in the <code>Image</code> to animate the opacity from 0 to 1 when the image loads, like so:</p>
  
  <pre><code>&lt;GridView.ItemTemplate&gt;
      &lt;DataTemplate&gt;
          &lt;Border Background="{ThemeResource ButtonBackground}" HorizontalAlignment="Stretch" MaxWidth="300" MinWidth="200"&gt;
              &lt;Image Source="{Binding SmallUri}" Stretch="UniformToFill"
                  Opacity="0" ToolTipService.ToolTip="{Binding Author.Name}"&gt;
                  &lt;Image.Triggers&gt;
                       &lt;EventTrigger RoutedEvent="Image.ImageOpened"&gt;
                              &lt;BeginStoryboard&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.25" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/BeginStoryboard&gt;
                       &lt;/EventTrigger&gt;
                  &lt;/Image.Triggers&gt;
              &lt;/Image&gt;
          &lt;/Border&gt;
      &lt;/DataTemplate&gt;
  &lt;/GridView.ItemTemplate&gt;
  </code></pre>
  
  <p>But whenever the page attempts to load, it crashes with the error:</p>
  
  <pre><code>Failed to assign to property 'Windows.UI.Xaml.EventTrigger.RoutedEvent'
  </code></pre>
  
  <p>Why does this not work? It also fails if I change the RoutedEvent property to Loaded, FrameworkElement.Loaded, Image.Loaded, or any other value I could think of. I would like a solution that does not involve having to write a custom control / codebehind.</p>