Question

我的背景图片需要淡出效果。在运行时期间，可以更改imagesource，它可以按预期使用设置的绑定。无论如何，相应的动画不会产生任何视觉效果。目前我的xaml如下所示：

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"

<Page.Content>
    <Grid>
        <Grid.Background>
            <ImageBrush x:Name="image" ImageSource="{Binding Path=ImageSource,UpdateSourceTrigger=PropertyChanged}" Stretch="UniformToFill" >
                <Interactivity:Interaction.Behaviors>
                    <Core:EventTriggerBehavior EventName="ImageOpened" >
                        <Media:ControlStoryboardAction ControlStoryboardOption="Play">
                            <Media:ControlStoryboardAction.Storyboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:1" Storyboard.TargetName="image"/>
                                </Storyboard>
                            </Media:ControlStoryboardAction.Storyboard>
                        </Media:ControlStoryboardAction>
                    </Core:EventTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
            </ImageBrush>
        </Grid.Background>

当我使用时：

             [...]
             <Media:ControlStoryboardAction.Storyboard>
                                <Storyboard>
                                    <FadeInThemeAnimation Storyboard.TargetName="Image" />
                                </Storyboard>
                            </Media:ControlStoryboardAction.Storyboard>

我得到了

System.Runtime.InteropServices.COMException：未检测到已安装的组件。

无法解析TargetName图像。在Windows.UI.Xaml.Media.Animation.Storyboard.Begin（）在Microsoft.Xaml.Interactions.Media.ControlStoryboardAction.Execute（Object sender，Object parameter） at Microsoft.Xaml.Interactivity.Interaction.ExecuteActions（Object sender，ActionCollection actions，Object parameter）在Microsoft.Xaml.Interactions.Core.EventTriggerBehavior.OnEvent（Object sender，Object eventArgs）

有什么想法吗？

[编辑] 感谢@SWilko的回答，我确定动画仅适用于图像。如果我将ImageBrush更改为Image并将其放入网格（而不是Grid.Background），则上面的代码可以正常工作。

Answer 1

使用Image控件更容易，并根据需要在顶部添加更多控件，例如

 <Grid x:Name="LayoutGrid">
    <Image x:Name="image" Stretch="UniformToFill" 
           Source="{Binding Path=ImageSource,UpdateSourceTrigger=PropertyChanged}" 
           Opacity="0" Visibility="Collapsed">
        <interactivity:Interaction.Behaviors>
            <core:EventTriggerBehavior EventName="ImageOpened">
                <media:ControlStoryboardAction x:Name="sbAction" ControlStoryboardOption="Play">
                    <media:ControlStoryboardAction.Storyboard>
                        <Storyboard x:Name="sb">
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                           Storyboard.TargetName="image">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                               Storyboard.TargetName="image">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.5"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </media:ControlStoryboardAction.Storyboard>
                </media:ControlStoryboardAction>
            </core:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Image>        
</Grid>

修改

更新图像并从头开始动画。我已将Visibility切换动画添加到Storyboard并命名为Storyboard sb

现在在代码背后，我使用Storyboard Completed事件来更改图像并重新启动动画。您可以在适合您的应用的情况下执行此操作，这只是为了显示示例。例如

sb.Completed += (sender, e) => { //this is a local image for me you would probably update your ImageSource property here var newimg = new BitmapImage(new Uri("ms-appx:///Assets/rock.jpg")); image.Source = newimg; image.Opacity = 0; image.Visibility = Visibility.Collpased; sb.Begin(); };

UWP - 对背景图像的淡化效果

1 个答案: