UWP - FadeIn effect on background image - xaml

Question

I need a fade in effect on my background image. During the runtime the imagesource can be changed, which works with the setted binding as expected. Anyway the correspondending animation doesn't take any visual effects. At the moment my xaml looks like the following:
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
<Page.Content>
<Grid>
<Grid.Background>
<ImageBrush x:Name="image" ImageSource="{Binding Path=ImageSource,UpdateSourceTrigger=PropertyChanged}" Stretch="UniformToFill" >
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="ImageOpened" >
<Media:ControlStoryboardAction ControlStoryboardOption="Play">
<Media:ControlStoryboardAction.Storyboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:1" Storyboard.TargetName="image"/>
</Storyboard>
</Media:ControlStoryboardAction.Storyboard>
</Media:ControlStoryboardAction>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ImageBrush>
</Grid.Background>
When I use instead:
[...]
<Media:ControlStoryboardAction.Storyboard>
<Storyboard>
<FadeInThemeAnimation Storyboard.TargetName="Image" />
</Storyboard>
</Media:ControlStoryboardAction.Storyboard>
I get
System.Runtime.InteropServices.COMException: No installed components were detected.
Cannot resolve TargetName Image.
at Windows.UI.Xaml.Media.Animation.Storyboard.Begin()
at Microsoft.Xaml.Interactions.Media.ControlStoryboardAction.Execute(Object sender, Object parameter)
at Microsoft.Xaml.Interactivity.Interaction.ExecuteActions(Object sender, ActionCollection actions, Object parameter)
at Microsoft.Xaml.Interactions.Core.EventTriggerBehavior.OnEvent(Object sender, Object eventArgs)
Any ideas?
[Edit]
Thanks to the answer of #SWilko, I determine that the Animation only works on a Image. My code above works if I change the ImageBrush to a Image and I place it into the grid (not Grid.Background).

Answer 1

Wouldn't it be easier to use an Image control and add further controls on top as needed eg
<Grid x:Name="LayoutGrid">
<Image x:Name="image" Stretch="UniformToFill"
Source="{Binding Path=ImageSource,UpdateSourceTrigger=PropertyChanged}"
Opacity="0" Visibility="Collapsed">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="ImageOpened">
<media:ControlStoryboardAction x:Name="sbAction" ControlStoryboardOption="Play">
<media:ControlStoryboardAction.Storyboard>
<Storyboard x:Name="sb">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="image">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</media:ControlStoryboardAction.Storyboard>
</media:ControlStoryboardAction>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</Grid>
EDIT
To update the image and start the animation from scratch.
I've added Visibility toggle animation to the Storyboard and named the Storyboard sb
Now in code behind I've used the Storyboard Completed event to change the image and restart the animation. You could do this where appropriate for your app this is just to show an example.
eg
sb.Completed += (sender, e) =>
{
//this is a local image for me you would probably update your ImageSource property here
var newimg = new BitmapImage(new Uri("ms-appx:///Assets/rock.jpg"));
image.Source = newimg;
image.Opacity = 0;
image.Visibility = Visibility.Collpased;
sb.Begin();
};