How smoothly change image source with fade-in/fade-out? - xaml

Question

I need change background image under FlipView on SelectionChanged. But fired only TourFlipViewBackgroundImageFageIn storyboard and when swipe FlipView image does not change smoothly. How to make the image smoothly changed when the source changes?
<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

That's happend because all storyboards are starting at same time.
You can remove second storyboard:
<media:ControlStoryboardAction
Storyboard="{StaticResource TourFlipViewBackgroundImageFageIn}"
ControlStoryboardOption="Play" />
And add completed event to first (fadeOut) storyboard:
Completed="MyStoryboardCompleted"
Now inside event you can start second storyboard after first one would finish:
private void MyStoryboardCompleted(object sender, object e)
{
var thing = this.Resources["TourFlipViewBackgroundImageFageIn"];
var OtherSB = (Storyboard)thing;
OtherSB.Begin();
}
By the way you can replace image also inside storyboard:
<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>