How to write a loading circle animation in .NET?

Many of the other circle control also seem to have a memory leak too. Trying to find one that does not.

Martin, great control, thanks.

Can I request a printing animation similar to MS-Word's statusstrip printing animation ? Maybe a printer icon ?

This is more what you are looking for:
http://www.codeproject.com/KB/miscctrl/AnimatedIcon.aspx[^]

jm33, that's just perfect. Thanks!

Under some weird, non-reproducable cirumstances the method "DrawLine" can cause a "System.AccessViolationException". The problem seems to be that the following "using" clause will dispose the Pen, but not the Brush object:

[...]<br />
using(Pen objPen = new Pen(new SolidBrush(_objColor), _intLineThickness))<br />
[...].

You have to nest two "using"s like this:

[...]<br />
using(SolidBrush brush = new SolidBrush(_objColor))<br />
{<br />
    using (Pen objPen = new Pen(brush, _intLineThickness))<br />
    {<br />
[...].

Nevertheless, thanks for this great component!

Thank you for sharing that ! Smile | :)

actually you don't seem to need the brush at all there, you can create a pen with a given color and thickness straight away.

Smile | :)

Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]

Getting an article published on CodeProject should be easier and faster.

Hi Martin, hi developers,

first of all, I have to thank Martin for the great job he did. I usually use this feature in my applications, and it really rocks ! Wink | ;)

Now I'm trying to figure out how to implement a datagridviewCell/Column and a editing control to put the loading circle in the datagridview control.
I implemented three classes to do this, but the resulting behaviour is an empty unfashionned cell showing a white part and a piece of the form behind, but no loading circle at all...

could you please help find out why my cell behave that way ?

here is my code :

<br />
<br />
/////////////////////////////////LoadingCircleCell////////////////////////////////<br />
internal class LoadingCircleCell : DataGridViewCell<br />
    {<br />
        private Type validatingType;<br />
<br />
        public LoadingCircleCell() : base()<br />
        {<br />
            validatingType = typeof (LoadingCircle);<br />
        }<br />
<br />
        public override Type EditType<br />
        {<br />
            get { return typeof (LoadingCircleEditingControl); }<br />
        }<br />
<br />
        //  A Type object for the validating type.<br />
        public override Type ValueType<br />
        {<br />
            get { return typeof (LoadingCircle); }<br />
        }<br />
<br />
        public override object DefaultNewRowValue<br />
        {<br />
            get<br />
            {<br />
                // add a new loading circle<br />
                return new LoadingCircle();<br />
            }<br />
        }<br />
<br />
        public override void InitializeEditingControl(int rowIndex,<br />
                                                      object initialFormattedValue,<br />
                                                      DataGridViewCellStyle dataGridViewCellStyle)<br />
        {<br />
            base.InitializeEditingControl(rowIndex, initialFormattedValue,<br />
                                          dataGridViewCellStyle);<br />
<br />
            LoadingCircleEditingControl editingControl = DataGridView.EditingControl as LoadingCircleEditingControl;<br />
            if (editingControl != null)<br />
                editingControl.Active = (bool) Value;<br />
        }<br />
    }<br />
