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中将这些图像编为一个数组,便于调用.数组的长 ...
随机推荐
- linux文件 编辑常用 inux手把手vi ---针对文件操作
命令语法 说明 使用频率(1:常用;2一般:3:偶尔) 1.VI编辑器的启动与退出 VI编辑器的启动与退出 vi file1 新建一个文本文件名为file1 :q 退出,如果对缓存去进行过修改,则提 ...
- C#_mvc_ajax_return data
假设cshtml文件中是这样的: <script type="text/javascript"> $(document).ready(function(){ $(&qu ...
- Java_swing控件实例
package ming; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.awt.event ...
- Debug 之 The state information is invalid for this page and might be corrupted
1.问题描述: 网站部署之后,排序或者搜索之后报错:The state information is invalid for this page and might be corrupted 2.问题 ...
- FastDFS为什么要结合Nginx
FastDFS为什么要结合Nginx? 我们在使用FastDFS部署一个分布式文件系统的时候,通过FastDFS的客户端API来进行文件的上传.下载.删除等操作.同时通过FastDFS的HTTP服务器 ...
- 一些ecplise 快捷键
1 F5:下一步,可以进入下一个函数栈 2 F6:当前函数的下一步,不会进入其他的函数. 3 F8:下一个断点. 4 选中一个变量或者表达式,按ctrl+shift+i 来查看内容或者添加监视的方式. ...
- [转]Oracle ORA-01403: no data found Exception SYS_REFCURSOR
本文转自:http://stackoverflow.com/questions/9104153/what-is-the-correct-way-to-deal-with-this-oracle-ora ...
- 快递查询api(多接口方案)
/** 本环境使用php+smarty,结合两种快递api调取快递数据 * 说明,先快递鸟调取数据,失败后再调取快递网的数据* 快递鸟 http://www.kdniao.com 快递网 http:/ ...
- latch和DFF的区别和联系
1.latch的缺点 ①没有时钟端,不受系统同步时钟的控制,无法实现同步操作:和当前我们尽可能采用时序电路的设计思路不符. ②对输入电平敏感,受布线延迟影响较大,很难保证输出没有毛刺产生: ③latc ...
- Python(2.7.6) copy - 浅拷贝与深拷贝
Python 标准库的 copy 模块提供了对象拷贝的功能. copy 模块中有两个函数 copy 和 deepcopy,分别支持浅拷贝与深拷贝. copy_demo.py import copy c ...