- [DEVEXPRESS] Hướng dẫn bật tính năng Scroll Pixcel in Touch trên GridView
- [DEVEXPRESS] Hướng dẫn sử dụng TileBar viết ứng dụng duyệt hình ảnh Winform
- [DEVEXPRESS] Tô màu border TextEdit trên Winform
- [C#] Lấy dữ liệu từ Console Write hiển thị lên textbox Winform
- [C#] Hiển thị Progress bar trên Window Console
- [C#] Di chuyển control Runtime và lưu layout trên winform
- [SQLSERVER] Sử dụng hàm NULL IF
- [C#] Chia sẽ source code mã đi tuần bằng giao diện Winform
- [C#] Flash Window in Taskbar Winform
- Download và Giải nén tập tin File sử dụng Powershell
- [C#] Hướng dẫn cách lấy thông tin đăng nhập tài khoản và mật khẩu web browser trên windows
- [VB.NET] CRUD Thêm xóa sửa tìm kiếm Realtime FireBase
- [C#] Hiển thị thông báo Toast Message trong lập trình Winform
- [C#] Cấu hình định dạng ngày tháng, thời gian trên Windows cho ứng dụng Winform
- [C#] Rút gọn đường dẫn link url với TinyURL API
- [C#] Hướng dẫn cách bo tròn winform with Radius
- [C#] Chia sẽ class BackGroundOverlay Show Modal cho Winform
- [C#] Hướng dẫn Flip Image Winform
- [C#] Invoke là gì? cách sử dụng phương thức Invoke()
- [C#] Hướng dẫn chia sẽ file, folder từ ứng dụng sang Zalo Chat
Hướng dẫn hiển thị Progress bar trong grid control
Hôm nay, mình xin hướng dẫn các bạn cách hiển thị Progress bar trong Grid control của Devexpress.
Ví dụ: mình có một grid view data trong đó có hiển thị số phần trăm tỉ lệ (%). Để nhìn cho trực quan, tỉ lệ phần trăm của sản phẩm, mình có thể hiện thỉ tỉ lệ phần trăm thành progress bar hiển thị thanh đo tỉ lệ.
Trong Devexpress, để hiển thị progress bar trong cell, mình chỉ cần convert cell đó sang progress bar là có thể hiển thị được số phần trăm.
Nhưng bài viết này, mình xin hướng dẫn các bạn cách, hiện thị progress bar theo màu.
Ví dụ:
Tỉ lệ từ 0 => 20% mình sẽ tô màu đỏ
Từ 21% => 50% mình sẽ tô màu vàng
Từ 51% => 75% mình tô màu xanh nhạt.
Từ 76% => 100% mình tô màu xanh đậm.
Các bạn có thể xem giao diện hiển như ứng dụng bên dưới:
Vì cách tạo ứng dụng trên rất đơn giản các bạn có thể copy và tạo 3 file với đoạn code như hình bên dưới.
Để hiển thị được ứng dụng như hình trên các bạn cần tạo 3 file: SingleRepositoryProgressBar.vb và DifferentRepositoriesProgressBar.vb và file Form1.vb.
Dưới đây là code của file SingleRepositoryProgressBar.vb
Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Text
Imports DevExpress.XtraGrid.Columns
Imports DevExpress.XtraGrid.Views.Grid
Imports DevExpress.XtraEditors
Imports System.Drawing
Imports DevExpress.XtraEditors.ViewInfo
Imports DevExpress.XtraGrid.Views.Grid.ViewInfo
Namespace ColoredProgressBar
Friend Class SRProgressBarHelper
Private Column As GridColumn
Private View As GridView
Public Sub New(ByVal column As GridColumn)
Me.Column = column
View = TryCast(Me.Column.View, GridView)
AddHandler View.ShownEditor, AddressOf View_ShownEditor
AddHandler View.CustomDrawCell, AddressOf View_CustomDrawCell
End Sub
Private Sub View_ShownEditor(ByVal sender As Object, ByVal e As EventArgs)
If View.FocusedColumn IsNot Column Then
Return
End If
Dim pbc As ProgressBarControl = TryCast(View.ActiveEditor, ProgressBarControl)
Dim percent As Integer = Convert.ToInt16(pbc.EditValue)
If percent < 25 Then
pbc.Properties.EndColor = Color.Red
pbc.Properties.StartColor = Color.Red
ElseIf percent < 50 Then
pbc.Properties.EndColor = Color.Orange
pbc.Properties.StartColor = Color.Orange
ElseIf percent < 75 Then
pbc.Properties.EndColor = Color.Green
pbc.Properties.StartColor = Color.Green
ElseIf percent <= 100 Then
pbc.Properties.EndColor = Color.DarkGreen
pbc.Properties.StartColor = Color.DarkGreen
End If
End Sub
Private Sub View_CustomDrawCell(ByVal sender As Object, ByVal e As DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs)
If e.Column Is Column Then
Dim percent As Integer = Convert.ToInt16(e.CellValue)
Dim vi As ProgressBarViewInfo = TryCast((TryCast(e.Cell, GridCellInfo)).ViewInfo, ProgressBarViewInfo)
If percent < 25 Then
vi.ProgressInfo.EndColor = Color.Red
vi.ProgressInfo.StartColor = Color.Red
ElseIf percent < 50 Then
vi.ProgressInfo.EndColor = Color.Orange
vi.ProgressInfo.StartColor = Color.Orange
ElseIf percent < 75 Then
vi.ProgressInfo.EndColor = Color.Green
vi.ProgressInfo.StartColor = Color.Green
ElseIf percent <= 100 Then
vi.ProgressInfo.EndColor = Color.DarkGreen
vi.ProgressInfo.StartColor = Color.DarkGreen
End If
End If
End Sub
End Class
End Namespace
- Tiếp tục các bạn code cho file DifferentRepositoriesProgressBar.vb như sau:
Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Text
Imports DevExpress.XtraGrid.Columns
Imports DevExpress.XtraGrid.Views.Grid
Imports DevExpress.XtraGrid.Views.Base
Imports DevExpress.XtraEditors.Repository
Imports System.Drawing
Namespace ColoredProgressBar
Friend Class DRProgressBarHelper
Private Column As GridColumn
Private View As GridView
Private prbLess25 As RepositoryItemProgressBar
Private prbLess50 As RepositoryItemProgressBar
Private prbLess75 As RepositoryItemProgressBar
Private prbLess100 As RepositoryItemProgressBar
Public Sub New(ByVal column As GridColumn)
PrbInit()
Me.Column = column
View = TryCast(Me.Column.View, GridView)
AddHandler View.CustomRowCellEdit, AddressOf View_CustomRowCellEdit
End Sub
Private Sub PrbInit()
prbLess25 = New RepositoryItemProgressBar()
prbLess25.StartColor = Color.Red
prbLess25.EndColor = Color.Red
prbLess25.ShowTitle = True
prbLess25.ProgressViewStyle = DevExpress.XtraEditors.Controls.ProgressViewStyle.Solid
prbLess25.LookAndFeel.Style = DevExpress.LookAndFeel.LookAndFeelStyle.Flat
prbLess25.LookAndFeel.UseDefaultLookAndFeel = False
prbLess50 = New RepositoryItemProgressBar()
prbLess50.StartColor = Color.Orange
prbLess50.EndColor = Color.Orange
prbLess50.ShowTitle = True
prbLess50.ProgressViewStyle = DevExpress.XtraEditors.Controls.ProgressViewStyle.Solid
prbLess50.LookAndFeel.Style = DevExpress.LookAndFeel.LookAndFeelStyle.Flat
prbLess50.LookAndFeel.UseDefaultLookAndFeel = False
prbLess75 = New RepositoryItemProgressBar()
prbLess75.StartColor = Color.YellowGreen
prbLess75.EndColor = Color.YellowGreen
prbLess75.ShowTitle = True
prbLess75.ProgressViewStyle = DevExpress.XtraEditors.Controls.ProgressViewStyle.Solid
prbLess75.LookAndFeel.Style = DevExpress.LookAndFeel.LookAndFeelStyle.Flat
prbLess75.LookAndFeel.UseDefaultLookAndFeel = False
prbLess100 = New RepositoryItemProgressBar()
prbLess100.StartColor = Color.Green
prbLess100.EndColor = Color.Green
prbLess100.ShowTitle = True
prbLess100.ProgressViewStyle = DevExpress.XtraEditors.Controls.ProgressViewStyle.Solid
prbLess100.LookAndFeel.Style = DevExpress.LookAndFeel.LookAndFeelStyle.Flat
prbLess100.LookAndFeel.UseDefaultLookAndFeel = False
End Sub
Private Sub View_CustomRowCellEdit(ByVal sender As Object, ByVal e As DevExpress.XtraGrid.Views.Grid.CustomRowCellEditEventArgs)
If e.Column Is Column Then
Dim percent As Integer = Convert.ToInt16(e.CellValue)
If percent < 25 Then
e.RepositoryItem = prbLess25
ElseIf percent < 50 Then
e.RepositoryItem = prbLess50
ElseIf percent < 75 Then
e.RepositoryItem = prbLess75
ElseIf percent <= 100 Then
e.RepositoryItem = prbLess100
End If
End If
End Sub
End Class
End Namespace
- Đoạn code cho file Form1.vb
Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Text
Imports System.Windows.Forms
Imports DevExpress.XtraGrid.Views.Grid.ViewInfo
Imports DevExpress.XtraEditors.Drawing
Imports DevExpress.XtraGrid.Views.Base
Imports DevExpress.XtraGrid.Views.Grid
Imports DevExpress.Utils
Namespace ColoredProgressBar
Partial Public Class Form1
Inherits Form
Private dt As New DataTable()
Public Sub New()
InitializeComponent()
dt.Columns.Add("Column")
For i As Integer = 0 To 100 Step 10
dt.Rows.Add(i)
Next i
End Sub
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
gridControl1.DataSource = dt
Dim drHelper As New DRProgressBarHelper(col5)
Dim srHelper As New SRProgressBarHelper(col6)
End Sub
Private Sub gridView1_CustomDrawCell(ByVal sender As Object, ByVal e As DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs) Handles gridView1.CustomDrawCell
If (e.Column Is col3) OrElse (e.Column Is col4) Then
DrawFocusRect(sender, e)
e.Handled = True
End If
If (e.Column Is col3) OrElse (e.Column Is col4) OrElse (e.Column Is col1) OrElse (e.Column Is col2) Then
DrawProgressBar(e)
End If
If e.Column Is col4 Then
DrawEditor(e)
e.Handled = True
End If
End Sub
Private Sub DrawFocusRect(ByVal sender As Object, ByVal e As DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs)
Dim cell As GridCellInfo = TryCast(e.Cell, GridCellInfo)
e.Appearance.DrawBackground(e.Cache, e.Bounds)
Dim isFocusCell As Boolean = (cell.State And GridRowCellState.FocusedCell) <> 0 AndAlso (cell.State And GridRowCellState.GridFocused) <> 0
If isFocusCell AndAlso (TryCast(sender, GridView)).FocusRectStyle = DrawFocusRectStyle.CellFocus Then
e.Cache.Paint.DrawFocusRectangle(e.Graphics, cell.Bounds, cell.Appearance.GetForeColor(), cell.Appearance.GetBackColor())
End If
End Sub
Private Sub DrawEditor(ByVal e As DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs)
Dim cell As GridCellInfo = TryCast(e.Cell, GridCellInfo)
Dim offset As Point = cell.CellValueRect.Location
Dim pb As BaseEditPainter = TryCast(cell.ViewInfo.Painter, BaseEditPainter)
Dim savedStyle As AppearanceObject = cell.ViewInfo.PaintAppearance
If (Not offset.IsEmpty) Then
cell.ViewInfo.Offset(offset.X, offset.Y)
End If
Try
pb.Draw(New ControlGraphicsInfoArgs(cell.ViewInfo, e.Cache, cell.Bounds))
Finally
If (Not offset.IsEmpty) Then
cell.ViewInfo.Offset(-offset.X, -offset.Y)
End If
End Try
End Sub
Private Sub DrawProgressBar(ByVal e As DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs)
Dim percent As Integer = Convert.ToInt16(e.CellValue)
Dim v As Integer = Convert.ToInt32(e.CellValue)
v = v * e.Bounds.Width 100
Dim rect As New Rectangle(e.Bounds.X, e.Bounds.Y, v, e.Bounds.Height)
Dim b As Brush = Brushes.Green
If percent < 25 Then
b = Brushes.Red
ElseIf percent < 50 Then
b = Brushes.Orange
ElseIf percent < 75 Then
b = Brushes.YellowGreen
End If
e.Graphics.FillRectangle(b, rect)
End Sub
End Class
End Namespace
Chúc các bạn thành công. Mọi câu hỏi thắc mắc đến bài viết xin truy cập http://hoidap.laptrinhvb.net để được support.
ĐỪNG QUÊN LIKE AND SHARE NHA CÁC BẠN.
CÁM ƠN CÁC BẠN ĐÃ THEO DÕI.