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 Image를 (를) 확인할 수 없습니다. at Windows.UI.Xaml.Media.Animation.Storyboard.Begin() at Microsoft.Xaml.Interactions.Media.ControlStoryboardAction.Execute (개체 보낸 사람, 개체 매개 변수) at Microsoft.Xaml.Interactivity.Interaction.ExecuteActions (Object 보낸 사람, ActionCollection 작업, 개체 매개 변수) Microsoft.Xaml.Interactions.Core.EventTriggerBehavior.OnEvent (개체 보낸 사람, 개체 eventArgs)

아이디어가 있습니까?

[편집] @SWilko의 답변 덕분에 애니메이션이 이미지에만 적용됩니다. ImageBrush를 Image로 변경하고 Grid.Background가 아닌 Grid에 배치하면 위의 코드가 작동합니다.

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> 

편집

이미지를 업데이트하고 처음부터 애니메이션을 시작합니다. 는 내가 Storyboard에 Visibility 전환 애니메이션을 추가하고 지금 코드에서 나는 이미지를 변경하고 애니메이션을 다시 시작 스토리 보드 완료 이벤트를 사용한 뒤에 StoryboardSB

명명했습니다. 귀하의 응용 프로그램에 적합한 경우에만 이것을 수행 할 수 있습니다. 이것은 예를 보여주기위한 것입니다. 예 :