C implementation adds a progress bar display effect to the specified column of the GridView table in devaxpress - code implementation method

One 、 Problem description

    When we use Winform coordination DevExpress When developing tables , The contents related to percentage data in the table except for the numerical contents showing the percentage , I also hope it can be combined with the progress bar display effect （ And less than percent 60 The contents of are indicated as unqualified in red , More than percent 60 In green ）, In this way, the percentage display effect is more clear and intuitive .

 

Two 、 Implementation method

2.1、 First register the cell drawing method

 

2.2、 Write a method to draw a progress bar to a specified cell

        #region    Draw a progress bar for the specified column of the table 

        /// <summary>
        ///  Draw a progress bar for the specified column 
        /// </summary>
        /// <param name="gridView">GridView Control </param>
        /// <param name="columnFieldName"> Name of the field to draw the progress bar column </param>
        /// <param name="warningValue"> Warning value （ Used to distinguish different colors ）</param>
        /// <param name="beforeWaringValueColor"> Progress bar color before warning value </param>
        /// <param name="afterWaringValueColor"> Progress bar color after warning value </param>
        public static void DrawProgressBarToColumn(DevExpress.XtraGrid.Views.Grid.GridView gridView, string columnFieldName, 
            double warningValue = 60, Brush beforeWaringValueColor = null, Brush afterWaringValueColor = null)
        {
            var column = gridView.Columns[columnFieldName];
            if (column == null) return;
            column.AppearanceCell.Options.UseTextOptions = true;
            // Set the position where the text content is displayed in this column （ The default here is centered ）
            column.AppearanceCell.TextOptions.HAlignment = HorzAlignment.Center;
            // Draw event methods ( Before receiving parameter usage, you need to register first )
            gridView.CustomDrawCell += (s, e) =>
            {
                if (e.Column.FieldName == columnFieldName)
                {
                    DrawProgressBar(e, warningValue, beforeWaringValueColor, afterWaringValueColor);
                    e.Handled = true;
                    DrawEditor(e);
                }
            };
        }

        /// <summary>
        ///  Draw a progress bar 
        /// </summary>
        /// <param name="e"> Cell draw event parameters </param>
        /// <param name="warningValue"> Warning value （ Used to distinguish different colors ）</param>
        /// <param name="beforeWaringValueColor"> Progress bar color before warning value </param>
        /// <param name="afterWaringValueColor"> Progress bar color after warning value </param>
        public static void DrawProgressBar(DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e, double warningValue = 60,
            Brush beforeWaringValueColor = null, Brush afterWaringValueColor = null)
        {
            string tmpValue = e.CellValue.ToString();
            float percent = 0;
            if (!string.IsNullOrEmpty(tmpValue))
            {
                float.TryParse(tmpValue, out percent);
            }
            int width = 0;
            if (percent >2)
            {
                width = (int)(Math.Abs(percent / 100) * e.Bounds.Width);
            }
            else
            {
                width = (int)(Math.Abs(percent) * e.Bounds.Width);
            }
           
            Rectangle rect = new Rectangle(e.Bounds.X, e.Bounds.Y, width, e.Bounds.Height);

            Brush b = Brushes.Green;
            if (afterWaringValueColor != null)
            {
                b = afterWaringValueColor;
            }
            if (percent < warningValue)
            {
                if (beforeWaringValueColor == null)
                {
                    b = Brushes.Red;
                }
                else
                {
                    b = beforeWaringValueColor;
                }
            }
            e.Graphics.FillRectangle(b, rect);
        }

        /// <summary>
        ///  Draw cells 
        /// </summary>
        /// <param name="e"> Cell draw event parameters </param>
        public static void DrawEditor(DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e)
        {
            DevExpress.XtraGrid.Views.Grid.ViewInfo.GridCellInfo cell = e.Cell as DevExpress.XtraGrid.Views.Grid.ViewInfo.GridCellInfo;
            Point offset = cell.CellValueRect.Location;
            DevExpress.XtraEditors.Drawing.BaseEditPainter pb = cell.ViewInfo.Painter as DevExpress.XtraEditors.Drawing.BaseEditPainter;
            AppearanceObject style = cell.ViewInfo.PaintAppearance;
            if (!offset.IsEmpty)
                cell.ViewInfo.Offset(offset.X, offset.Y);
            try
            {
                pb.Draw(new DevExpress.XtraEditors.Drawing.ControlGraphicsInfoArgs(cell.ViewInfo, e.Cache, cell.Bounds));
            }
            finally
            {
                if (!offset.IsEmpty)
                {
                    cell.ViewInfo.Offset(-offset.X, -offset.Y);
                }
            }
        }

        #endregion 

 2.3、 Use the draw progress bar method for the specified cell

    Be careful ： When using the draw progress bar method for the specified cell （ If the numbers are all less than 1 The warning value also needs to be less than 1; If it is greater than 1 And set as required ）.

           
