仿vs实现WPF好看的进度条

 更新时间:2021年9月22日 10:10  点击:1635

为了界面友好,一般的操作时间较长时,都需要增加进度条提示。由于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;
    }
  }
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

[!--infotagslink--]

相关文章

  • 解决echarts 一条柱状图显示两个值,类似进度条的问题

    这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
  • jQuery实现简单的文件上传进度条效果

    本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
  • ant design中upload组件上传大文件,显示进度条进度的实例

    这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
  • jquery实现模拟百分比进度条渐变效果代码

    本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考,具体如下:这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样。运行效果截图如下:在线演示地址如下:http://demo.jb51.net...2015-10-30
  • C#实现带进度条的ListView

    这篇文章主要介绍了C#实现带进度条的ListView 的相关资料,需要的朋友可以参考下...2020-06-25
  • nodejs 终端打印进度条实例代码

    本篇文章主要介绍了nodejs 终端打印进度条实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-04-27
  • PHP的APC模块实现上传进度条

    APC模块,它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来, 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30
  • Bootstrap进度条组件知识详解

    在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
  • php使用APC实现实时上传进度条功能

    php不具备实时上传进度条功能,如果想有这种功能我们一般会使用ajax来实现,但是php提供了一个apc,它就可以与php配置实现上传进度条功能。 主要针对的是window上的应用。 1.服务器要支持apc扩展,没有此扩展的话,下载一个扩...2015-10-30
  • BootStrap Progressbar 实现大文件上传的进度条的实例代码

    这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01
  • VS Code C/C++环境配置教程(无法打开源文件“xxxxxx.h”或者检测到 #include 错误,请更新includePath)(POSIX API)

    这篇文章主要介绍了VS Code C/C++环境配置教程(无法打开源文件“xxxxxx.h” 或者 检测到 #include 错误。请更新includePath) (POSIX API),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-13
  • PHP利用APC模块实现大文件上传进度条的方法

    php 大文件带进度的上传,一直是一个令php程序员很苦恼的问题。查询baidu 、Google ,大体做带进度的上传方式为:flash+php,socket,apc+php等,下面我介绍了apc +php+ajax制作的带进度的上传,并贴出源码,希望对大家有用。 Altern...2015-10-30
  • Bootstrap进度条与AJAX后端数据传递结合使用实例详解

    这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下...2017-04-27
  • C# Oracle批量插入数据进度条的实现代码

    这篇文章主要介绍了C# Oracle批量插入数据进度条的实现代码,需要的朋友可以参考下...2020-06-25
  • C#实现带百分比的进度条功能示例

    这篇文章主要介绍了C#实现带百分比的进度条功能,分析了带百分比进度条的功能需求并结合实例形式给出了具体实现步骤与相关操作方法,需要的朋友可以参考下...2020-06-25
  • C#利用VS中插件打包并发布winfrom程序

    这篇文章主要为大家详细介绍了C#利用VS中插件打包并发布winfrom程序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • VS+opencv实现鼠标移动图片

    这篇文章主要为大家详细介绍了VS+opencv实现鼠标移动图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
  • python输出结果刷新及进度条的实现操作

    这篇文章主要介绍了python输出结果刷新及进度条的实现操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-13
  • Python 给下载文件显示进度条和下载时间的实现

    这篇文章主要介绍了Python 给下载文件显示进度条和下载时间的代码,本文通过实例代码截图相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-10
  • 有趣的bootstrap走动进度条

    这篇文章主要为大家详细介绍了如何实现有趣的bootstrap走动进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02