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

时间:2016-06-09 08:17:07

标签: xaml animation uwp expression-blend

我的背景图片需要淡出效果。在运行时期间,可以更改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),则上面的代码可以正常工作。

1 个答案:

答案 0 :(得分:0)

使用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();
};