WPF 渐隐渐现切换背景图片

最近学习WPF，尝试着自己做一些小玩意，也遇到了一些问题，于是整理记录以便日后查阅。

我们都知道WPF可以实现一些很炫的效果，然而有时候为达到这个目的却并不是一件很容易的事情。比如：在软件中我希望能够通过渐隐渐现实现窗体背景的切换，在网上也没找到相关的Demo,只好硬着头皮去看相关的API。

要实现渐隐渐现的效果并不难，只需要通过控制修改背景的透明度即可实现，然而，如何在渐隐之后切换另一个图片背景再渐现出来却着实难了我很久。所幸终于找到了一个解决方案。相关实现过程如下：

  <Border x:Name="bgBorder" CornerRadius="3,3,3,3">
        <Border.Background>
            <ImageBrush ImageSource="Image/bg.jpg" Stretch="UniformToFill"/>
        </Border.Background>
    ...
  </Border>

这里我使用的是自定义窗体，如上所示，我们需要对Border的背景图片进行替换。

首先是定义一段渐隐的动画，通过修改背景的透明度即可：

DoubleAnimationUsingKeyFrames da = new DoubleAnimationUsingKeyFrames();
 EasingDoubleKeyFrame sd = new EasingDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1005)));
 da.KeyFrames.Add(sd);
 Storyboard.SetTargetName(da, bgBorder.Name);
 DependencyProperty[] propertyChain = new DependencyProperty[]
{
       Panel.BackgroundProperty,
       Brush.OpacityProperty
};
Storyboard.SetTargetProperty(da, new PropertyPath("(0).(1)", propertyChain));

 

然后定义一段渐现的动画，也是通过修改透明度进行：

DoubleAnimationUsingKeyFrames da2 = new DoubleAnimationUsingKeyFrames();
da2.BeginTime = new TimeSpan(0, 0, 0, 1, 5);
EasingDoubleKeyFrame sd2 = new EasingDoubleKeyFrame(1, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1200)));
da2.KeyFrames.Add(sd2);
Storyboard.SetTargetName(da2, bgBorder.Name);
Storyboard.SetTargetProperty(da2, new PropertyPath("(0).(1)", propertyChain));

 

最后是在两段动画之间插入一个修改背景图片的小动画：

ObjectAnimationUsingKeyFrames oa = new ObjectAnimationUsingKeyFrames();
DiscreteObjectKeyFrame diso = new DiscreteObjectKeyFrame(new BitmapImage(new Uri(@"/Test;component/Image/bg.jpg", UriKind.Relative)), KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(10)));
 oa.KeyFrames.Add(diso);
 oa.BeginTime = new TimeSpan(0, 0, 0, 1, 0);
 Storyboard.SetTargetName(oa, bgBorder.Name);
DependencyProperty[] propertyChain2 = new DependencyProperty[]
{
       Panel.BackgroundProperty,
       ImageBrush.ImageSourceProperty
};
Storyboard.SetTargetProperty(oa, new PropertyPath("(0).(1)", propertyChain2));

 

接着将三段动画组合起来：

bgstoryboard.Children.Add(da);
bgstoryboard.Children.Add(oa);
bgstoryboard.Children.Add(da2);

 

但是现在只是做到了背景的渐隐渐现还是无法做到背景切换，如下功能就是实现背景切换：

private void BgSwitch(string imgPath)
{
      var obj = bgstoryboard.Children.FirstOrDefault(c => c is ObjectAnimationUsingKeyFrames);
      if (obj != null)
      {
            ObjectAnimationUsingKeyFrames oa = obj as ObjectAnimationUsingKeyFrames;
            if (oa.KeyFrames.Count > 0)
            {
                oa.KeyFrames[0].Value = new BitmapImage(new Uri(imgPath));
            }
      }
}

 

想要实现每隔一段时间更换一次背景，我们还需要一个Timer来控制：

bgTimer = new DispatcherTimer();
bgTimer.Interval = new TimeSpan(0, 0,5);
bgTimer.Tick += bgTimer_Tick;

为了看到效果，将Timer间隔设置为五秒

 

        void bgTimer_Tick(object sender, EventArgs e)
        {
            if (ListImages.Count > 0)
            {
                if (ImageIndex >= ListImages.Count)
                {
                    ImageIndex = 0;
                }
                BgSwitch(ListImages[ImageIndex]);
                if (ImageIndex == 1 && ListImages.Count == 1)
                {
                    bgTimer.Stop();
                }
                else
                {
                    bgstoryboard.Begin(this);
                    ImageIndex++;
                }

            }

        }

ListImages是要替换的背景图片路径集合，如果只有一张背景图片，我们是不需要启动替换动画的。

最后的效果如下：

隔五秒之后，替换成另外一个背景：

 

Demo下载地址：Demo