如何順利地改變圖像源與淡入/淡出？

Question

我需要在SelectionChanged上的FlipView下更改背景圖像。但是隻觸發了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" /> 

並添加完成的事件，首先（淡出）故事板：

Completed="MyStoryboardCompleted" 

現在內部事件時，可以啓動第二分鏡後第一個會完成：

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

順便說一句，你可以在故事板內還替換圖像：

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