Page 1 of 1

Scale gauge chartview elements on resize (Xamarin Forms)

Posted: Sun May 09, 2021 8:19 pm
by 18290001
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
ChartWrongSizeResult.png (46.36 KiB) Viewed 10110 times
Correct result (after gauge control pressed)
ChartCorrectSizeResult.png
ChartCorrectSizeResult.png (56.57 KiB) Viewed 10110 times
All feedback & assistance greatly appreciated

Re: Scale gauge chartview elements on resize (Xamarin Forms)

Posted: Tue May 11, 2021 8:12 am
by Pep
Hello,
ok, let me take a look and check your project and back to you with a possible solution as soon as possible.

Re: Scale gauge chartview elements on resize (Xamarin Forms)

Posted: Wed May 12, 2021 9:01 am
by 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();

Re: Scale gauge chartview elements on resize (Xamarin Forms)

Posted: Wed May 12, 2021 9:37 pm
by 18290001
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
ChartFontShadowAfterInternalDraw.png (107.27 KiB) Viewed 10034 times

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

Re: Scale gauge chartview elements on resize (Xamarin Forms)

Posted: Thu May 13, 2021 11:59 am
by 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();        

Re: Scale gauge chartview elements on resize (Xamarin Forms)

Posted: Thu May 13, 2021 9:13 pm
by 18290001
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.