フェードイン/フェードアウトでイメージソースをどのようにスムーズに変更できますか？

Question

FlipViewのSelectionChangedで背景画像を変更する必要があります。しかし、トーラスボードのTourFlipViewBackgroundImageFageInのみを起動し、スワイプFlipViewイメージがスムーズに変更されません。ソースが変更されたときにイメージをスムーズに変更する方法は？

<Storyboard 
     x:Name="TourFlipViewBackgroundImageFageOut"> 
     <DoubleAnimation 
      Storyboard.TargetName="TourFlipViewBackgroundImage" 
      Storyboard.TargetProperty="Opacity" 
      To="0" 
      Duration="0:0:0.5" /> 
    </Storyboard> 
    <Storyboard 
     x:Name="TourFlipViewBackgroundImageFageIn"> 
     <DoubleAnimation 
      Storyboard.TargetName="TourFlipViewBackgroundImage" 
      Storyboard.TargetProperty="Opacity" 
      To="1" 
      Duration="0:0:0.6" /> 
    </Storyboard> 

<core:DataTriggerBehavior 
      Binding="{Binding SelectedIndex, ElementName=TourFlipView}" 
      ComparisonCondition="Equal" 
      Value="1"> 
      <media:ControlStoryboardAction 
       Storyboard="{StaticResource TourFlipViewBackgroundImageFageOut}" 
       ControlStoryboardOption="Play" /> 
      <core:ChangePropertyAction 
       TargetObject="{Binding ElementName=TourFlipViewBackgroundImage}" 
       PropertyName="Source" 
       Value="ms-appx:///Assets/Images/TourBackgroundImage2.png" /> 
      <media:ControlStoryboardAction 
       Storyboard="{StaticResource TourFlipViewBackgroundImageFageIn}" 
       ControlStoryboardOption="Play" /> 
     </core:DataTriggerBehavior> 

Answer 1

これは、すべてのストーリーボードが同時に開始されているためです。 あなたが二ストーリーボードを削除することができます。

<media:ControlStoryboardAction 
      Storyboard="{StaticResource TourFlipViewBackgroundImageFageIn}" 
      ControlStoryboardOption="Play" /> 

を最初（フェードアウト）絵コンテに完了したイベントを追加します。

private void MyStoryboardCompleted(object sender, object e) 
    { 
     var thing = this.Resources["TourFlipViewBackgroundImageFageIn"]; 
     var OtherSB = (Storyboard)thing; 
     OtherSB.Begin(); 
    } 

を：最初のものは終了します後

Completed="MyStoryboardCompleted" 

今イベント内で2番目のストーリーボードを開始することができます

ストーリーボード内でも画像を置き換えることができます。

<Storyboard x:Key="TransitionImage" Completed="Storyboard_Completed"> 
     <ObjectAnimationUsingKeyFrames 
BeginTime="00:00:0" 
Storyboard.TargetName="TourFlipViewBackgroundImage" 
Storyboard.TargetProperty="(Image.Source)"> 
      <DiscreteObjectKeyFrame KeyTime="00:00:1"> 
       <DiscreteObjectKeyFrame.Value> 
        <BitmapImage UriSource="ms-appx:///Assets/StoreLogo.png" /> 
       </DiscreteObjectKeyFrame.Value> 
      </DiscreteObjectKeyFrame> 
     </ObjectAnimationUsingKeyFrames> 
    </Storyboard>