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

将完成的事件添加到第一个（fadeOut）故事板：

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>

如何通过淡入/淡出来平滑地改变图像源？

1 个答案: