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中将这些图像编为一个数组,便于调用.数组的长 ...
随机推荐
- Spring(AbstractRoutingDataSource)实现动态数据源切换--转载
原始出处:http://linhongyu.blog.51cto.com/6373370/1615895 一.前言 近期一项目A需实现数据同步到另一项目B数据库中,在不改变B项目的情况下,只好选择项目 ...
- 数据库通用Jdbc操作
public class JdbcUtil { /** * 关闭一个数据库链接 * @param conn */ public static void closeConnection(Connecti ...
- CSS3 动态魔方的展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 对setTimeout()第一个参数是字串的深入理解以及eval函数的理解
<script language="javascript" type="text/javascript"> var a=1; setTimeout( ...
- [转]在.Net中使用Oracle的表类型和对象类型
本文转自:http://www.cnblogs.com/studyzy/archive/2010/10/13/1850161.html 在一般的数据存取操作过程中,如果要对一个主表和对应的子表进行插入 ...
- yii2 ./yii command : No such file or directory
git clone下来的yii2后台项目,由于需要执行 ./yii migrate命令.执行之后,提示 No such file or directory 我从同样为yii2 basic的./yii ...
- ASP的高效率的分页算法.net,php同样可以参考
一般习惯使用的有两种分页算法,一是传统的ADO分页,二是SELECT TOP分页算法.对于小型数据表,比如一两万的数据量的表,我倾向使用ADO算法,对于大型的数据表,则必须采用后者的算法了. 先来说说 ...
- 常用ASP函数的封装
做ASP开发常常需要用到一些小功能,这些功能通常我们都会封装成函数来使用,本教程提供了许多我们经常用到的ASP函数. <% '所有功能函数名如下: ' StrLength(str) 取得字符串长 ...
- JS 日期工具类-基于yDate
源码下载 前言:最近在用到JS日期操作时,发现有一些不方便,于是搜素了一些网上的资料,基于一个开源工具类-yDate 进行了个性化定制,封装成了一个日期工具类工具函数大概介绍:1.普通的日期操作2. ...
- C#学习笔记4：关键词大小写、复合格式化等
1.取消选择的单选按钮值 RadioButton1.Checked=RadioButton2.Checked = false;//RadioButton1.Text = RadioButto ...