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>
.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 渐隐渐现切换背景图片的更多相关文章
- 基于JQuery的渐隐渐现轮播
<div id="ads"> <div> <!--轮播图片--> <ul> <li><a href="# ...
- jQuery鼠标悬停文字渐隐渐现动画效果
jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...
- js渐隐渐现透明度变化淡入淡出轮播图
js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...
- UGUI 实现界面 渐隐渐现 FadeIn/Out 效果
孙广东 2015.7.10 事实上熟悉NGUI的人,应该知道 实现渐隐渐现 FadeIn/Out 效果是非常方便的,由于父对象 的 改变会自己主动影响到子对象. 比方 UIWidget.UIPan ...
- 在Unity5中使用C#脚本实现UI的下滑、变色、渐隐渐现效果
一.首先,我们先创建一个Text 依次选择Component→UI→Text创建一个Text,创建完成后如下: 二.创建完成后,在Project面板点击Create→C# Script,本例命名 ...
- Unity3D中UGUI不使用DOTween制作渐隐渐现效果
在做UI后期设计时,我们可能要对UI做一些特效,这篇文章我们来学习下如何在Unity3d中对实现渐隐渐现的效果, 首先我们看下Unity New UI即UGUI中渐隐渐现的做法. 观察我们会发现Uni ...
- 【WPF】XAML实现按钮背景图片的点击切换
原因:要做一组搜索结果的排序按钮(类似一组RadioButton),效果像下图这样.想法是使用原生的按钮控件,将文字左对齐,整个按钮背景是一张图片,通过样式Trigger控制字体变色.背景图切换. 需 ...
- 一个简单且丑陋的js切换背景图片基础示例
不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...
- 网页html随机切换背景图片
首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量. 在script中将这些图像编为一个数组,便于调用.数组的长 ...
随机推荐
- C#中Strings VS. StringBuilder
string mappingHandler = String.Format(@"""[name='BTSHTTPReceiveModule',path='BTSHTTPR ...
- ADO.Net的小知识（连接数据库）
数据库连接分为两种,分别是断开式连接和打开式连接.下面分别和大家分享一下断开时连接的查询: (1)引入命名空间:using System.Data.SqlClient; 该语句用于导入和ADO.Net ...
- Mysql数据库导出压缩并保存到指定位置备份脚本
#!/bin/bashbackdir=/home/shaowei/dbbakdbuser='dbusername'dbpass='dbpasswd'dblist=$(ls -p /var/lib/my ...
- jQuery执行请求demo
Ajax教程地址 4.3.2 执行GET请求 使用jQuery来执行GET请求有多种可选的方法.最简单的方法是使用$.get(),其参数是一个URL和一个回调函数:该回调函数有两个参数:一个是从服务器 ...
- PHP中$_POST,$_GET,$_REQUEST,$_FILES全局变量的全局指什么
我一直担心,同一个表单,同时提交2次会发生什么事?在服务器端表单变量会不会彼此覆盖呢?也就是说假如我们在PHP中用$_REQUEST["name"]访问某个表单变量,会不会因为别人 ...
- 圆满完成Web安全测试培训课程广州公开班！
圆满完成Web安全测试培训课程广州公开班! http://gdtesting.com/news.php?id=187 下期<Web安全测试最佳实践>公开课通知:8月9.10日地点:广州 课 ...
- MySQL创建/删除/清空表，添加/删除字段
创建表: create table tablename (column_name column_type); create table table_name( id int not null auto ...
- 关于SQL语言分类
从功能上划分,SQL语言可以分为DDL,DML和DCL三大类. 事务:可以作用在DML(update.insert.delete)语句上. 1. DDL(Data Definition Languag ...
- Python(2.7.6) 标准日志模块 - Logging Handler
Python 标准日志模块使用 Handler 控制日志消息写到不同的目的地,如文件.流.邮件.socket 等.除了StreamHandler. FileHandler 和 NullHandler ...
- Error:(6, 0) No such property: outputDir for class: org.gradle.api.internal.project.DefaultProject_Decorated
在学习greenDao过程中build.gradle文件中出现这个错误,找了半天不知道为什么.代码我是在git上下载的Demo,按理说应该是没问题的.到最后发现缺少了一个关键字Def // 这样有问题 ...