Scale gauge chartview elements on resize (Xamarin Forms)

[Scobie]

Steema version = Steema.TeeChart.NET.Xamarin.Forms v4.2021.4.22
Xamarin Forms version = v5.0.0.2012
Development platform = Visual Studio 2019 Pro v16.9.1
Target device = Android 6.0 (API 23) to API 10.0 (API 29) smallest res = 480x800

I am trying to write code to re-size aspects of a circular gauge control when the gauge itself is resized. My code does work, but only when the gauge control is pressed after being resized. I assume I am not calling my resize code in the correct event (currently calling in the AfterDraw event) but I cannot determine the best solution.

I have written a small test solution (attached) to demonstrate what I am trying to achieve.

In my test App whenever the SIZE button(s) are pressed, the gauge control does resize but the label font, line band & center point only size correctly when the gauge control is subsequently pressed.

Incorrect result

ChartWrongSizeResult.png (46.36 KiB) Viewed 15290 times

Correct result (after gauge control pressed)

ChartCorrectSizeResult.png (56.57 KiB) Viewed 15290 times

All feedback & assistance greatly appreciated

[Pep]

Hello,
ok, let me take a look and check your project and back to you with a possible solution as soon as possible.

[Pep]

Hello Scobie,

in order to fix this problem just add an InternalDraw at the end of the resize method :

Code: Select all

                // ### AXIS ###
                CircularGauge.Axis.Labels.Font.Size = 7.0D * (CircularGauge.XRadius / 100D);
                this.Chart.Chart.InternalDraw();

[Scobie]

Thank you for your help.

I have added the Chart.Chart.InternalDraw() method call to the end of the Resize method & while it does re-draw the font, centre point & colour band in the correct size it leaves the original (incorrectly sized) chart elements in position, creating a "shadow" effect - see image.

ChartFontShadowAfterInternalDraw.png (107.27 KiB) Viewed 15214 times

Should I be calling some sort of repaint or invalidate method before the InternalDraw method to remove the old graphics?

[Pep]

Hello,
yes, you're correct, it seems to be a repaint problem. I'll add as a bug on our bug list in order to be addressed.
In meantime I found a solution, it's to use the OnBeforeDraw event to hide the axis labels and then make them visible again once these have been resized :

Code: Select all

        // Add the beforeDraw method at the CreateGauge method
        cv.Chart.BeforeDraw += Chart_BeforeDraw;

        private void Chart_BeforeDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
        {
            CircularGauge.Axis.Labels.Visible = false;
        }
        // Add these lines at the end of the Resize method
        CircularGauge.Axis.Labels.Visible = true;
        this.Chart.Chart.InternalDraw();        

[Scobie]

Hello

I have implemented your suggestion, along with further lines to deal with the center, hand & green/red lines & the solution is working...

Code: Select all

	// Add the beforeDraw method at the CreateGauge method
	cv.Chart.BeforeDraw += Chart_BeforeDraw;

	private void Chart_BeforeDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g)
	{
		CircularGauge.Axis.Labels.Visible = false;
		CircularGauge.Center.Visible = false;
		CircularGauge.Hand.Visible = false;
		CircularGauge.GreenLine.Visible = false;
		CircularGauge.RedLine.Visible = false;
	}
	
	// Add these lines at the end of the Resize method
	CircularGauge.Axis.Labels.Visible = true;
	CircularGauge.Center.Visible = true;
	CircularGauge.Hand.Visible = true;
	CircularGauge.GreenLine.Visible = true;
	CircularGauge.RedLine.Visible = true;
	this.Chart.Chart.InternalDraw();

Thankyou for your help to get this code working.