CODEWITHSUNDEEP
xamlanimationuwpbehavior
Dmitry
Dmitry

Reputation: 1165

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

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>

Upvotes: 0

Views: 908

Answers (1)

Alexej Sommer
Alexej Sommer

Reputation: 2679

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>

Upvotes: 1

Related Questions