-- Use method syntax 
DrawProgressBarToColumn(gridView Component name ,  You need to draw the cell field of the progress bar ,  Warning value , Progress bar color before warning value , Progress bar color after warning value );

-- Example 1
DrawProgressBarToColumn(gridView1, "Age", 0.6,Brushes.OrangeRed,Brushes.LawnGreen);


-- Example 2
DrawProgressBarToColumn(gridView1, "Age", 0.6, new SolidBrush(Color.FromArgb(236, 65, 65)), new SolidBrush(Color.FromArgb(45, 115, 186)));

3、 ... and 、 Related content

3.1、 Set the percentage for the cell

        /// <summary>
        ///  Set the table to use percentages for all specified cells 
        /// </summary>
        /// <param name="gridView">gridView Components </param>
        /// <param name="columnName"> Column name </param>
        public static void SetPercentage(GridView gridView, string columnName)
        {
            if (gridView != null && gridView.Columns.Count > 0 && !string.IsNullOrEmpty(columnName))
            {
                gridView.Columns[columnName].DisplayFormat.FormatType = FormatType.Numeric;
                gridView.Columns[columnName].DisplayFormat.FormatString = "P2";
            }
        }

The above code is to convert decimal to percentage display 【 For example, the decimal number (0.3) After use, it will be changed to （30%） Show 】 

        /// <summary>
        ///  All cells assigned to the table are reserved 2 Add... After decimal places % Number 
        /// </summary>
        /// <param name="gridView"></param>
        /// <param name="startColumnIndex"></param>
        /// <param name="endColumnIndex"></param>
        public static void SetResreserveTwoBitAndPercentageChar(GridView gridView, int startColumnIndex, int endColumnIndex)
        {
            if (gridView != null && gridView.Columns.Count > 0 &&
               startColumnIndex > 0 && endColumnIndex > 0 &&
               endColumnIndex <= gridView.Columns.Count)
            {
                for (int i = startColumnIndex; i <= endColumnIndex; i++)
                {
                    gridView.Columns[i].DisplayFormat.FormatType = FormatType.Numeric;
                    gridView.Columns[i].DisplayFormat.FormatString = $"{0:N2}'%'";

                }
            }
        }

  The above code is to add a percent sign to the number to display 【 For example, the decimal number (86.2356) After use, it will be changed to （86.24%） Show 】 

3.2、 Related information

GridView Class | WinForms Controls | DevExpress Documentationhttps://docs.devexpress.com/WindowsForms/DevExpress.XtraGrid.Views.Grid.GridView

GridView.CustomDrawCell Event | WinForms Controls | DevExpress Documentationhttps://docs.devexpress.com/WindowsForms/DevExpress.XtraGrid.Views.Grid.GridView.CustomDrawCell

RowCellCustomDrawEventArgs Class | WinForms Controls | DevExpress Documentationhttps://docs.devexpress.com/WindowsForms/DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgsBrush class (System.Drawing) | Microsoft Docshttps://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.brush?view=dotnet-plat-ext-6.0Graphics.DrawEllipse Method (System.Drawing) | Microsoft Docshttps://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.graphics.drawellipse?view=dotnet-plat-ext-6.0SolidBrush class (System.Drawing) | Microsoft Docshttps://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.solidbrush?view=dotnet-plat-ext-6.0