<br />
<br />
/////////////////////////////////LoadingCircleEditingControl////////////////////////////////<br />
public class LoadingCircleEditingControl: LoadingCircle, IDataGridViewEditingControl<br />
    {<br />
        protected int rowIndex;<br />
        protected DataGridView dataGridView;<br />
        protected bool valueChanged = false;<br />
<br />
        protected override void OnTextChanged(EventArgs e)<br />
        {<br />
            base.OnTextChanged(e);<br />
            // Let the DataGridView know about the value change<br />
            NotifyDataGridViewOfValueChange();<br />
        }<br />
<br />
        //  Notify DataGridView that the value has changed.<br />
        protected virtual void NotifyDataGridViewOfValueChange()<br />
        {<br />
            this.valueChanged = true;<br />
            if (this.dataGridView != null)<br />
            {<br />
                this.dataGridView.NotifyCurrentCellDirty(true);<br />
            }<br />
        }<br />
<br />
        #region IDataGridViewEditingControl Members<br />
<br />
        //  Indicates the cursor that should be shown when the user hovers their<br />
        //  mouse over this cell when the editing control is shown.<br />
        public Cursor EditingPanelCursor<br />
        {<br />
            get<br />
            {<br />
                return base.Cursor;<br />
            }<br />
        }<br />
<br />
<br />
        //  Returns or sets the parent DataGridView.<br />
        public DataGridView EditingControlDataGridView<br />
        {<br />
            get<br />
            {<br />
                return this.dataGridView;<br />
            }<br />
<br />
            set<br />
            {<br />
                this.dataGridView = value;<br />
            }<br />
        }<br />
<br />
<br />
        //  Sets/Gets the formatted value contents of this cell.<br />
        public object EditingControlFormattedValue<br />
        {<br />
            set<br />
            {<br />
                this.Active = (bool)value;<br />
                NotifyDataGridViewOfValueChange();<br />
            }<br />
            get <br />
            {<br />
                return this.Active;<br />
            }<br />
<br />
        }<br />
<br />
        //   Get the value of the editing control for formatting.<br />
        public object GetEditingControlFormattedValue(DataGridViewDataErrorContexts context)<br />
        {<br />
            return EditingControlFormattedValue;<br />
        }<br />
<br />
        //  Process input key and determine if the key should be used for the editing control<br />
        //  or allowed to be processed by the grid. Handle cursor movement keys for the MaskedTextBox<br />
        //  control; otherwise if the DataGridView doesn't want the input key then let the editing control handle it.<br />
        public bool EditingControlWantsInputKey(Keys keyData, bool dataGridViewWantsInputKey)<br />
        {<br />
            switch (keyData & Keys.KeyCode)<br />
            {<br />
                case Keys.Right:<br />
                    <br />
                    break;<br />
<br />
                case Keys.Left:<br />
                    <br />
                    break;<br />
<br />
                case Keys.Home:<br />
                case Keys.End:<br />
                    <br />
<br />
                case Keys.Prior:<br />
                case Keys.Next:<br />
                    if (this.valueChanged)<br />
                    {<br />
                        return true;<br />
                    }<br />
                    break;<br />
<br />
                case Keys.Delete:<br />
                    <br />
                    break;<br />
            }<br />
<br />
            //<br />
            // defer to the DataGridView and see if it wants it.<br />
            //<br />
            return !dataGridViewWantsInputKey;<br />
        }<br />
<br />
<br />
        //  Prepare the editing control for edit.<br />
        public void PrepareEditingControlForEdit(bool selectAll)<br />
        {<br />
<br />
        }<br />
<br />
        //  Indicates whether or not the parent DataGridView control should<br />
        //  reposition the editing control every time value change is indicated.<br />
        //  There is no need to do this for the MaskedTextBox.<br />
        public bool RepositionEditingControlOnValueChange<br />
        {<br />
            get<br />
            {<br />
                return false;<br />
            }<br />
        }<br />
<br />
<br />
        //  Indicates the row index of this cell.  This is often -1 for the<br />
        //  template cell, but for other cells, might actually have a value<br />
        //  greater than or equal to zero.<br />
        public int EditingControlRowIndex<br />
        {<br />
            get<br />
            {<br />
                return this.rowIndex;<br />
            }<br />
<br />
            set<br />
            {<br />
                this.rowIndex = value;<br />
            }<br />
        }<br />
<br />
<br />
<br />
        //  Make the MaskedTextBox control match the style and colors of<br />
        //  the host DataGridView control and other editing controls <br />
        //  before showing the editing control.<br />
        public void ApplyCellStyleToEditingControl(DataGridViewCellStyle dataGridViewCellStyle)<br />
        {<br />
            this.Font = dataGridViewCellStyle.Font;<br />
            this.ForeColor = dataGridViewCellStyle.ForeColor;<br />
            this.BackColor = dataGridViewCellStyle.BackColor;<br />
            //this.TextAlign = translateAlignment(dataGridViewCellStyle.Alignment);<br />
        }<br />
<br />
<br />
        //  Gets or sets our flag indicating whether the value has changed.<br />
        public bool EditingControlValueChanged<br />
        {<br />
            get<br />
            {<br />
                return valueChanged;<br />
            }<br />
<br />
            set<br />
            {<br />
                this.valueChanged = value;<br />
            }<br />
        }<br />
    <br />
        #endregion // IDataGridViewEditingControl.<br />
	}<br />
