Animation when changing background image (C # winrt)

Question

I am working on window 8 of a music application. I change the background of the page with the image of the current song / album. I want to add the fadeIn / dafeOut animation while I am changing the image, but I cannot figure out how I can do this.

<Grid x:Name="LayoutRoot" Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Grid.Resources> <Storyboard x:Name="fadeOutStoryBoard"> <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(LayoutRoot.Background).(ImageBrush.Opacity)" From="1.0" To="0.0" Duration="0:0:10"/> </Storyboard> <Storyboard x:Name="fadeInStoryBoard"> <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(LayoutRoot.Background).(ImageBrush.Opacity)" From="0" To="1.0" Duration="0:0:10"/> </Storyboard> </Grid.Resources> </Grid> In C# code: ImageBrush image = new ImageBrush(); image.ImageSource = new BitmapImage(imageUri); fadeOutStoryBoard.Begin(); MainPage.Current.LayoutRoot.Background = image; fadeInStoryBoard.Begin(); 

The image changes perfectly, but I do not see the animation. I tried changing TargetProperty to (LayoutRoot.Background) .Opacity or (LayoutRoot.Background). (SolidColorBrush.Opacity) but no luck. If I set TargetProperty to "Opacity", then the animation works, but applies to the whole page, not just the background.

Answer 1

Do not put the image as the background of the page, add another Grid / Border that will hold the background. Use Opacity as TargetProperty in the animation.

The reason is that the current animation works on the old image brush, and not on the new one that you created.