HubSection背景的双重动画（Windows 8.1，XAML，C＃）

Question

Is there a way to fade out and fade in the background image of a HubSection in Windows 8.1 XAML/C# Control?

Actually I have this XAML-Code:

<HubSection x:Name="Section0" Width="700" Margin="0,0,80,0" VerticalContentAlignment="Bottom">
   <HubSection.Background>
      <ImageBrush x:Name="Section0Background" ImageSource="/Assets/images/img1.jpg" Stretch="UniformToFill" />
   </HubSection.Background>
   <!--... some other markup ... -->
</HubSection>

I want to fade out the background image each 10 seconds --> change the image --> fade in again.

I have tried this by using the following code lines:

Storyboard storyboard = new Storyboard();

DoubleAnimation animation = new DoubleAnimation();
animation.From = 1.0;
animation.To = 0.0;
animation.BeginTime = TimeSpan.FromSeconds(0);
animation.Duration = new Duration(TimeSpan.FromMilliseconds(200));

storyboard.Children.Add(animation);

Storyboard.SetTargetProperty(animation, "Opacity");
Storyboard.SetTarget(animation, Section0Background);

storyboard.Completed += storyboard_Completed; // --> on complete change image and fade in
storyboard.Begin();

But this does not work. If the storyboard has completed the image will change but with no fading effects. Is the HubSection.Background not "animatable"?

Answer 1

I do not believe you can reference controls in the code behind once they are in a HubSection. So your Storyboard.SetTarget is probably the culprit here where it tries to reference Section0Background. You can probably build most of this animation in XAML but for the changing of the image what you will have to do is bind the ImageBrush's ImageSource property and set the DataContext of the HubSection.

Then in your code behind when the storyboard completed event fires, you change your ViewModel (which is set as the HubSection's DataContext) which raises an event that will rebind your ImageSource property.

In summary you can't reference controls in HubSections. You can only change properties through Data Binding.

Here's a similar question/answer .