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