The .NET MAUI Cartesian Chart provides a visually appealing way to represent data using gradient colors. Gradients can be easily applied to the chart using the PaletteBrushes or Fill property with the help of a LinearGradientBrush. This article provides step-by-step guidelines on how to apply gradient colors to the .NET MAUI Cartesian Charts. Configuring .NET MAUI Cartesian Charts: Initialize the Syncfusion® .NET MAUI Cartesian Chart using the user guide document. The StartPoint and EndPoint properties of LinearGradientBrush are used to configure the direction of the gradient color, and the GradientStops property is used to set the color based on the offset. Apply Gradient Color using XAML: <chart:SfCartesianChart> ... <chart:SplineAreaSeries> <chart:SplineAreaSeries.Fill> <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> <GradientStop Color="#336699" Offset="0" /> <GradientStop Color="#d9e6f2" Offset="1" /> </LinearGradientBrush> </chart:SplineAreaSeries.Fill> </chart:SplineAreaSeries> </chart:SfCartesianChart> Apply Gradient Color using viewmodel: public class ViewModel { public List<Brush> CustomBrushes { get; set; } public ViewModel() { CustomBrushes = new List<Brush>(); LinearGradientBrush linearGradientBrush = new LinearGradientBrush(); linearGradientBrush.StartPoint = new Point(0, 0.5); linearGradientBrush.EndPoint = new Point(1, 0.5); linearGradientBrush.GradientStops = new GradientStopCollection() { new GradientStop() { Offset = 0, Color = Color.FromRgb(51, 102, 153) }, new GradientStop() { Offset = 1, Color = Color.FromRgb(217, 230, 242) } }; CustomBrushes.Add(linearGradientBrush); } } <chart:SfCartesianChart> ... <chart:SplineAreaSeries ItemsSource="{Binding Data}" XBindingPath="Year" YBindingPath="Revenue" PaletteBrushes="{Binding CustomBrushes}"/> </chart:SfCartesianChart> Conclusion I hope you enjoyed learning how to apply gradient colors to the .NET MAUI Cartesian Chart. You can refer to our .NET MAUI Charts feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Charts documentation to understand how to present and manipulate data. For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Charts and other .NET MAUI components. Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac , or feedback portal. We are always happy to assist you!
GroupBox appearance can be achieved by creating the custom control from the Gradient Panel. The following code example demonstrates the same. C# /// <summary> /// Overrides the paint event. /// </summary> /// <param name="e">The PaintEventArgs contains the event data.</param> protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); PaintBackGround(e.Graphics); PaintHeaderText(e.Graphics); } /// <summary> /// This method helps paint the title of the GradientPanelAdv. /// </summary> /// <param name="g">The Graphics object for paint event handler.</param> private void PaintHeaderText(System.Drawing.Graphics g) { //To check whether if string has something if (this.HeaderText == string.Empty) { return; } //To set graphics smoothing mode to Anit-Alias g.SmoothingMode = SmoothingMode.AntiAlias; //To declare the variables SizeF StringSize = g.MeasureString(this.HeaderText, this.Font); System.Drawing.Drawing2D.GraphicsPath path = new System.Drawing.Drawing2D.GraphicsPath(); System.Drawing.Brush BorderBrush = new SolidBrush(this.BorderColor); System.Drawing.Brush BackgroundBrush = new SolidBrush(this.BackColor); System.Drawing.SolidBrush TextColorBrush = new SolidBrush(this.ForeColor); path.AddRectangle(new Rectangle(this.ClientRectangle.X + 20, this.ClientRectangle.Y + 5, (int)Math.Ceiling(StringSize.Width) + 10, (int)Math.Ceiling(StringSize.Height))); if (this.BackgroundColor.GradientStyle == GradientStyle.None) { //To paint text rectangle g.FillPath(BackgroundBrush, path); } //To draw the header text g.DrawString(this.HeaderText, this.Font, TextColorBrush, 26, 5); // To destroy Graphic Objects if (path != null) { path.Dispose(); } if (BorderBrush != null) { BorderBrush.Dispose(); } if (BackgroundBrush != null) { BackgroundBrush.Dispose(); } if (TextColorBrush != null) { TextColorBrush.Dispose(); } } /// <summary> /// To paint the background of the GradientPanelExt. /// </summary> /// <param name="g">The Graphics object for paint event handler.</param> private void PaintBackGround(System.Drawing.Graphics g) { //To set Graphics smoothing mode to Anit-Alias g.SmoothingMode = SmoothingMode.AntiAlias; //To declare Variables int ArcWidth = 20; int ArcHeight = 20; int ArcX1 = 0; int ArcX2 = this.Width - (ArcWidth + 1); int ArcY1 = 10; int ArcY2 = this.Height - (ArcHeight + 1); System.Drawing.Drawing2D.GraphicsPath graphicsPath = new System.Drawing.Drawing2D.GraphicsPath(); System.Drawing.Brush BorderBrush = new SolidBrush(this.BorderColor); System.Drawing.Pen BorderPen = new Pen(BorderBrush, this.BorderThickness); //To create rounded rectangle path graphicsPath.AddArc(ArcX1, ArcY1, ArcWidth, ArcHeight, 180, 90); // Top Left graphicsPath.AddArc(ArcX2, ArcY1, ArcWidth, ArcHeight, 270, 90); //Top Right graphicsPath.AddArc(ArcX2, ArcY2, ArcWidth, ArcHeight, 360, 90); //Bottom Right graphicsPath.AddArc(ArcX1, ArcY2, ArcWidth, ArcHeight, 90, 90); //Bottom Left graphicsPath.CloseAllFigures(); //To draw a border g.DrawPath(BorderPen, graphicsPath); //To destroy Graphic Objects if (graphicsPath != null) { graphicsPath.Dispose(); } if (BorderBrush != null) { BorderBrush.Dispose(); } if (BorderPen != null) { BorderPen.Dispose(); } } VB ''' <summary> ''' Overrides the paint event ''' </summary> ''' <param name="e"> The PaintEventArgs contains the event data.</param> Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs) MyBase.OnPaint(e) PaintBackGround(e.Graphics) PaintHeaderText(e.Graphics) End Sub ''' <summary> ''' This method helps paint the title of the GradientPanelAdv. ''' </summary> ''' <param name="g">The Graphics object for paint event handler.</param> Private Sub PaintHeaderText(ByVal g As System.Drawing.Graphics) 'To check whether if string has something If Me.HeaderText = String.Empty Then Return End If 'To set graphics smoothing mode to Anit-Alias g.SmoothingMode = SmoothingMode.AntiAlias 'To declare the variables Dim StringSize As SizeF = g.MeasureString(Me.HeaderText, Me.Font) Dim path As New System.Drawing.Drawing2D.GraphicsPath() Dim BorderBrush As System.Drawing.Brush = New SolidBrush(Me.BorderColor) Dim BackgroundBrush As System.Drawing.Brush = New SolidBrush(Me.BackColor) Dim TextColorBrush As System.Drawing.SolidBrush = New SolidBrush(Me.ForeColor) path.AddRectangle(New Rectangle(Me.ClientRectangle.X + 20, Me.ClientRectangle.Y + 5, CInt(Fix(Math.Ceiling(StringSize.Width))) + 10, CInt(Fix(Math.Ceiling(StringSize.Height))))) If Me.BackgroundColor.GradientStyle = GradientStyle.None Then 'To paint text rectangle g.FillPath(BackgroundBrush, path) End If 'To draw the header text g.DrawString(Me.HeaderText, Me.Font, TextColorBrush, 26, 5) ' To destroy Graphic Objects If path IsNot Nothing Then path.Dispose() End If If BorderBrush IsNot Nothing Then BorderBrush.Dispose() End If If BackgroundBrush IsNot Nothing Then BackgroundBrush.Dispose() End If If TextColorBrush IsNot Nothing Then TextColorBrush.Dispose() End If End Sub ''' <summary> ''' To paint the background of the GradientPanelExt. ''' </summary> ''' <param name="g">The Graphics object for paint event handler.</param> Private Sub PaintBackGround(ByVal g As System.Drawing.Graphics) 'To set Graphics smoothing mode to Anit-Alias g.SmoothingMode = SmoothingMode.AntiAlias 'To declare Variables Dim ArcWidth As Integer = 20 Dim ArcHeight As Integer = 20 Dim ArcX1 As Integer = 0 Dim ArcX2 As Integer = Me.Width - (ArcWidth + 1) Dim ArcY1 As Integer = 10 Dim ArcY2 As Integer = Me.Height - (ArcHeight + 1) Dim graphicsPath As New System.Drawing.Drawing2D.GraphicsPath() Dim BorderBrush As System.Drawing.Brush = New SolidBrush(Me.BorderColor) Dim BorderPen As System.Drawing.Pen = New Pen(BorderBrush, Me.BorderThickness) 'To create rounded rectangle path graphicsPath.AddArc(ArcX1, ArcY1, ArcWidth, ArcHeight, 180, 90) ' Top Left graphicsPath.AddArc(ArcX2, ArcY1, ArcWidth, ArcHeight, 270, 90) 'Top Right graphicsPath.AddArc(ArcX2, ArcY2, ArcWidth, ArcHeight, 360, 90) 'Bottom Right graphicsPath.AddArc(ArcX1, ArcY2, ArcWidth, ArcHeight, 90, 90) 'Bottom Left graphicsPath.CloseAllFigures() 'To draw a border g.DrawPath(BorderPen, graphicsPath) 'To destroy Graphic Objects If graphicsPath IsNot Nothing Then graphicsPath.Dispose() End If If BorderBrush IsNot Nothing Then BorderBrush.Dispose() End If If BorderPen IsNot Nothing Then BorderPen.Dispose() End If End Sub Figure 1: GradientPanel customization. Sample Links: C#: GradientPanel_GroupBoxAppearance_C# VB: GradientPanel_GroupBoxAppearance_VB
