WPF好看的进度条实现浅谈(效果有点类似VS2012安装界面)

  为了界面友好,一般的操作时间较长时,都需要增加进度条提示。由于WPF自带的进度条其实不怎么好看,而且没啥视觉效果。后来,装VS2012时,发现安装过程中进度条效果不错,于是上网查了资料。学习了ModernUI(开源的),地址:https://github.com/firstfloorsoftware/mui

  后来,做了尝试写了个Demo,效果不错。另外,专门录制了tif文件,方便大家看到效果。废话不多说,先展示效果:

一、效果展示

  A、VS2012安装界面图;

  B、个人尝试Demo效果图: 

   

二、实现说明

  1、下载MUI相关代码或者dll文件;

  2、工程中引入该dll,并引入其资源文件;

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

  3、在需要显示进度条的页面,加入控件(其实还是WPF控件,只是MUI扩展了其样式而已);

<Label Margin="280,169,0,0" Style="{StaticResource BackGroundContentText}" x:Name="lblMainState" HorizontalAlignment="Left" VerticalAlignment="Top">正在启动:</Label>
        <ProgressBar Margin="280,200,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="500" Minimum="0" x:Name="ProgressControlRealValue" Maximum="1"  Value="0.1" Height="16" IsIndeterminate="False"/>
        <Label Margin="280,212,0,0" Style="{StaticResource BackGroundContentText}" x:Name="lblProcess" HorizontalAlignment="Left" VerticalAlignment="Top">正在加载地图数据...</Label>
        <ProgressBar Margin="280,250,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"  Minimum="0" x:Name="ProgressControl"  Width="500" Maximum="2" Height="16" IsIndeterminate="True" />

  4、后台实现,由于要根据情况更新进度文字及进度条的值。所以,这里用到了异步BackgroundWorker(具体可以网上查查相关资料);

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;

namespace Monitor.Class
{
    /// <summary>
    /// 异步操作
    /// </summary>
    public class CWorker
    {
        /// <summary>
        /// 对象
        /// </summary>
        private BackgroundWorker backgroundWorker;

        /// <summary>
        /// 后台执行的操作
        /// </summary>
        public Action BackgroundWork { get; set; }

        /// <summary>
        /// 后台任务执行完毕后事件
        /// </summary>
        public event EventHandler<BackgroundWorkerEventArgs> BackgroundWorkerCompleted;

        private BackgroundWorkerEventArgs _eventArgs;//异常参数

        /// <summary>
        /// 构造
        /// </summary>
        public CWorker()
        {
            _eventArgs = new BackgroundWorkerEventArgs();
            backgroundWorker = new BackgroundWorker();
            backgroundWorker.WorkerReportsProgress = true;
            backgroundWorker.WorkerSupportsCancellation = true;
            backgroundWorker.DoWork += new DoWorkEventHandler(backgroundWorker1_DoWork);
            backgroundWorker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(backgroundWorker1_RunWorkerCompleted);
        }

        /// <summary>
        /// 开始工作
        /// </summary>
        public void BegionWork()
        {
            if (backgroundWorker.IsBusy)
                return;
            backgroundWorker.RunWorkerAsync();
        }

        /// <summary>
        /// 工作
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void backgroundWorker1_DoWork(object sender, DoWorkEventArgs e)
        {
            if (BackgroundWork != null)
            {
                try
                {
                    BackgroundWork();
                }
                catch (Exception ex)
                {
                    _eventArgs.BackGroundException = ex;
                }
            }
        }

        /// <summary>
        /// 完成
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void backgroundWorker1_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
        {
            if (this.BackgroundWorkerCompleted != null)
            {
                this.BackgroundWorkerCompleted(null, _eventArgs);
            }
        }
    }

    /// <summary>
    /// 事件
    /// </summary>
    public class BackgroundWorkerEventArgs : EventArgs
    {
        /// <summary>
        /// 后台程序运行时抛出的异常
        /// </summary>
        public Exception BackGroundException { get; set; }
    }
}
namespace Monitor
{
    /// <summary>
    /// Splash.xaml 的交互逻辑
    /// </summary>
    public partial class Splash : Window
    {
        MainWindow m_MainWindow = null;//主窗口
        CWorker m_Work = null;//任务

        public Splash()
        {
            InitializeComponent();
            m_MainWindow = new MainWindow();//创建主窗口对象
            m_Work = new CWorker();
            m_Work.BackgroundWork = this.ProcessDo;
            m_Work.BackgroundWorkerCompleted += new EventHandler<BackgroundWorkerEventArgs>(m_Work_BackgroundWorkerCompleted);
        }

        /// <summary>
        /// 进度提示
        /// </summary>
        public void ProcessDo()
        {
            m_MainWindow.InitData(this);
        }

        /// <summary>
        /// 移动
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }

