最近做一个项目,看到以前同事写的进度条效果不错,所以,拿来简化了下,不炫,但是项目中还是够用的。

还是,先来看下调用以后的效果

1、因为ProgressbBar的Foreground显示不得不一样,所以,要有一个参数去给控件进行设置,因此定义了一个参数值ForegroundColor

public int ForegroundColor
{
get
{
return _foregroundColor;
} set
{
_foregroundColor = value;
LinearGradientBrush lgb = dictionary["ForegroundColor" + value] as LinearGradientBrush;
if (lgb != null)
proBar.Foreground = txt.Foreground = percent.Foreground = lgb;
}
}

代码里有这么一句话“LinearGradientBrush lgb = dictionary["ForegroundColor" + value] as LinearGradientBrush;”是为了方便通过这是这个参数去样式文件里取样式的。

<LinearGradientBrush x:Key="ForegroundColor1" EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFBBF586" Offset="0.5"/>
<GradientStop Color="#FFD4F9C3" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ForegroundColor2" EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF5BE26E" Offset="0.5"/>
<GradientStop Color="#FF8DEC9C" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ForegroundColor3" EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFB656F2" Offset="0.5"/>
<GradientStop Color="#FFAE8DFE" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ForegroundColor4" EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF3AE9E9" Offset="0.5"/>
<GradientStop Color="#FF8DFDFE" Offset="1"/>
</LinearGradientBrush>

2、既然是ProgressBar就要有一个进度值,这个值,我们用TextBlock来进行显示,一定要实现通知接口,这样,才能保证实时的通知到页面上。

public string ValueText
{
get
{
return _valueText;
} set
{
_valueText = value;
if (this.PropertyChanged != null)
{
this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("ValueText"));
}
}
}

3、启用一个后台线程,来不断的更新进度效果

private void Bgw_DoWork(object sender, DoWorkEventArgs e)
{
for (int i = ; i < BarValue; i++)
{
System.Threading.Thread.Sleep();
proBar.Dispatcher.Invoke(new Action(
delegate
{
if (proBar.Value <= BarValue)
{
proBar.Value++;
}
}));
ValueText = i + "";
}
ValueText = BarValue + "";
}

源码

WPF 简易进度条效果的更多相关文章

  1. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  2. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  3. WPF的进度条progressbar,运行时间elapse time和等待spinner的实现

    今天用.NET 4.5中的TPL的特性做了个小例子,实现了WPF的进度条progressbar,运行时间elapse time和等待spinner. 先上图吧.   这个例子包含4个实现,分别是同步版 ...

  4. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  5. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  6. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  7. js实现进度条效果

    需求分析: 最近学习javascript客户端脚本语言,学到了两个定时器函数setInterval()和setTimeout(),回想起以前在网页上看到的进度条效果可以使用定时器来实现,所以完成了进度 ...

  8. 【jQuery】页面顶部显示的进度条效果

    <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...

  9. 纯css实现进度条效果

    去年7月份做一个公司商城的微信页面(微信用的chrome内核)需要写一个提示返现进度的进度条效果. 一个完整的进度条效果其实可以拆分一下: 一段背景: 一小段的静态的斜纹进度条: 斜纹进度条用线性渐变 ...

随机推荐

  1. 网络基础 港湾FlexHammer5010交换机镜像端口配置

    港湾FlexHammer5010交换机镜像端口配置 by:授客 QQ:1033553122 1.登陆港湾交换机FlexHammer5010交换机 方法: telent 交换机ip 输入用户名 输入用户 ...

  2. WebView动态注入JavaScript脚本

    Demo地址:https://gitee.com/chenyangqi/YouMeDai 背景介绍 在Android与JavaScript交互一文中学习了原生和JS交互,但是如果我们想和别人开发好的w ...

  3. Jenkins自动构建的几种方式

    1.远程URL构建 在任务配置处的构建触发器中选择远程触发,例如,在下图框中输入abc,则只需要在网页上输入地址:Jenkins_URL/job/工程名/build?token=abc 2.利用cur ...

  4. 如何把SQL Server中一个表,一个存储过程,一个视图等改为系统表,系统存储过程,系统视图等

    使用如下存储过程即可: EXEC sys.sp_MS_marksystemobject '[dbo].[TableNameToSystem]' 其中"[dbo].[TableNameToSy ...

  5. windows10移动热点打开后手机不能上网

    电脑的win10操作系统自带有移动热点功能,可以共享上网,类似于手机的热点功能.今天在共享时遇到一些问题,现在解决了分享一下. 如果本身电脑无法上网,即wlan上网功能无效,有可能是驱动不兼容,可以在 ...

  6. scp机器间远程拷贝

    scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令.linux的scp命令可以在linux服务器之间复制文件和目录. 使用语法:scp  [参数 ...

  7. 微信小程序里使用阿里巴巴矢量图标

    登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 icon ...

  8. [IDEA_5] IDEA 集成 Scala

    0. 说明 在 IDEA 中集成 Scala 1. IDEA 集成 Scala 1.1 安装 Scala 插件 Ctrl + Alt + S 进入设置 依次选中 Settings  -->  P ...

  9. Java 基本数据类型 && 位运算

    1. Java基本数据类型 1.1 数据类型示意图 类型 字节数 范围 byte 1 -128~127 short 2 -32768~32767 int 4 -231~231-1 long 8 -26 ...

  10. jQuery html表格排序插件:tablesorter

    ablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载jQ ...