<br />
<br />
/////////////////////////////////LoadingCircleColumn ////////////////////////////////<br />
public class LoadingCircleColumn : DataGridViewColumn<br />
    {<br />
        <br />
        //  Initializes a new instance of this class, making sure to pass<br />
        //  to its base constructor an instance of a MaskedTextBoxCell <br />
        //  class to use as the basic template.<br />
        public LoadingCircleColumn() : base(new LoadingCircleCell())<br />
        {<br />
        }<br />
<br />
        //  The template cell that will be used for this column by default,<br />
        //  unless a specific cell is set for a particular row.<br />
        //<br />
        //  A MaskedTextBoxCell cell which will serve as the template cell<br />
        //  for this column.<br />
        public override DataGridViewCell CellTemplate<br />
        {<br />
            get { return base.CellTemplate; }<br />
<br />
            set<br />
            {<br />
                //  Only cell types that derive from MaskedTextBoxCell are supported as the cell template.<br />
                if (value != null && !value.GetType().IsAssignableFrom(typeof (LoadingCircleCell)))<br />
                {<br />
                    string s = "Cell type is not based upon the LoadingCircleCell.";<br />
                    //CustomColumnMain.GetResourceManager().GetString("excNotMaskedTextBox");<br />
                    throw new InvalidCastException(s);<br />
                }<br />
<br />
                base.CellTemplate = value;<br />
            }<br />
        }<br />
    }<br />

These are, to my mind, as basic as they can be.

Thanks for you help.

Hello platinum07!

First of all, thanks for your comment. I'm glad to see that you appreciate my control. However, I don't think that I can help you very much since I've never really used DataGrid control in .NET.

Despite that, I suppose that is possible to draw something "manually" in a DataGrid. I would suggest you to try to create your own custom cell. A custom cell which derive from LoadingCircle.

I did some research and here what I found...

* http://msdn2.microsoft.com/en-us/library/ms171618(vs.80).aspx
* http://msdn2.microsoft.com/en-us/library/7fb61s43.aspx

As you know, my control derived from Control. I would suggest you to only change the derived class from Control to DataGridViewImageCell or DataGridViewTextBoxCell or something like that. According to the articles, you should be able to do such thing.

If anyone else tried to do this before, please let us know. I could update the article with a LoadingCircle for a DataGrid!

Martin

Hi Martin,

thanks for the links. I am gonna try to figure out how to complete this(kindda DataGridLoadingCircleCell !) and will let you know when I'm done.

Darn - I wish I had seen this comment earlier.

I have already completed this task, creating a loading circle column for a datagridview. I can email you the code, if you'd like. I had intended to write an article here for it, but never got around to it, but I can definitely share my code.

It has become appallingly obvious that our technology has exceeded our humanity. - Albert Einstein

I ran into an issue with this control in conjunction with an Async WaitHandle
The control refused to animate while waiting for the WaitHandle to return.
This seemed odd since another loading circle control didn't behave in this manor.
I investigated the differences between the two and determined that the other loading indicator was using System.Timers object.
I made a quick change to the code and this loading circle started to perform as expected.

Heres an example use of the AsyncWaitHandle
The Following Code assumes a windows form object with an added Loading Circle control.

<br />
delegate void DoSomethingDelegate();<br />
DoSometihngDelegate iDoSomething;<br />
<br />
//On Load Event Handler<br />
void OnLoad<br />
{<br />
iDoSomething = new iDoSOmethingDelegate(WorkerMethod);<br />
IAsyncResult aResult = iDoSomething.BeginInvoke(null, null);<br />
aResult.AsyncWaitHandle.WaitOne();<br />
<br />
iDoSomething.EndInvoke(aResult);<br />
}<br />
<br />
private void WorkerMethod()<br />
{<br />
 int waitfor = 1000;<br />
for(int i = 0; i < waitfor; i++)<br />
Thread.Sleep(100);<br />
}<br />

I downloaded the demo and solutions and working with it. But I would like to add this control to my application and how would I do it? I read it that I need to add this control to component and drag drop on the form. How would I add this control to component?