        /// <summary>
        /// 窗口加载
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            m_Work.BegionWork();
        }

        /// <summary>
        /// 执行完成
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void m_Work_BackgroundWorkerCompleted(object sender, BackgroundWorkerEventArgs e)
        {
            m_MainWindow.Show();
            this.Close();
        }

        /// <summary>
        /// 赋值
        /// </summary>
        /// <param name="text"></param>
        private delegate void SetProcessLabelDelegate(string text, double processValue);
        public void SetProcessValue(string text, double processValue)
        {
            if (!Dispatcher.CheckAccess())
            {
                Dispatcher.Invoke(DispatcherPriority.Send, new SetProcessLabelDelegate(SetProcessValue), text, processValue);
                return;
            }
            this.lblProcess.Content = text;
            this.ProgressControlRealValue.Value = processValue;
        }
    }
}
时间: 2024-07-31 21:21:14

WPF好看的进度条实现浅谈(效果有点类似VS2012安装界面)的相关文章

WPF 实现圆形进度条

项目中用到圆形进度条,首先就想到使用 ProgressBar 扩展一个,在园子里找到 迷途的小榔头 给出的思路和部分代码,自己加以实现.在此感谢 迷途的小榔头! 进度小于60显示红色,大于60则显示绿色.效果如下: 基本思路: 本质上是一个进度条,只是外观有别于矩形进度条,所以需要修改ProgressBar的ControlTemplate. 进度条部分实际是一个扇形,用WPF动态绘出(原理参考迷途的小榔头讲解). 要将进度条的值(Value依赖属性)转换为进度条,需要一个Converter. 根

WPF自定义控件第一 - 进度条控件

本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介绍下实现这个控件的步骤,最后会放出代码.还请高手们给出更好的思路.同时也希望这里的思路能给同道中人一些帮助.话不多说,开始正题. 实现中的一些代码采用了网上现有的方案,代码中通过注释标记了来源,再次对代码作者一并表示感谢. 首先放一张最终效果图. 节点可以被点击 控件会根据绑定的集合数据生成一系列节

WebView 自定义错误界面,WebView 加载进度条,和Logding 效果

---恢复内容开始--- 下载地址,代码就不粘贴了 http://pan.baidu.com/s/1eQncg86 ---恢复内容结束--- 我没有判断是不是网络原因,各位自行判断吧,图片错误信息,及重现加载各种美化的样式请自己写吧,右边的是加载网页的进度条 里面还有一个弹出的dialog 的加载效果, 地址 http://www.cnblogs.com/Mr-Wu/p/4187934.html

用HTML、CSS、JS制作圆形进度条(无动画效果)

逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果: 然后我们再用一个比底圆小的圆去覆盖这个大圆就可以出进度条效果了 代码: <style>     /*支持IE9及以上*/    .circle-bar {margin: 20px; font-size:200px; width: 1em; height: 1em; position: relative;  background-color:

浅谈Android studio中OKHttp安装及简单使用

Google貌似在6.0版本里面删除了HttpClient相关API,鉴于okhttp的口碑相当好,介绍一下OKHttp的安装及使用: 一.安装 对于Android Studio的用户,在Project Structure--->Dependencies 点击"+"号选Library dependency在搜索页面分别搜okttp,okio 注:okhttp内部依赖okio,别忘了同时导入okio 二.用法 (一)Http Get  Http Post //创建okHttpCli

浅谈HTML之模仿人人网登陆界面(新手必学)

为方便大家对web相关知识的了解,现谈谈新手如何从HTML css  Javascript到以后后台的发展.首先,让大家看看HTML仿人人登陆界面: <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <

WPF 圆形进度条(一):整体框架

看了浸水的WPF 实现圆形进度条这篇文章,突发灵感,决定自己做一个圆形进度条(用户控件),名为LoadingRing. 首先,圆形进度条必定有一个Ellipse(这简直就是废话),所以需要一个Ellipse. 为了好看,我把它设为灰色并且半透明. 接着需要填充部分的控件,开始我想用Ellipse,并用StrokeDashArray来填充的,但是后来发现使用StrokeDashArray就难以使用动画.折腾半天,还是在Blend使用Arc形状好了.Arc中的StartAngle指定弧线的起始处,以

iOS之UI--彩虹动画进度条学习和自主封装改进

前言: 首先展示一下这个iOS小示例的彩色进度条动画效果: 阅读本文先说说好处:对于基础不好的读者,可以直接阅读文末尾的"如何使用彩虹动画进度条"章节,然后将我封装好的这个功能模块类用到你的工程项目中即可. 这个效果的示例是老外Nick Jensen在2013年写的一个作品:使用CAGradientLayer的动画精度条View. 本人阅读了老外的源码之后,觉得老外这个进度条的效果很不错,但是觉得他写的代码有待改进. 小贴士:读者可以直接将老外的源码下载下来,跑一下,然后对比本人写的博

atitit. 文件上传带进度条 atiUP 设计 java c# php

atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.xml 3 6. struts extand url 3 7. behide code 3 8. 简化设计 3 1. 设计要求 带进度条 完成提示动画效果.. 2. 原理and 架构 如果需要显示进度条,实时显示文件上传进度 需要使用Ajaxj技术..up到个在的iframe黑头.. 工作原理 其实际