UWP - 对背景图像淡入效果

Question

我需要在背景图像上淡入淡出效果。在运行时间期间，可以更改图像源，这与设置的绑定一起工作。无论如何，对应的动画不会带来任何视觉效果。此刻我的XAML如下所示：

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> 

当我使用来代替：

   [...] 
      <Media:ControlStoryboardAction.Storyboard> 
           <Storyboard> 
            <FadeInThemeAnimation Storyboard.TargetName="Image" /> 
           </Storyboard> 
          </Media:ControlStoryboardAction.Storyboard> 

我得到

System.Runtime.InteropServices.COMException：未检测到安装的组件。

无法解析TargetName图像。在Microsoft.Xaml.Interactions.Media.ControlStoryboardAction.Execute（对象发件人，对象参数） 在Microsoft.Xaml.Interactivity.Interaction.ExecuteActions（Object（））上的Windows.UI.Xaml.Media.Animation.Storyboard.Begin（） （ ）发件人，ActionCollection操作，对象参数） at Microsoft.Xaml.Interactions.Core.EventTriggerBehavior.OnEvent（Object sender，Object eventArgs）

任何想法？

[编辑] 感谢@SWilko的回答，我确定动画只对图像有效。我上面的代码工作，如果我将ImageBrush更改为图像，并将其放入网格（不Grid.Background）。

Answer 1

那岂不是更容易使用的Image控制和顶部添加进一步控制需要如

<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> 

编辑

要更新的图像，并从头开始播放动画。 我已经添加Visibility切换动画的Storyboard并命名为StoryboardSB

现在，在后面的代码我用故事板完成的事件来改变形象，重新启动动画。你可以在适合你的应用程序的情况下这样做，这只是为了展示一个例子。 例如

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(); 
};