Thanks for the help!

I put this control in a simple form to indicate calculation progress.A simple application created and closed this form for more than ten thousand times approximately.A "TargetInvocationException" was thrown by this form when calling "progressForm.ShowDialog()".During this period my computer became slower and the memory cost by this application increased continuously.

Hi cacerzard,

Thank you for your message... Well, I am happy to know that someone did some stress test to the component. I will try to reproduce that and let you know what is going on...

Martin

Not disposing of the SolidBrush might well be the culprit here.

Smile | :)

Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]

Getting an article published on CodeProject should be easier and faster.

Hi, I have testing your control in my application and I got a problem is that. When I add the Loading Circle into statusStrip, it work fine in the MDIForm. Smile | :)

this.CircleProgress.LoadingCircleControl.Active = true;

But when I want to run Loading Circle from SubForm, it not work. I have set the control in Public already. Confused | :confused:

MDIForm frm = new MDIForm();
frm.CircleProgress.LoadingCircleControl.Active = true;

Any idea about that?
Best regards.

Hi Anybody knows how can use this control in Visual Basic 6..???

Thanks!!

Well, the LoadingCircle is a .NET 2.0 component. It's not possible to use it with VB6 unless you decide to rewrite the component for VB6.

Martin

Thanks Martin for for U answer.

So, the component is gif image file ?, or a shape and timer control with changes, in the backcolor property. some idea for write this component ?, What's the objects working in the component design?

Regards,

Sixto

try this animated progress bar with cool circles
http://www.openwinforms.com/infinite_progress_bar.html

sa@openwinforms.com
http://www.openwinforms.com/

I am trying to use the loading circle animation in my application. What I do is when a long process takes place, before starting the process I open a new window (splash screen) which contains the loading circle control and then start my process. As said before, the use of DoEvents() works. But I dont want to call DoEvents in my process. Is there a way to open the new window using a new thread or the BackGround worker and run the process with the default thread? Or perhaps call DoEvents using a different thread or again the BackgroundWorker?

Btw Martin, I will use your control on a non commercial University research application. Could you provide you email so I can add you to the references of the application?

Hi CostasAn,

Glad to know that you use my control for a University Research Application. First of all, I don't personally recommend the use of DoEvents(). It reminds me VB6 and it's the wrong way to add responsiveness to your application.

The solution that you bring, which consists in using threads, is the right way to add responsiveness. However, you can’t create, change, draw, etc. anything in the UI with other threads. I would suggest you to see your problem from a different point of view. Start your process, the one which take a long time to execute, in a thread (or a BackgroundWorker); open a modal widow (the popup) and start the LoadingCircle and wait for the "end event" from the BackgroundWorker. Let me know what you think of that.

My email is mgagne_98 (at) hotmail (dot) com.

Regards,
Martin

Hi Martin,

Your suggestion is correct in my opinion but consider this: I develop an application which contains some number of long procedures so I will use loading circle a number of times. I developed a component (which is a splash screen containing the loading circle) which I wish to use in the following way:

splashscreen.Show()
longprocedure()
splashscreen.Close()

What I want to achieve is the code of the original application to remain as is and just add show() and close() of the splash screen in it. So I desire to add code to the splash screen so the animation will be shown without changing the original code, because the splashscreen component will be given to other programers of the application as is. What I think is if there is some way to "call" the loading circle using a thread or something similar.

I tried to add a background worker in the splashscreen which will call a procedure which continuasly calls DoEvents() in a different thread, but this didnt work for some reason I do not understand.

BTW loading circle is a very nice and good looking component. If we could find a solution for this problem rest assured that it will be used further not only in the application I am developing but perhaps in more research applications.

Thanks and regards,
Costas

Hi Costas,

I don't have a lot of time to answer your question. I think that you should call the method longprocedure() using the BackgroundWorker (i.e. threads). You will see, in the BackgroundWorker, there are different events that will help you to know when the process starts and finishes. Let me know what you think of that.

Regards,
Martin

How to write a loading circle animation in .NET?

Introduction

Points of interest

Rotation speed

How to draw a spoke?

How to use this component?

Conclusion

Revision history

License

Comments and Discussions