UWP - эффект FadeIn на фоновом изображении

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. в Windows.UI.Xaml.Media.Animation.Storyboard.Begin() в Microsoft.Xaml.Interactions.Media.ControlStoryboardAction.Execute (объект-отправитель, параметр объекта) в Microsoft.Xaml.Interactivity.Interaction.ExecuteActions (Object отправитель, действия ActionCollection, параметр объекта) в Microsoft.Xaml.Interactions.Core.EventTriggerBehavior.OnEvent (объектный отправитель, объект 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> 

EDIT

Чтобы обновить изображение и начать анимацию с нуля. Я добавил Visibility тумблер анимации к Storyboard и назвал StoryboardС.Б.

Теперь в коде я использовал раскадровку Завершена событие, чтобы изменить изображение и перезапустить анимацию. Вы можете сделать это, когда это подходит для вашего приложения, это просто показать пример. например

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