背景 ImageBrush 的 XAML 故事板 [英] XAML Storyboard for Background ImageBrush
问题描述
我有以下 XAML 网格:
I have the following XAML Grid:
<Grid Style="{StaticResource LayoutRootStyle}" x:Name="mainGrid">
<Grid.Resources>
<Storyboard x:Name="FadeOut">
<DoubleAnimation Duration="3" To="0.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="gridBackgroundImageBrush" d:IsOptimized="True"/>
</Storyboard>
<Storyboard x:Name="FadeIn">
<DoubleAnimation Duration="3" To="0.35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="gridBackgroundImageBrush" d:IsOptimized="True"/>
</Storyboard>
</Grid.Resources>
<Grid.Background>
<ImageBrush x:Name="gridBackgroundImageBrush" ImageSource="{Binding BackgroundImage}" Opacity="0.35">
</ImageBrush>
</Grid.Background>
我想以编程方式启动淡出"动画并从 ImageBrush 更改图像,然后启动淡入"动画,如下所示:
I want to programmatically start the "FadeOut" animation and change the Image from ImageBrush, then start the "FadeIn" animation, like this:
private void t_Tick(object sender, object e)
{
try
{
FadeOut.Begin();
this.DefaultViewModel["BackgroundImage"] = BackgroundImage;
FadeIn.Begin();
}
catch { }
}
但是图像在没有任何动画的情况下发生变化.我想问题在于我如何访问 ImageBrush 的Opacity"属性.我尝试了以下语法TargetProperty 属性:
However the image is changing without any animation. I guess the problem is about how I'm accessing the "Opacity" property of the ImageBrush. I tried the following syntax for the TargetProperty attribute:
(Control.Background).(ImageBrush.Opacity)
如 msdn 所示:http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.storyboard.settargetproperty.aspx 但它似乎没有上班.有人可以帮我解决这个问题吗?
as msdn shows here: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.storyboard.settargetproperty.aspx but it doesn't seem to work. Can someone help me with this problem?
推荐答案
解决方案是创建一个图像控件,而不是使用 ImageBrush 绘制图像,然后定义淡入淡出的视觉状态:
The solution was to create an image control rather than drawing the image with ImageBrush and then defining visual states for fading:
<Grid Style="{StaticResource LayoutRootStyle}" x:Name="mainGrid">
<Image Grid.RowSpan="2" x:Name="gridBackgroundImageBrush" Source="{Binding BackgroundImage}" />
</Grid>
<VisualStateGroup x:Name="FadeStates">
<VisualState x:Name="FadeOutState">
<Storyboard>
<DoubleAnimation Duration="{Binding fadeDuration}" From="0.5" To="0.0" x:Name="fadeOutAnimation"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="gridBackgroundImageBrush" />
</Storyboard>
</VisualState>
<VisualState x:Name="FadeInState">
<Storyboard>
<DoubleAnimation Duration="{Binding fadeDuration}" From="0.0" To="0.5" x:Name="fadeInAnimation"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="gridBackgroundImageBrush" />
</Storyboard>
</VisualState>
</VisualStateGroup>
这篇关于背景 ImageBrush 的 XAML 故事板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!