Scale gauge chartview elements on resize (Xamarin Forms)

TeeChart for Microsoft Visual Studio .NET, Xamarin Studio (Android, iOS & Forms) & Monodevelop.
Post Reply
Scobie
Newbie
Newbie
Posts: 10
Joined: Thu Nov 26, 2020 12:00 am

Scale gauge chartview elements on resize (Xamarin Forms)

Post by Scobie » Sun May 09, 2021 8:19 pm

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 1160 times
Correct result (after gauge control pressed)
ChartCorrectSizeResult.png
ChartCorrectSizeResult.png (56.57 KiB) Viewed 1160 times
All feedback & assistance greatly appreciated
Attachments
GaugeResizeTestApp.zip
(353.1 KiB) Downloaded 62 times

Pep
Site Admin
Site Admin
Posts: 3228
Joined: Fri Nov 14, 2003 5:00 am
Contact:

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

Post by Pep » Tue May 11, 2021 8:12 am

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

Pep
Site Admin
Site Admin
Posts: 3228
Joined: Fri Nov 14, 2003 5:00 am
Contact:

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

Post by Pep » Wed May 12, 2021 9:01 am

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
Newbie
Newbie
Posts: 10
Joined: Thu Nov 26, 2020 12:00 am

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

Post by Scobie » Wed May 12, 2021 9:37 pm

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 1084 times

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

Pep
Site Admin
Site Admin
Posts: 3228
Joined: Fri Nov 14, 2003 5:00 am
Contact:

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

Post by Pep » Thu May 13, 2021 11:59 am

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
Newbie
Newbie
Posts: 10
Joined: Thu Nov 26, 2020 12:00 am

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

Post by Scobie » Thu May 13, 2021 9:13 pm

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.

Post Reply