在.NET 中建立一个平滑的进度条


  概述
  本文描述了如何建立一个简单的、自定义的用户控件——一个平滑的进度条。
  
  在早先的进度条控件版本中,例如在 Microsoft Windows Common Controls ActiveX 控件中提供的版本,您可以看到进度条有两种不同的视图。您可以通过设定 Scrolling 属性来设定 Standard 视图或是 Smooth 视图。 Smooth 视图提供了一个区域来平滑的显示进度, Standard 试图则看上去是由一个一个方块来表示进度的。
  
  在 Visual C# .NET 中提供的进度条控件只支持 Standard 视图。
  
  本文的代码样例揭示了如何建立一个有如下属性的控件:
  
  Minimum。该属性表示了进度条的最小值。默认情况下是 0 ;您不能将该属性设为负值。
  Maximum。该属性表示了进度条的最大值。默认情况下是 100 。
  Value。该属性表示了进度条的当前值。该值必须介于 Minimum 和 Maximum 之间。
  ProgressBarColor。该属性表示了进度条的颜色。
  返回
  --------------------------------------------------------------------------------
  
  建立一个自定义的进度条控件
  1、按着下面的步骤,在 Visual C# .NET 中建立一个 Windows Control Library 项目:
  
    a、打开 Microsoft Visual Studio .NET。
  
    b、点击 File 菜单,点击 New ,再点击 Project 。
  
    c、在 New Project 对话框中,在 Project Types 中选择 Visual C# Projects,然后在 Templates 中选择 Windows Control Library 。
  
    d、在 Name 框中,填上 SmoothProgressBar ,并点击 OK 。
  
    e、在 Project Explorer 中,重命名缺省的 class module ,将 UserControl1.cs 改为 SmoothProgressBar.cs 。
  
    f、在该 UserControl 对象的 Property 窗口中,将其 Name 属性从 UserControl1 改为 SmoothProgressBar 。
  
  2、此时,您已经从 control 类继承了一个新类,并可以添加新的功能。但是,ProgressBar累是密封(sealed)的,不能再被继承。因此,您必须从头开始建立这个控件。
  
  将下面的代码添加到UserControl模块中,就在“Windows Form Designer generated code”之后:
  
  int min = 0; // Minimum value for progress range
  int max = 100; // Maximum value for progress range
  int val = 0; // Current progress
  Color BarColor = Color.Blue; // Color of progress meter
  
  protected override void OnResize(EventArgs e)
  {
   // Invalidate the control to get a repaint.
   this.Invalidate();
  }
  
  protected override void OnPaint(PaintEventArgs e)
  {
   Graphics g = e.Graphics;
   SolidBrush brush = new SolidBrush(BarColor);
   float percent = (float)(val - min) / (float)(max - min);
   Rectangle rect = this.ClientRectangle;
  
   // Calculate area for drawing the progress.
   rect.Width = (int)((float)rect.Width * percent);
  
   // Draw the progress meter.
   g.FillRectangle(brush, rect);
  
   // Draw a three-dimensional border around the control.
   Draw3DBorder(g);
  
   // Clean up.
   brush.Dispose();
   g.Dispose();
  }
  
  public int Minimum
  {
   get
   {
   return min;
   }
  
   set
   {
   // Prevent a negative value.
   if (value < 0)
   {
   min = 0;
   }
  
   // Make sure that the minimum value is never set higher than the maximum value.
   if (value > max)
   {
   min = value;
   min = value;
   }
  
   // Ensure value is still in range
   if (val < min)
   {
   val = min;
   }
  
   // Invalidate the control to get a repaint.
   this.Invalidate();
   }
  }
  
  public int Maximum
  {
   get
   {
   return max;
   }
  
   set
   {
   // Make sure that the maximum value is never set lower than the minimum value.
   if (value < min)
   {
   min = value;
   }
  
   max = value;
  
   // Make sure that value is still in range.
   if (val > max)
   {
   val = max;
   }
  
   // Invalidate the control to get a repaint.
   this.Invalidate();
   }
  }
  
  public int Value
  {
   get
   {
   return val;
   }
  
   set
   {
   int oldValue = val;
  
   // Make sure that the value does not stray outside the valid range.
   if (value < min)
   {
   val = min;
   }
   else if (value > max)
   {
   val = max;
   }
   else
   {
   val = value;
   }
  
   // Invalidate only the changed area.
   float percent;
  
   Rectangle newValueRect = this.ClientRectangle;
   Rectangle oldValueRect = this.ClientRectangle;
  
   // Use a new value to calculate the rectangle for progress.
   percent = (float)(val - min) / (float)(max - min);
   newValueRect.Width = (int)((float)newValueRect.Width * percent);
  
   // Use an old value to calculate the rectangle for progress.
   percent = (float)(oldValue - min) / (float)(max - min);
   oldValueRect.Width = (int)((float)oldValueRect.Width * percent);
  
   Rectangle updateRect = new Rectangle();
  
   // Find only the part of the screen that must be updated.
   if (newValueRect.Width > oldValueRect.Width)
   {
   updateRect.X = oldValueRect.Size.Width;
   updateRect.Width = newValueRect.Width - oldValueRect.Width;
   }
   else
   {
   updateRect.X = newValueRect.Size.Width;
   updateRect.Width = oldValueRect.Width - newValueRect.Width;
   }
  
   updateRect.Height = this.Height;
  
   // Invalidate the intersection region only.
   this.Invalidate(updateRect);
   }
  }
  
  public Color ProgressBarColor
  {
   get
   {
   return BarColor;
   }
  
   set
   {
   BarColor = value;
  
   // Invalidate the control to get a repaint.
   this.Invalidate();
   }
  }
  
  private void Draw3DBorder(Graphics g)
  {
   int PenWidth = (int)Pens.White.Width;
  
   g.DrawLine(Pens.DarkGray,
   new Point(this.ClientRectangle.Left, this.ClientRectangle.Top),
   new Point(this.ClientRectangle.Width - PenWidth, this.ClientRectangle.Top));
   g.DrawLine(Pens.DarkGray,
   new Point(this.ClientRectangle.Left, this.ClientRectangle.Top),
   new Point(this.ClientRectangle.Left, this.ClientRectangle.Height - PenWidth));
   g.DrawLine(Pens.White,
   new Point(this.ClientRectangle.Left, this.ClientRectangle.Height - PenWidth),
   new Point(this.ClientRectangle.Width - PenWidth, this.ClientRectangle.Height - PenWidth));
   g.DrawLine(Pens.White,
   new Point(this.ClientRectangle.Width - PenWidth, this.ClientRectangle.Top),
   new Point(this.ClientRectangle.Width - PenWidth, this.ClientRectangle.Height - PenWidth));
  }
  
  3、在 Build 菜单中,点击 Build Solution 来编译整个项目。
  
  返回
  --------------------------------------------------------------------------------
  
  建立一个简单的客户端应用
  1、在 File 菜单中,点击 New ,再点击Project。
  
  2、在 Add New Project 对话框中,在 Project Types 中点击 Visual C# Projects,在 Templates 中点击 Windows Application,并点击 OK。
  
  3、按照下面的步骤,在 Form 上添加两个 SmoothProgressBar 实例:
  
    a、在 Tools 菜单上,点击 Customize Toolbox。
  
    b、点击 .NET Framework Components 页。
  
    c、点击 Browse,然后选中你在 Create a Custom ProgressBar Control 段中建立的 SmoothProgressBar.dll 文件。
  
    d、点击 OK。您可以看到在 toolbox 中已经有 SmoothProgressBar 控件了。
  
    e、从 toolbox 中拖两个 SmoothProgressBar 控件的实例到该 Windows Application 项目中的默认 form 上。
  
  4、从 toolbox 页中拖一个 Timer 控件到 form 上。
  
  5、将下面的代码添加到 Timer 控件的 Tick 事件中:
  
  if (this.smoothProgressBar1.Value > 0)
  {
   this.smoothProgressBar1.Value--;
   this.smoothProgressBar2.Value++;
  }
  else
  {
   this.timer1.Enabled = false;
  }
  
  6、从 toolbox 页中拖一个 Button 控件到 form 上。
  
  7、将下面的代码添加到 Button 控件的 Click 事件中:
  
  this.smoothProgressBar1.Value = 100;
  this.smoothProgressBar2.Value = 0;
  
  this.timer1.Interval = 1;
  this.timer1.Enabled = true;
  
  8、在 Debug 菜单中,点击 Start 来运行样例项目。
  
  9、点击Button。注意观察那两个进度指示器。一个逐渐减小,另一个逐渐增加。
 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 我可以为您提供一个示例,可以帮助您创建一个NetCore SignalR进度条:1.创建一个ASP.NET Core项目并安装Microsoft.AspNetCore.SignalR NuGet包。2.创建一个新的Hub类,用于处理客户端/服务器之间的连接:public class ProgressHub : Hub { public async Task SendProgress(int progress) { await Clients.All.SendAsync("UpdateProgress", progress); } }3.在Startup.cs文件添加SignalR服务:public void ConfigureServices(IServiceCollection services) { services.AddSignalR(); }4.在Startup.cs文件添加SignalR路由:public void Configure(IApplicationBuilder app) { app.UseSignalR(routes => { routes.MapHub<ProgressHub>("/progress"); }); }5.在客户端创建一个连接:var connection = new signalR.HubConnectionBuilder() .withUrl("/progress") .build();6.从服务器接收更新:connection.on("UpdateProgress", (progress) => { // 更新进度条 });7.从客户端发送更新:connection.invoke("SendProgress", progress); ### 回答2: SignalR 是一个开发实时网络应用程序的框架,可以使服务器端代码推送内容到连接的客户端。要写一个 netcore SignalR 进度条,可以按照以下步骤进行: 1. 创建一个新的 ASP.NET Core 项目。在项目使用 SignalR NuGet 包,以便可以方便地使用 SignalR 框架。 2. 在项目创建一个名为 "ProgressHub" 的 SignalR Hub。这个 Hub 将用于与客户端建立连接,并用来更新进度条的值。 3. 在 ProgressHub 创建一个名为 "UpdateProgress" 的方法,用于接收客户端发送的进度更新请求,并广播更新的进度条值给所有已连接的客户端。 4. 创建一个名为 "ProgressBar" 的 Razor Page 或一个视图,用于显示进度条。在该视图,可以使用 JavaScript 和 SignalR 的 JavaScript 客户端库来订阅 ProgressHub 的进度更新方法,并显示更新的进度条值。 下面是一个简单的示例代码: ```csharp // ProgressHub.cs using Microsoft.AspNetCore.SignalR; using System.Threading.Tasks; namespace YourNamespace { public class ProgressHub : Hub { public async Task UpdateProgress(int value) { // 更新进度条 await Clients.All.SendAsync("UpdateProgressBar", value); } } } // ProgressBar.cshtml @page @model ProgressBarModel <script src="~/lib/signalr/dist/browser/signalr.js"></script> <h1>Progress Bar</h1> <div id="progressBar"></div> <script> const connection = new signalR.HubConnectionBuilder() .withUrl("/progressHub") .build(); connection.on("UpdateProgressBar", function (value) { document.getElementById("progressBar").innerText = `${value}%`; }); connection.start().catch(function (err) { return console.error(err.toString()); }); </script> ``` 这是一个简单的示例,当客户端连接到 SignalR Hub 并调用 UpdateProgress 方法时,进度条将更新并显示给所有客户端。你可以根据自己的需求进行进一步的修改和自定义。 ### 回答3: SignalR是一个强大的实时通信库,可以在Web应用程序实现实时的多人协作和数据更新。我们可以利用SignalR来实现一个进度条的功能。 首先,我们需要创建一个ASP.NET Core Web应用程序。在Startup类的ConfigureServices方法,我们需要注册SignalR服务,以便我们可以在应用程序使用它。在Configure方法,我们需要配置SignalR端点。 在项目创建一个名为ProgressHub的SignalR Hub类。这个类将处理客户端的请求,并发送实时进度更新给客户端。在这个类,我们可以定义一个名为"UpdateProgressBar"的方法,该方法将接收进度的更新,并将其广播给所有连接的客户端。 在客户端页面,我们需要先引用SignalR的JavaScript库,然后创建一个连接到SignalR Hub的实例。我们可以使用Connection.on方法来监听来自ProgressHub的实时进度更新。然后,我们可以将这些更新显示在进度条,以便用户可以实时查看进度。 接下来,我们可以在后台代码模拟进度的变化。我们可以使用一个定时任务不断更新进度,并通过ProgressHub的UpdateProgressBar方法发送更新给客户端。在定时任务的每次运行,我们可以计算当前的进度,并将其作为更新发送给客户端。 下面是一个简单的示例代码,可以实现一个使用SignalR的实时进度条: Startup.cs文件: ```csharp using Microsoft.AspNetCore.Builder; using Microsoft.Extensions.DependencyInjection; namespace ProgressBarApp { public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddSignalR(); } public void Configure(IApplicationBuilder app) { app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapHub<ProgressHub>("/progressHub"); }); } } } ``` ProgressHub.cs文件: ```csharp using Microsoft.AspNetCore.SignalR; using System.Threading.Tasks; namespace ProgressBarApp { public class ProgressHub : Hub { public async Task UpdateProgressBar(int progress) { await Clients.All.SendAsync("progressUpdate", progress); } } } ``` Index.cshtml文件: ```html <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="/signalr/hubs"></script> </head> <body> <div id="progressBar"></div> <script> $(function() { var connection = $.connection("/progressHub"); connection.on("progressUpdate", function(progress) { $("#progressBar").width(progress + "%"); }); connection.start(); }); </script> </body> </html> ``` 这样,一个使用SignalR实现的实时进度条就完成了。当后台进度更新时,客户端将实时收到更新,并将其反映在进度条上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值