最近学习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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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

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

   1:  DoubleAnimationUsingKeyFrames da = new DoubleAnimationUsingKeyFrames();
   2:   EasingDoubleKeyFrame sd = new EasingDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1005)));
   3:   da.KeyFrames.Add(sd);
   4:   Storyboard.SetTargetName(da, bgBorder.Name);
   5:   DependencyProperty[] propertyChain = new DependencyProperty[]
   6:  {
   7:         Panel.BackgroundProperty,
   8:         Brush.OpacityProperty
   9:  };
  10:  Storyboard.SetTargetProperty(da, new PropertyPath("(0).(1)", propertyChain));

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

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

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

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

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

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

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

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

   1:  bgstoryboard.Children.Add(da);
   2:  bgstoryboard.Children.Add(oa);
   3:  bgstoryboard.Children.Add(da2);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

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

   1:  private void BgSwitch(string imgPath)
   2:  {
   3:        var obj = bgstoryboard.Children.FirstOrDefault(c => c is ObjectAnimationUsingKeyFrames);
   4:        if (obj != null)
   5:        {
   6:              ObjectAnimationUsingKeyFrames oa = obj as ObjectAnimationUsingKeyFrames;
   7:              if (oa.KeyFrames.Count > 0)
   8:              {
   9:                  oa.KeyFrames[0].Value = new BitmapImage(new Uri(imgPath));
  10:              }
  11:        }
  12:  }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

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

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

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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

 

   1:          void bgTimer_Tick(object sender, EventArgs e)
   2:          {
   3:              if (ListImages.Count > 0)
   4:              {
   5:                  if (ImageIndex >= ListImages.Count)
   6:                  {
   7:                      ImageIndex = 0;
   8:                  }
   9:                  BgSwitch(ListImages[ImageIndex]);
  10:                  if (ImageIndex == 1 && ListImages.Count == 1)
  11:                  {
  12:                      bgTimer.Stop();
  13:                  }
  14:                  else
  15:                  {
  16:                      bgstoryboard.Begin(this);
  17:                      ImageIndex++;
  18:                  }
  19:                  
  20:              }
  21:              
  22:          }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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

最后的效果如下：

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

 

Demo下载地址：Demo

WPF 渐隐渐现切换背景图片的更多相关文章

  1. 基于JQuery的渐隐渐现轮播

    <div id="ads"> <div> <!--轮播图片--> <ul> <li><a href="# ...

  2. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  3. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

  4. UGUI 实现界面 渐隐渐现 FadeIn/Out 效果

    孙广东  2015.7.10 事实上熟悉NGUI的人,应该知道  实现渐隐渐现 FadeIn/Out 效果是非常方便的,由于父对象 的 改变会自己主动影响到子对象. 比方 UIWidget.UIPan ...

  5. 在Unity5中使用C#脚本实现UI的下滑、变色、渐隐渐现效果

    一.首先,我们先创建一个Text    依次选择Component→UI→Text创建一个Text,创建完成后如下: 二.创建完成后,在Project面板点击Create→C# Script,本例命名 ...

  6. Unity3D中UGUI不使用DOTween制作渐隐渐现效果

    在做UI后期设计时,我们可能要对UI做一些特效,这篇文章我们来学习下如何在Unity3d中对实现渐隐渐现的效果, 首先我们看下Unity New UI即UGUI中渐隐渐现的做法. 观察我们会发现Uni ...

  7. 【WPF】XAML实现按钮背景图片的点击切换

    原因:要做一组搜索结果的排序按钮(类似一组RadioButton),效果像下图这样.想法是使用原生的按钮控件,将文字左对齐,整个按钮背景是一张图片,通过样式Trigger控制字体变色.背景图切换. 需 ...

  8. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  9. 网页html随机切换背景图片

    首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量. 在script中将这些图像编为一个数组,便于调用.数组的长 ...

随机推荐

  1. Ext.Net 问题收集

    Ext.Net DateField只显示年月 <ext:DateField runat="server" Format="yyyy-MM"> < ...

  2. 如何打开“USB调试”模式？

    请首先确认您的系统版本, 点击「设置」-「关于手机」查看您当前的手机版本号. 如果您使用的是 Android 3.2及以下系统,请按以下步骤操作: STEP1:在应用列表选择「设置」进入系统设置菜单: ...

  3. Debug 之 VS2010网站生成成功，但是发布失败

    用vs做好了网站.清理解决方案和重新生成解决方案都可以.但是发布不能成功.发布不能成功,有错误还好,郁闷的是竟然没有错误提示. 解决方法: 1.发布文件夹权限问题.重新找个地方建立一个发布文件夹即可. ...

  4. svn服务器的搭建

    subversion是优秀的版本管理工具,下面简单介绍svn服务器和客户端的下载.安装.搭建以及使用 一:下载svn服务器和客户端 1:下载地址服务器下载地址:http://subversion.ap ...

  5. centos7下载安装谷歌浏览器

    centos7安装完成结束后,发现自带的火狐浏览器不太习惯,自己还是习惯谷歌浏览器,因为是新手嘛,所以自己就各种找教程看如何下载安装谷歌浏览器,一个一个按照教程试验,终于最后试验成功了一个,亲测可用. ...

  6. 【转】物业管理与移动互联网科技|微信公众平台,物业app,物业O2O

    [导语]当下,物业管理行业正在接受新科技浪潮的冲击和洗礼,业界企业纷纷探索物业服务的新发展模式.云服务.微社区.微信公众平台.app等,这些本来陌生的词汇在物业管理行业变得耳熟能详.在借助科技手段拓展 ...

  7. C#下利用封包、拆包原理解决Socket粘包、半包问题（新手篇）

    介于网络上充斥着大量的含糊其辞的Socket初级教程,扰乱着新手的学习方向,我来扼要的教一下新手应该怎么合理的处理Socket这个玩意儿. 一般来说,教你C#下Socket编程的老师,很少会教你如何解 ...

  8. Apple Watch: WatchKit 应用程序要点

    Apple Watch: WatchKit 应用程序要点 本文译自:Apple Watch: WatchKit App Essentials WatchKit 应用程序架构 上一篇文章简单介绍了 Wa ...

  9. Apache Rewrite url重定向功能的简单配置

    http://www.jb51.net/article/24435.htm 1.Apache Rewrite的主要功能 就是实现URL的跳转和隐藏真实地址,基于Perl语言的正则表达式规范.平时帮助我 ...

  10. UIMenuController/UIPasteboard（2） UITableView上实用剪贴板

    在UITableView上实用剪贴板有两种方法: 一.在tableView的代理方法中直接有三个有关剪贴板的方法. //某行是否允许show菜单 -(BOOL)tableView:(UITableVi ...